From 0897824859ea235e58f6ba41f1a28c8f1f1db29f Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 11 Sep 2023 13:34:35 -0500 Subject: [PATCH 01/10] Add additional localized labels to sub-elements in the table to improve accessibility --- .../table/label-token-defaults.ts | 7 +++++- .../src/label-provider/table/label-tokens.ts | 25 +++++++++++++++++++ .../table/components/group-row/template.ts | 6 ++++- .../src/table/components/header/template.ts | 22 ++++++++++++---- .../src/table/components/row/template.ts | 3 +++ .../nimble-components/src/table/template.ts | 6 +++-- 6 files changed, 60 insertions(+), 9 deletions(-) diff --git a/packages/nimble-components/src/label-provider/table/label-token-defaults.ts b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts index b2a31d3de2..fbebca5fc3 100644 --- a/packages/nimble-components/src/label-provider/table/label-token-defaults.ts +++ b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts @@ -7,5 +7,10 @@ export const tableLabelDefaults: { readonly [key in TokenName]: string } = { tableGroupExpandLabel: 'Expand group', tableGroupsCollapseAllLabel: 'Collapse all groups', tableCellActionMenuLabel: 'Options', - tableColumnHeaderGroupedIndicatorLabel: 'Grouped' + tableColumnHeaderGroupedIndicatorLabel: 'Grouped', + tableColumnHeaderSortedAscendingIndicatorLabel: 'Sorted ascending', + tableColumnHeaderSortedDescendingIndicatorLabel: 'Sorted descending', + tableSelectAllLabel: 'Select all rows', + tableGroupSelectAllLabel: 'Select all rows in group', + tableRowSelectLabel: 'Select row' }; diff --git a/packages/nimble-components/src/label-provider/table/label-tokens.ts b/packages/nimble-components/src/label-provider/table/label-tokens.ts index 5d8a41394a..2424b0b210 100644 --- a/packages/nimble-components/src/label-provider/table/label-tokens.ts +++ b/packages/nimble-components/src/label-provider/table/label-tokens.ts @@ -25,3 +25,28 @@ export const tableColumnHeaderGroupedIndicatorLabel = DesignToken.create name: 'table-column-header-grouped-indicator-label', cssCustomPropertyName: null }).withDefault(tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel); + +export const tableColumnHeaderSortedAscendingIndicatorLabel = DesignToken.create({ + name: 'table-column-header-sorted-ascending-indicator-label', + cssCustomPropertyName: null +}).withDefault(tableLabelDefaults.tableColumnHeaderSortedAscendingIndicatorLabel); + +export const tableColumnHeaderSortedDescendingIndicatorLabel = DesignToken.create({ + name: 'table-column-header-sorted-descending-indicator-label', + cssCustomPropertyName: null +}).withDefault(tableLabelDefaults.tableColumnHeaderSortedDescendingIndicatorLabel); + +export const tableSelectAllLabel = DesignToken.create({ + name: 'table-select-all-label', + cssCustomPropertyName: null +}).withDefault(tableLabelDefaults.tableSelectAllLabel); + +export const tableGroupSelectAllLabel = DesignToken.create({ + name: 'table-group-select-all-label', + cssCustomPropertyName: null +}).withDefault(tableLabelDefaults.tableGroupSelectAllLabel); + +export const tableRowSelectLabel = DesignToken.create({ + name: 'table-row-select-label', + cssCustomPropertyName: null +}).withDefault(tableLabelDefaults.tableRowSelectLabel); diff --git a/packages/nimble-components/src/table/components/group-row/template.ts b/packages/nimble-components/src/table/components/group-row/template.ts index 01c23cea95..40c56bd262 100644 --- a/packages/nimble-components/src/table/components/group-row/template.ts +++ b/packages/nimble-components/src/table/components/group-row/template.ts @@ -7,7 +7,8 @@ import { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right'; import { checkboxTag } from '../../../checkbox'; import { tableGroupCollapseLabel, - tableGroupExpandLabel + tableGroupExpandLabel, + tableGroupSelectAllLabel } from '../../../label-provider/table/label-tokens'; // prettier-ignore @@ -24,6 +25,8 @@ export const template = html` class="selection-checkbox" @change="${(x, c) => x.onSelectionChange(c.event as CustomEvent)}" @click="${(_, c) => c.event.stopPropagation()}" + title="${x => tableGroupSelectAllLabel.getValueFor(x)}" + aria-label="${x => tableGroupSelectAllLabel.getValueFor(x)}" > @@ -35,6 +38,7 @@ export const template = html` content-hidden class="expand-collapse-button" tabindex="-1" + title="${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}" > <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"> ${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))} diff --git a/packages/nimble-components/src/table/components/header/template.ts b/packages/nimble-components/src/table/components/header/template.ts index cf0f48dcfb..59de2cf045 100644 --- a/packages/nimble-components/src/table/components/header/template.ts +++ b/packages/nimble-components/src/table/components/header/template.ts @@ -4,7 +4,7 @@ import { iconArrowDownTag } from '../../../icons/arrow-down'; import { iconArrowUpTag } from '../../../icons/arrow-up'; import { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets'; import { TableColumnSortDirection } from '../../types'; -import { tableColumnHeaderGroupedIndicatorLabel } from '../../../label-provider/table/label-tokens'; +import { tableColumnHeaderGroupedIndicatorLabel, tableColumnHeaderSortedAscendingIndicatorLabel, tableColumnHeaderSortedDescendingIndicatorLabel } from '../../../label-provider/table/label-tokens'; // prettier-ignore export const template = html` @@ -14,15 +14,27 @@ export const template = html` @mousedown="${(_x, c) => !((c.event as MouseEvent).detail > 1)}" > - ${'' /* Omit title attribute for sort indicators because aria-sort is set on the 1st sorted column */} + ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */} ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html` - <${iconArrowUpTag} class="sort-indicator" aria-hidden="true"> + <${iconArrowUpTag} + class="sort-indicator" + title="${x => tableColumnHeaderSortedAscendingIndicatorLabel.getValueFor(x)}" + aria-hidden="true" + > `)} ${when(x => x.sortDirection === TableColumnSortDirection.descending, html` - <${iconArrowDownTag} class="sort-indicator" aria-hidden="true"> + <${iconArrowDownTag} + class="sort-indicator" + title="${x => tableColumnHeaderSortedDescendingIndicatorLabel.getValueFor(x)}" + aria-hidden="true" + > `)} ${when(x => x.isGrouped, html` - <${iconTwoSquaresInBracketsTag} class="grouped-indicator" title="${x => tableColumnHeaderGroupedIndicatorLabel.getValueFor(x)}"> + <${iconTwoSquaresInBracketsTag} + class="grouped-indicator" + title="${x => tableColumnHeaderGroupedIndicatorLabel.getValueFor(x)}" + aria-label="${x => tableColumnHeaderGroupedIndicatorLabel.getValueFor(x)}" + > `)} `; diff --git a/packages/nimble-components/src/table/components/row/template.ts b/packages/nimble-components/src/table/components/row/template.ts index 946aa4a58e..9d2f1978f0 100644 --- a/packages/nimble-components/src/table/components/row/template.ts +++ b/packages/nimble-components/src/table/components/row/template.ts @@ -3,6 +3,7 @@ import type { TableRow, ColumnState } from '.'; import type { MenuButtonToggleEventDetail } from '../../../menu-button/types'; import { tableCellTag } from '../cell'; import { checkboxTag } from '../../../checkbox'; +import { tableRowSelectLabel } from '../../../label-provider/table/label-tokens'; // prettier-ignore export const template = html` @@ -14,6 +15,8 @@ export const template = html` class="selection-checkbox" @change="${(x, c) => x.onSelectionChange(c.event as CustomEvent)}" @click="${(_, c) => c.event.stopPropagation()}" + title="${x => tableRowSelectLabel.getValueFor(x)}" + aria-label="${x => tableRowSelectLabel.getValueFor(x)}" > diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts index 071287d5e3..d61924a6aa 100644 --- a/packages/nimble-components/src/table/template.ts +++ b/packages/nimble-components/src/table/template.ts @@ -23,7 +23,7 @@ import { buttonTag } from '../button'; import { ButtonAppearance } from '../button/types'; import { iconTriangleTwoLinesHorizontalTag } from '../icons/triangle-two-lines-horizontal'; import { checkboxTag } from '../checkbox'; -import { tableGroupsCollapseAllLabel } from '../label-provider/table/label-tokens'; +import { tableGroupsCollapseAllLabel, tableSelectAllLabel } from '../label-provider/table/label-tokens'; // prettier-ignore export const template = html` @@ -48,11 +48,13 @@ export const template = html
`
${when(x => x.selectionMode === TableRowSelectionMode.multiple, html
` - + <${checkboxTag} ${ref('selectionCheckbox')} class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}" @change="${(x, c) => x.onAllRowsSelectionChange(c.event as CustomEvent)}" + title="${x => tableSelectAllLabel.getValueFor(x)}" + aria-label="${x => tableSelectAllLabel.getValueFor(x)}" > From 7df16bd5e1513babef782f0a3582a6dba67492a6 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 11 Sep 2023 13:46:32 -0500 Subject: [PATCH 02/10] format --- .../src/label-provider/table/label-tokens.ts | 8 ++++++-- .../src/table/components/header/template.ts | 10 +++++++--- packages/nimble-components/src/table/template.ts | 5 ++++- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/nimble-components/src/label-provider/table/label-tokens.ts b/packages/nimble-components/src/label-provider/table/label-tokens.ts index 2424b0b210..50c58edca8 100644 --- a/packages/nimble-components/src/label-provider/table/label-tokens.ts +++ b/packages/nimble-components/src/label-provider/table/label-tokens.ts @@ -29,12 +29,16 @@ export const tableColumnHeaderGroupedIndicatorLabel = DesignToken.create export const tableColumnHeaderSortedAscendingIndicatorLabel = DesignToken.create({ name: 'table-column-header-sorted-ascending-indicator-label', cssCustomPropertyName: null -}).withDefault(tableLabelDefaults.tableColumnHeaderSortedAscendingIndicatorLabel); +}).withDefault( + tableLabelDefaults.tableColumnHeaderSortedAscendingIndicatorLabel +); export const tableColumnHeaderSortedDescendingIndicatorLabel = DesignToken.create({ name: 'table-column-header-sorted-descending-indicator-label', cssCustomPropertyName: null -}).withDefault(tableLabelDefaults.tableColumnHeaderSortedDescendingIndicatorLabel); +}).withDefault( + tableLabelDefaults.tableColumnHeaderSortedDescendingIndicatorLabel +); export const tableSelectAllLabel = DesignToken.create({ name: 'table-select-all-label', diff --git a/packages/nimble-components/src/table/components/header/template.ts b/packages/nimble-components/src/table/components/header/template.ts index 59de2cf045..ea32c5c0c6 100644 --- a/packages/nimble-components/src/table/components/header/template.ts +++ b/packages/nimble-components/src/table/components/header/template.ts @@ -4,7 +4,11 @@ import { iconArrowDownTag } from '../../../icons/arrow-down'; import { iconArrowUpTag } from '../../../icons/arrow-up'; import { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets'; import { TableColumnSortDirection } from '../../types'; -import { tableColumnHeaderGroupedIndicatorLabel, tableColumnHeaderSortedAscendingIndicatorLabel, tableColumnHeaderSortedDescendingIndicatorLabel } from '../../../label-provider/table/label-tokens'; +import { + tableColumnHeaderGroupedIndicatorLabel, + tableColumnHeaderSortedAscendingIndicatorLabel, + tableColumnHeaderSortedDescendingIndicatorLabel +} from '../../../label-provider/table/label-tokens'; // prettier-ignore export const template = html` @@ -15,14 +19,14 @@ export const template = html` > ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */} - ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html` + ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html` <${iconArrowUpTag} class="sort-indicator" title="${x => tableColumnHeaderSortedAscendingIndicatorLabel.getValueFor(x)}" aria-hidden="true" > `)} - ${when(x => x.sortDirection === TableColumnSortDirection.descending, html` + ${when(x => x.sortDirection === TableColumnSortDirection.descending, html` <${iconArrowDownTag} class="sort-indicator" title="${x => tableColumnHeaderSortedDescendingIndicatorLabel.getValueFor(x)}" diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts index d61924a6aa..e307f339fc 100644 --- a/packages/nimble-components/src/table/template.ts +++ b/packages/nimble-components/src/table/template.ts @@ -23,7 +23,10 @@ import { buttonTag } from '../button'; import { ButtonAppearance } from '../button/types'; import { iconTriangleTwoLinesHorizontalTag } from '../icons/triangle-two-lines-horizontal'; import { checkboxTag } from '../checkbox'; -import { tableGroupsCollapseAllLabel, tableSelectAllLabel } from '../label-provider/table/label-tokens'; +import { + tableGroupsCollapseAllLabel, + tableSelectAllLabel +} from '../label-provider/table/label-tokens'; // prettier-ignore export const template = html
` From 896bec315fa857fd0cff652286bb05f3d3be9578 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 11 Sep 2023 13:47:11 -0500 Subject: [PATCH 03/10] Change files --- ...le-components-4d50372b-5cd2-4e13-9053-d023da4a2ebe.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-4d50372b-5cd2-4e13-9053-d023da4a2ebe.json diff --git a/change/@ni-nimble-components-4d50372b-5cd2-4e13-9053-d023da4a2ebe.json b/change/@ni-nimble-components-4d50372b-5cd2-4e13-9053-d023da4a2ebe.json new file mode 100644 index 0000000000..35f3d924b8 --- /dev/null +++ b/change/@ni-nimble-components-4d50372b-5cd2-4e13-9053-d023da4a2ebe.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add additional localized labels to sub-elements in the table to improve accessibility", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} From f365d01c4c618fe6f97f5b13d320caa34e983cf0 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 12 Sep 2023 11:52:23 -0500 Subject: [PATCH 04/10] add attributes for new labels --- .../src/label-provider/table/index.ts | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts index 1c3ada4972..d5783c1555 100644 --- a/packages/nimble-components/src/label-provider/table/index.ts +++ b/packages/nimble-components/src/label-provider/table/index.ts @@ -4,9 +4,14 @@ import { DesignTokensFor, LabelProviderBase } from '../base'; import { tableCellActionMenuLabel, tableColumnHeaderGroupedIndicatorLabel, + tableColumnHeaderSortedAscendingIndicatorLabel, + tableColumnHeaderSortedDescendingIndicatorLabel, tableGroupCollapseLabel, tableGroupExpandLabel, - tableGroupsCollapseAllLabel + tableGroupSelectAllLabel, + tableGroupsCollapseAllLabel, + tableRowSelectLabel, + tableSelectAllLabel } from './label-tokens'; declare global { @@ -20,7 +25,14 @@ const supportedLabels = { groupExpand: tableGroupExpandLabel, groupsCollapseAll: tableGroupsCollapseAllLabel, cellActionMenu: tableCellActionMenuLabel, - columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel + columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel, + columnHeaderSortedAscendingIndicator: + tableColumnHeaderSortedAscendingIndicatorLabel, + columnHeaderSortedDescendingIndicator: + tableColumnHeaderSortedDescendingIndicatorLabel, + selectAll: tableSelectAllLabel, + groupSelectAll: tableGroupSelectAllLabel, + rowSelect: tableRowSelectLabel } as const; /** @@ -44,6 +56,21 @@ export class LabelProviderTable @attr({ attribute: 'column-header-grouped-indicator' }) public columnHeaderGroupedIndicator: string | undefined; + @attr({ attribute: 'column-header-sorted-ascending-indicator' }) + public columnHeaderSortedAscendingIndicator: string | undefined; + + @attr({ attribute: 'column-header-sorted-descending-indicator' }) + public columnHeaderSortedDescendingIndicator: string | undefined; + + @attr({ attribute: 'select-all' }) + public selectAll: string | undefined; + + @attr({ attribute: 'group-select-all' }) + public groupSelectAll: string | undefined; + + @attr({ attribute: 'row-select' }) + public rowSelect: string | undefined; + protected override readonly supportedLabels = supportedLabels; } From bcc0afa85d0d32c84c7827f61ff1ab0f50b3e4fb Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:10:54 -0500 Subject: [PATCH 05/10] create column for row operations (selection + collapse group) --- .../src/label-provider/table/index.ts | 7 +++- .../table/label-token-defaults.ts | 3 +- .../src/label-provider/table/label-tokens.ts | 5 +++ .../src/table/components/cell/template.ts | 1 + .../src/table/components/row/index.ts | 3 ++ .../src/table/components/row/styles.ts | 2 +- .../src/table/components/row/template.ts | 24 +++++++------- .../components/row/tests/table-row.spec.ts | 14 ++++++++ packages/nimble-components/src/table/index.ts | 4 +++ .../nimble-components/src/table/styles.ts | 20 +++++++++++ .../nimble-components/src/table/template.ts | 33 +++++++++++-------- 11 files changed, 88 insertions(+), 28 deletions(-) diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts index d5783c1555..a9e82c94a0 100644 --- a/packages/nimble-components/src/label-provider/table/index.ts +++ b/packages/nimble-components/src/label-provider/table/index.ts @@ -10,6 +10,7 @@ import { tableGroupExpandLabel, tableGroupSelectAllLabel, tableGroupsCollapseAllLabel, + tableRowOperationColumnLabel, tableRowSelectLabel, tableSelectAllLabel } from './label-tokens'; @@ -32,7 +33,8 @@ const supportedLabels = { tableColumnHeaderSortedDescendingIndicatorLabel, selectAll: tableSelectAllLabel, groupSelectAll: tableGroupSelectAllLabel, - rowSelect: tableRowSelectLabel + rowSelect: tableRowSelectLabel, + rowOperationColumn: tableRowOperationColumnLabel } as const; /** @@ -71,6 +73,9 @@ export class LabelProviderTable @attr({ attribute: 'row-select' }) public rowSelect: string | undefined; + @attr({ attribute: 'row-operation-column' }) + public rowOperationColumn: string | undefined; + protected override readonly supportedLabels = supportedLabels; } diff --git a/packages/nimble-components/src/label-provider/table/label-token-defaults.ts b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts index fbebca5fc3..f0963bdc42 100644 --- a/packages/nimble-components/src/label-provider/table/label-token-defaults.ts +++ b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts @@ -12,5 +12,6 @@ export const tableLabelDefaults: { readonly [key in TokenName]: string } = { tableColumnHeaderSortedDescendingIndicatorLabel: 'Sorted descending', tableSelectAllLabel: 'Select all rows', tableGroupSelectAllLabel: 'Select all rows in group', - tableRowSelectLabel: 'Select row' + tableRowSelectLabel: 'Select row', + tableRowOperationColumnLabel: 'Row operations' }; diff --git a/packages/nimble-components/src/label-provider/table/label-tokens.ts b/packages/nimble-components/src/label-provider/table/label-tokens.ts index 50c58edca8..aafeb4863c 100644 --- a/packages/nimble-components/src/label-provider/table/label-tokens.ts +++ b/packages/nimble-components/src/label-provider/table/label-tokens.ts @@ -54,3 +54,8 @@ export const tableRowSelectLabel = DesignToken.create({ name: 'table-row-select-label', cssCustomPropertyName: null }).withDefault(tableLabelDefaults.tableRowSelectLabel); + +export const tableRowOperationColumnLabel = DesignToken.create({ + name: 'table-row-operation-column-label', + cssCustomPropertyName: null +}).withDefault(tableLabelDefaults.tableRowOperationColumnLabel); diff --git a/packages/nimble-components/src/table/components/cell/template.ts b/packages/nimble-components/src/table/components/cell/template.ts index 2d835667ac..20654d31e9 100644 --- a/packages/nimble-components/src/table/components/cell/template.ts +++ b/packages/nimble-components/src/table/components/cell/template.ts @@ -20,6 +20,7 @@ export const template = html` @toggle="${(x, c) => x.onActionMenuToggle(c.event as CustomEvent)}" @click="${(_, c) => c.event.stopPropagation()}" class="action-menu" + title="${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}" > <${iconThreeDotsLineTag} slot="start"> ${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)} diff --git a/packages/nimble-components/src/table/components/row/index.ts b/packages/nimble-components/src/table/components/row/index.ts index fb90b5e024..5f73d6b29d 100644 --- a/packages/nimble-components/src/table/components/row/index.ts +++ b/packages/nimble-components/src/table/components/row/index.ts @@ -67,6 +67,9 @@ export class TableRow< @attr({ attribute: 'menu-open', mode: 'boolean' }) public menuOpen = false; + @attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' }) + public rowOperationGridCellHidden = false; + /** @internal */ @observable public readonly selectionCheckbox?: Checkbox; diff --git a/packages/nimble-components/src/table/components/row/styles.ts b/packages/nimble-components/src/table/components/row/styles.ts index ba93fd3ac5..988b0bf1ca 100644 --- a/packages/nimble-components/src/table/components/row/styles.ts +++ b/packages/nimble-components/src/table/components/row/styles.ts @@ -49,7 +49,7 @@ export const styles = css` background-color: ${fillHoverSelectedColor}; } - .checkbox-container { + .row-operations-container { display: flex; } diff --git a/packages/nimble-components/src/table/components/row/template.ts b/packages/nimble-components/src/table/components/row/template.ts index 9d2f1978f0..79267404b0 100644 --- a/packages/nimble-components/src/table/components/row/template.ts +++ b/packages/nimble-components/src/table/components/row/template.ts @@ -8,17 +8,19 @@ import { tableRowSelectLabel } from '../../../label-provider/table/label-tokens' // prettier-ignore export const template = html` diff --git a/packages/nimble-components/src/table/index.ts b/packages/nimble-components/src/table/index.ts index dd01981875..436a194d2d 100644 --- a/packages/nimble-components/src/table/index.ts +++ b/packages/nimble-components/src/table/index.ts @@ -136,6 +136,9 @@ export class Table< return this.tableValidator.getValidity(); } + /** + * @internal + */ public get showRowOperationColumn(): boolean { return ( this.selectionMode === TableRowSelectionMode.multiple diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts index a96686305e..6ec5917704 100644 --- a/packages/nimble-components/src/table/template.ts +++ b/packages/nimble-components/src/table/template.ts @@ -51,7 +51,7 @@ export const template = html
`
- ${when(x => x.showRowOperationColumn, html
` + ${when(x => x.showRowOperationColumn, html
` ${x => tableRowOperationColumnLabel.getValueFor(x)} diff --git a/specs/labels-and-localization/README.md b/specs/labels-and-localization/README.md index f493c264df..835ce72465 100644 --- a/specs/labels-and-localization/README.md +++ b/specs/labels-and-localization/README.md @@ -85,7 +85,7 @@ The current set of known labels for Nimble is shown below: | table-groups-collapse-all | Collapse all groups | | table-cell-action-menu-label | Options | | table-column-header-menu | Column options | -| table-column-header-grouped-indicator | Grouped | +| table-column-header-grouped | Grouped | | table-column-sort-ascending | Sort ascending | | table-column-sort-descending | Sort descending | | table-column-group-by | Group by | From b69342b35379679208bf1586c6602b7df9c15ce8 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 20 Sep 2023 09:15:05 -0500 Subject: [PATCH 08/10] Change files --- ...imble-angular-d5ffc740-d2a1-4309-88e4-af868e313699.json | 7 +++++++ ...nimble-blazor-8543aed8-ca0b-4032-a85b-fba2f38d1433.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@ni-nimble-angular-d5ffc740-d2a1-4309-88e4-af868e313699.json create mode 100644 change/@ni-nimble-blazor-8543aed8-ca0b-4032-a85b-fba2f38d1433.json diff --git a/change/@ni-nimble-angular-d5ffc740-d2a1-4309-88e4-af868e313699.json b/change/@ni-nimble-angular-d5ffc740-d2a1-4309-88e4-af868e313699.json new file mode 100644 index 0000000000..6f9fb4de2b --- /dev/null +++ b/change/@ni-nimble-angular-d5ffc740-d2a1-4309-88e4-af868e313699.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Rename `columnHeaderGroupedIndicator` table label to `columnHeaderGrouped`", + "packageName": "@ni/nimble-angular", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-blazor-8543aed8-ca0b-4032-a85b-fba2f38d1433.json b/change/@ni-nimble-blazor-8543aed8-ca0b-4032-a85b-fba2f38d1433.json new file mode 100644 index 0000000000..eafdeb0853 --- /dev/null +++ b/change/@ni-nimble-blazor-8543aed8-ca0b-4032-a85b-fba2f38d1433.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Rename `ColumnHeaderGroupedIndicator` tabel label to `ColumnHeaderGroupedIndicator`", + "packageName": "@ni/nimble-blazor", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} From 7cb36adfeae93441b64a5f2f984698ea849e0815 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 20 Sep 2023 09:20:24 -0500 Subject: [PATCH 09/10] format --- .../src/label-provider/table/index.ts | 6 ++---- .../src/label-provider/table/label-tokens.ts | 16 +++++++--------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts index 7c4fbad890..9ed7aed490 100644 --- a/packages/nimble-components/src/label-provider/table/index.ts +++ b/packages/nimble-components/src/label-provider/table/index.ts @@ -27,10 +27,8 @@ const supportedLabels = { groupsCollapseAll: tableGroupsCollapseAllLabel, cellActionMenu: tableCellActionMenuLabel, columnHeaderGrouped: tableColumnHeaderGroupedLabel, - columnHeaderSortedAscending: - tableColumnHeaderSortedAscendingLabel, - columnHeaderSortedDescending: - tableColumnHeaderSortedDescendingLabel, + columnHeaderSortedAscending: tableColumnHeaderSortedAscendingLabel, + columnHeaderSortedDescending: tableColumnHeaderSortedDescendingLabel, selectAll: tableSelectAllLabel, groupSelectAll: tableGroupSelectAllLabel, rowSelect: tableRowSelectLabel, diff --git a/packages/nimble-components/src/label-provider/table/label-tokens.ts b/packages/nimble-components/src/label-provider/table/label-tokens.ts index 96f9e2e733..cead987f11 100644 --- a/packages/nimble-components/src/label-provider/table/label-tokens.ts +++ b/packages/nimble-components/src/label-provider/table/label-tokens.ts @@ -26,19 +26,17 @@ export const tableColumnHeaderGroupedLabel = DesignToken.create({ cssCustomPropertyName: null }).withDefault(tableLabelDefaults.tableColumnHeaderGroupedLabel); -export const tableColumnHeaderSortedAscendingLabel = DesignToken.create({ - name: 'table-column-header-sorted-ascending-label', - cssCustomPropertyName: null -}).withDefault( - tableLabelDefaults.tableColumnHeaderSortedAscendingLabel -); +export const tableColumnHeaderSortedAscendingLabel = DesignToken.create( + { + name: 'table-column-header-sorted-ascending-label', + cssCustomPropertyName: null + } +).withDefault(tableLabelDefaults.tableColumnHeaderSortedAscendingLabel); export const tableColumnHeaderSortedDescendingLabel = DesignToken.create({ name: 'table-column-header-sorted-descending-label', cssCustomPropertyName: null -}).withDefault( - tableLabelDefaults.tableColumnHeaderSortedDescendingLabel -); +}).withDefault(tableLabelDefaults.tableColumnHeaderSortedDescendingLabel); export const tableSelectAllLabel = DesignToken.create({ name: 'table-select-all-label', From a4d3b595006b1a6d0e4de41057890912dc377116 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 20 Sep 2023 09:48:34 -0500 Subject: [PATCH 10/10] Fix build --- packages/nimble-components/src/table/tests/table-labels.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/table/tests/table-labels.spec.ts b/packages/nimble-components/src/table/tests/table-labels.spec.ts index 89d0d3cd44..b871816205 100644 --- a/packages/nimble-components/src/table/tests/table-labels.spec.ts +++ b/packages/nimble-components/src/table/tests/table-labels.spec.ts @@ -75,7 +75,7 @@ describe('Table with LabelProviderTable', () => { labelProvider.groupsCollapseAll = 'Customized Collapse All'; labelProvider.groupExpand = 'Customized Expand'; labelProvider.groupCollapse = 'Customized Collapse'; - labelProvider.columnHeaderGroupedIndicator = 'Customized Grouped'; + labelProvider.columnHeaderGrouped = 'Customized Grouped'; column1.groupIndex = 0; await waitForUpdatesAsync();