Add localized labels to remaining table sub-elements

angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table-with-defaults.directive.ts

@@ -16,6 +16,6 @@ export class NimbleLabelProviderTableWithDefaultsDirective {
         this.elementRef.nativeElement.groupExpand = $localize`:Nimble table - expand group|:Expand group`;
         this.elementRef.nativeElement.groupsCollapseAll = $localize`:Nimble table - collapse all groups|:Collapse all groups`;
         this.elementRef.nativeElement.cellActionMenu = $localize`:Nimble table - cell action menu|:Options`;
-        this.elementRef.nativeElement.columnHeaderGroupedIndicator = $localize`:Nimble table - column header grouped indicator|:Grouped`;
+        this.elementRef.nativeElement.columnHeaderGrouped = $localize`:Nimble table - column header grouped indicator|:Grouped`;
     }
 }

angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table.directive.ts

@@ -54,13 +54,13 @@ export class NimbleLabelProviderTableDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'cellActionMenu', value);
     }
 
-    public get columnHeaderGroupedIndicator(): string | undefined {
-        return this.elementRef.nativeElement.columnHeaderGroupedIndicator;
+    public get columnHeaderGrouped(): string | undefined {
+        return this.elementRef.nativeElement.columnHeaderGrouped;
     }
 
     // Renaming because property should have camel casing, but attribute should not
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    @Input('column-header-grouped-indicator') public set columnHeaderGroupedIndicator(value: string | undefined) {
-        this.renderer.setProperty(this.elementRef.nativeElement, 'columnHeaderGroupedIndicator', value);
+    @Input('column-header-grouped') public set columnHeaderGrouped(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'columnHeaderGrouped', value);
     }
 }

angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table-with-defaults.directive.spec.ts

@@ -45,6 +45,6 @@ describe('Nimble LabelProviderTable withDefaults directive', () => {
         expect(labelProvider.groupExpand).toBe('Translated expand group');
         expect(labelProvider.groupsCollapseAll).toBe('Translated collapse all groups');
         expect(labelProvider.cellActionMenu).toBe('Translated options');
-        expect(labelProvider.columnHeaderGroupedIndicator).toBe('Translated grouped');
+        expect(labelProvider.columnHeaderGrouped).toBe('Translated grouped');
     });
 });

angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table.directive.spec.ts

@@ -51,9 +51,9 @@ describe('Nimble Label Provider Table', () => {
             expect(nativeElement.cellActionMenu).toBeUndefined();
         });
 
-        it('has expected defaults for columnHeaderGroupedIndicator', () => {
-            expect(directive.columnHeaderGroupedIndicator).toBeUndefined();
-            expect(nativeElement.columnHeaderGroupedIndicator).toBeUndefined();
+        it('has expected defaults for columnHeaderGrouped', () => {
+            expect(directive.columnHeaderGrouped).toBeUndefined();
+            expect(nativeElement.columnHeaderGrouped).toBeUndefined();
         });
 
         it('has expected defaults for groupCollapse', () => {
@@ -77,7 +77,7 @@ describe('Nimble Label Provider Table', () => {
             template: `
                 <nimble-label-provider-table #labelProvider
                     cell-action-menu="${label1}"
-                    column-header-grouped-indicator="${label2}"
+                    column-header-grouped="${label2}"
                     group-collapse="${label3}"
                     group-expand="${label4}"
                     groups-collapse-all="${label5}"
@@ -110,9 +110,9 @@ describe('Nimble Label Provider Table', () => {
             expect(nativeElement.cellActionMenu).toBe(label1);
         });
 
-        it('will use template string values for columnHeaderGroupedIndicator', () => {
-            expect(directive.columnHeaderGroupedIndicator).toBe(label2);
-            expect(nativeElement.columnHeaderGroupedIndicator).toBe(label2);
+        it('will use template string values for columnHeaderGrouped', () => {
+            expect(directive.columnHeaderGrouped).toBe(label2);
+            expect(nativeElement.columnHeaderGrouped).toBe(label2);
         });
 
         it('will use template string values for groupCollapse', () => {
@@ -136,7 +136,7 @@ describe('Nimble Label Provider Table', () => {
             template: `
                 <nimble-label-provider-table #labelProvider
                     [cellActionMenu]="cellActionMenu"
-                    [columnHeaderGroupedIndicator]="columnHeaderGroupedIndicator"
+                    [columnHeaderGrouped]="columnHeaderGrouped"
                     [groupCollapse]="groupCollapse"
                     [groupExpand]="groupExpand"
                     [groupsCollapseAll]="groupsCollapseAll"
@@ -148,7 +148,7 @@ describe('Nimble Label Provider Table', () => {
             @ViewChild('labelProvider', { read: NimbleLabelProviderTableDirective }) public directive: NimbleLabelProviderTableDirective;
             @ViewChild('labelProvider', { read: ElementRef }) public elementRef: ElementRef<LabelProviderTable>;
             public cellActionMenu = label1;
-            public columnHeaderGroupedIndicator = label1;
+            public columnHeaderGrouped = label1;
             public groupCollapse = label1;
             public groupExpand = label1;
             public groupsCollapseAll = label1;
@@ -180,15 +180,15 @@ describe('Nimble Label Provider Table', () => {
             expect(nativeElement.cellActionMenu).toBe(label2);
         });
 
-        it('can be configured with property binding for columnHeaderGroupedIndicator', () => {
-            expect(directive.columnHeaderGroupedIndicator).toBe(label1);
-            expect(nativeElement.columnHeaderGroupedIndicator).toBe(label1);
+        it('can be configured with property binding for columnHeaderGrouped', () => {
+            expect(directive.columnHeaderGrouped).toBe(label1);
+            expect(nativeElement.columnHeaderGrouped).toBe(label1);
 
-            fixture.componentInstance.columnHeaderGroupedIndicator = label2;
+            fixture.componentInstance.columnHeaderGrouped = label2;
             fixture.detectChanges();
 
-            expect(directive.columnHeaderGroupedIndicator).toBe(label2);
-            expect(nativeElement.columnHeaderGroupedIndicator).toBe(label2);
+            expect(directive.columnHeaderGrouped).toBe(label2);
+            expect(nativeElement.columnHeaderGrouped).toBe(label2);
         });
 
         it('can be configured with property binding for groupCollapse', () => {
@@ -230,7 +230,7 @@ describe('Nimble Label Provider Table', () => {
             template: `
                 <nimble-label-provider-table #labelProvider
                     [attr.cell-action-menu]="cellActionMenu"
-                    [attr.column-header-grouped-indicator]="columnHeaderGroupedIndicator"
+                    [attr.column-header-grouped]="columnHeaderGrouped"
                     [attr.group-collapse]="groupCollapse"
                     [attr.group-expand]="groupExpand"
                     [attr.groups-collapse-all]="groupsCollapseAll"
@@ -242,7 +242,7 @@ describe('Nimble Label Provider Table', () => {
             @ViewChild('labelProvider', { read: NimbleLabelProviderTableDirective }) public directive: NimbleLabelProviderTableDirective;
             @ViewChild('labelProvider', { read: ElementRef }) public elementRef: ElementRef<LabelProviderTable>;
             public cellActionMenu = label1;
-            public columnHeaderGroupedIndicator = label1;
+            public columnHeaderGrouped = label1;
             public groupCollapse = label1;
             public groupExpand = label1;
             public groupsCollapseAll = label1;
@@ -274,15 +274,15 @@ describe('Nimble Label Provider Table', () => {
             expect(nativeElement.cellActionMenu).toBe(label2);
         });
 
-        it('can be configured with attribute binding for columnHeaderGroupedIndicator', () => {
-            expect(directive.columnHeaderGroupedIndicator).toBe(label1);
-            expect(nativeElement.columnHeaderGroupedIndicator).toBe(label1);
+        it('can be configured with attribute binding for columnHeaderGrouped', () => {
+            expect(directive.columnHeaderGrouped).toBe(label1);
+            expect(nativeElement.columnHeaderGrouped).toBe(label1);
 
-            fixture.componentInstance.columnHeaderGroupedIndicator = label2;
+            fixture.componentInstance.columnHeaderGrouped = label2;
             fixture.detectChanges();
 
-            expect(directive.columnHeaderGroupedIndicator).toBe(label2);
-            expect(nativeElement.columnHeaderGroupedIndicator).toBe(label2);
+            expect(directive.columnHeaderGrouped).toBe(label2);
+            expect(nativeElement.columnHeaderGrouped).toBe(label2);
         });
 
         it('can be configured with attribute binding for groupCollapse', () => {

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"
+}

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"
+}

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"
+}

packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor

@@ -4,6 +4,6 @@
     group-expand="@GroupExpand"
     groups-collapse-all="@GroupsCollapseAll"
     cell-action-menu="@CellActionMenu"
-    column-header-grouped-indicator="@ColumnHeaderGroupedIndicator"
+    column-header-grouped="@ColumnHeaderGrouped"
     @attributes="AdditionalAttributes">
 </nimble-label-provider-table>

packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor.cs

@@ -20,7 +20,7 @@ public partial class NimbleLabelProviderTable : ComponentBase
     public string? CellActionMenu { get; set; }
 
     [Parameter]
-    public string? ColumnHeaderGroupedIndicator { get; set; }
+    public string? ColumnHeaderGrouped { get; set; }
 
     /// <summary>
     /// Gets or sets a collection of additional attributes that will be applied to the created element.

packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderTableTests.cs

@@ -34,7 +34,7 @@ public void NimbleLabelProviderTable_SupportsAdditionalAttributes()
     [InlineData(nameof(NimbleLabelProviderTable.GroupExpand))]
     [InlineData(nameof(NimbleLabelProviderTable.GroupsCollapseAll))]
     [InlineData(nameof(NimbleLabelProviderTable.CellActionMenu))]
-    [InlineData(nameof(NimbleLabelProviderTable.ColumnHeaderGroupedIndicator))]
+    [InlineData(nameof(NimbleLabelProviderTable.ColumnHeaderGrouped))]
     public void NimbleLabelProviderTable_LabelIsSet(string propertyName)
     {
         var labelValue = propertyName + "UpdatedValue";

packages/nimble-components/src/label-provider/table/index.ts

@@ -3,10 +3,16 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { DesignTokensFor, LabelProviderBase } from '../base';
 import {
     tableCellActionMenuLabel,
-    tableColumnHeaderGroupedIndicatorLabel,
+    tableColumnHeaderGroupedLabel,
+    tableColumnHeaderSortedAscendingLabel,
+    tableColumnHeaderSortedDescendingLabel,
     tableGroupCollapseLabel,
     tableGroupExpandLabel,
-    tableGroupsCollapseAllLabel
+    tableGroupSelectAllLabel,
+    tableGroupsCollapseAllLabel,
+    tableRowOperationColumnLabel,
+    tableRowSelectLabel,
+    tableSelectAllLabel
 } from './label-tokens';
 
 declare global {
@@ -20,7 +26,13 @@ const supportedLabels = {
     groupExpand: tableGroupExpandLabel,
     groupsCollapseAll: tableGroupsCollapseAllLabel,
     cellActionMenu: tableCellActionMenuLabel,
-    columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
+    columnHeaderGrouped: tableColumnHeaderGroupedLabel,
+    columnHeaderSortedAscending: tableColumnHeaderSortedAscendingLabel,
+    columnHeaderSortedDescending: tableColumnHeaderSortedDescendingLabel,
+    selectAll: tableSelectAllLabel,
+    groupSelectAll: tableGroupSelectAllLabel,
+    rowSelect: tableRowSelectLabel,
+    rowOperationColumn: tableRowOperationColumnLabel
 } as const;
 
 /**
@@ -41,8 +53,26 @@ export class LabelProviderTable
     @attr({ attribute: 'cell-action-menu' })
     public cellActionMenu: string | undefined;
 
-    @attr({ attribute: 'column-header-grouped-indicator' })
-    public columnHeaderGroupedIndicator: string | undefined;
+    @attr({ attribute: 'column-header-grouped' })
+    public columnHeaderGrouped: string | undefined;
+
+    @attr({ attribute: 'column-header-sorted-ascending' })
+    public columnHeaderSortedAscending: string | undefined;
+
+    @attr({ attribute: 'column-header-sorted-descending' })
+    public columnHeaderSortedDescending: 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;
+
+    @attr({ attribute: 'row-operation-column' })
+    public rowOperationColumn: string | undefined;
 
     protected override readonly supportedLabels = supportedLabels;
 }

packages/nimble-components/src/label-provider/table/label-token-defaults.ts

@@ -7,5 +7,11 @@ export const tableLabelDefaults: { readonly [key in TokenName]: string } = {
     tableGroupExpandLabel: 'Expand group',
     tableGroupsCollapseAllLabel: 'Collapse all groups',
     tableCellActionMenuLabel: 'Options',
-    tableColumnHeaderGroupedIndicatorLabel: 'Grouped'
+    tableColumnHeaderGroupedLabel: 'Grouped',
+    tableColumnHeaderSortedAscendingLabel: 'Sorted ascending',
+    tableColumnHeaderSortedDescendingLabel: 'Sorted descending',
+    tableSelectAllLabel: 'Select all rows',
+    tableGroupSelectAllLabel: 'Select all rows in group',
+    tableRowSelectLabel: 'Select row',
+    tableRowOperationColumnLabel: 'Row operations'
 };

packages/nimble-components/src/label-provider/table/label-tokens.ts

@@ -21,7 +21,39 @@ export const tableCellActionMenuLabel = DesignToken.create<string>({
     cssCustomPropertyName: null
 }).withDefault(tableLabelDefaults.tableCellActionMenuLabel);
 
-export const tableColumnHeaderGroupedIndicatorLabel = DesignToken.create<string>({
-    name: 'table-column-header-grouped-indicator-label',
+export const tableColumnHeaderGroupedLabel = DesignToken.create<string>({
+    name: 'table-column-header-grouped-label',
     cssCustomPropertyName: null
-}).withDefault(tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel);
+}).withDefault(tableLabelDefaults.tableColumnHeaderGroupedLabel);
+
+export const tableColumnHeaderSortedAscendingLabel = DesignToken.create<string>(
+    {
+        name: 'table-column-header-sorted-ascending-label',
+        cssCustomPropertyName: null
+    }
+).withDefault(tableLabelDefaults.tableColumnHeaderSortedAscendingLabel);
+
+export const tableColumnHeaderSortedDescendingLabel = DesignToken.create<string>({
+    name: 'table-column-header-sorted-descending-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableColumnHeaderSortedDescendingLabel);
+
+export const tableSelectAllLabel = DesignToken.create<string>({
+    name: 'table-select-all-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableSelectAllLabel);
+
+export const tableGroupSelectAllLabel = DesignToken.create<string>({
+    name: 'table-group-select-all-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableGroupSelectAllLabel);
+
+export const tableRowSelectLabel = DesignToken.create<string>({
+    name: 'table-row-select-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableRowSelectLabel);
+
+export const tableRowOperationColumnLabel = DesignToken.create<string>({
+    name: 'table-row-operation-column-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableRowOperationColumnLabel);

packages/nimble-components/src/table/components/cell/template.ts

@@ -20,6 +20,7 @@ export const template = html<TableCell>`
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}"
                 @click="${(_, c) => c.event.stopPropagation()}"
                 class="action-menu"
+                title="${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}"
             >
                 <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
                 ${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}

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<TableGroupRow>`
                     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)}"
                 >
                 </${checkboxTag}>
             </span>
@@ -35,6 +38,7 @@ export const template = html<TableGroupRow>`
                 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}"></${iconArrowExpanderRightTag}>
                 ${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}