Merge pull request highcharts#22248 from highcharts/dash/dg-a11y-api-fix

dash/dg-a11y-api-fix
miqdigital · Nov 29, 2024 · 17ce078 · 17ce078
2 parents 27ee90f + c291a8a
commit 17ce078
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 31 deletions.
diff --git a/ts/DataGrid/Accessibility/A11yOptions.ts b/ts/DataGrid/Accessibility/A11yOptions.ts
@@ -41,6 +41,25 @@ namespace A11yOptions {
          * @default true
          */
         enabled?: boolean;
+
+        /**
+         * VoiceOver announcer options for DataGrid actions.
+         */
+        announcements?: {
+            /**
+             * Enable accessibility announcements for the cell editing.
+             *
+             * @default true
+             */
+            cellEditing?: boolean;
+
+            /**
+             * Enable accessibility announcements for the sorting.
+             *
+             * @default true
+             */
+            sorting?: boolean;
+        }
     }
 
     /**
@@ -74,13 +93,6 @@ namespace A11yOptions {
          */
         announcements?: {
 
-            /**
-             * Enable accessibility announcements for the cell editing.
-             *
-             * @default true
-             */
-            enabled?: boolean;
-
             /**
              * The message when the cell editing started.
              *
@@ -114,13 +126,6 @@ namespace A11yOptions {
          */
         announcements?: {
 
-            /**
-             * Enable accessibility announcements for the sorting.
-             *
-             * @default true
-             */
-            enabled?: boolean;
-
             /**
              * The message when the column was sorted in ascending order.
              *

diff --git a/ts/DataGrid/Accessibility/Accessibility.ts b/ts/DataGrid/Accessibility/Accessibility.ts
@@ -167,24 +167,25 @@ class Accessibility {
      * The order of the sorting.
      */
     public userSortedColumn(order: ColumnSortingOrder): void {
-        const announcements = this.dataGrid.options?.lang
+        const { options } = this.dataGrid;
+        const announcementsLang = options?.lang
             ?.accessibility?.sorting?.announcements;
 
-        if (!announcements?.enabled) {
+        if (!options?.accessibility?.announcements?.sorting) {
             return;
         }
 
         let msg: string | undefined;
 
         switch (order) {
             case 'asc':
-                msg = announcements?.ascending;
+                msg = announcementsLang?.ascending;
                 break;
             case 'desc':
-                msg = announcements?.descending;
+                msg = announcementsLang?.descending;
                 break;
             default:
-                msg = announcements?.none;
+                msg = announcementsLang?.none;
         }
 
         if (!msg) {
@@ -201,14 +202,15 @@ class Accessibility {
      * The type of the edit message.
      */
     public userEditedCell(msgType: Accessibility.EditMsgType): void {
-        const messages = this.dataGrid.options?.lang
+        const { options } = this.dataGrid;
+        const announcementsLang = options?.lang
             ?.accessibility?.cellEditing?.announcements;
 
-        if (!messages?.enabled) {
+        if (!options?.accessibility?.announcements?.cellEditing) {
             return;
         }
 
-        const msg = messages?.[msgType];
+        const msg = announcementsLang?.[msgType];
         if (!msg) {
             return;
         }
@@ -232,6 +234,19 @@ class Accessibility {
         thElement?.setAttribute('aria-sort', state);
     }
 
+    /**
+     * Set the row index attribute for the row element.
+     *
+     * @param el
+     * The row element to set the index to.
+     *
+     * @param idx
+     * The index of the row in the data table.
+     */
+    public setRowIndex(el: HTMLElement, idx: number): void {
+        el.setAttribute('aria-rowindex', idx);
+    }
+
 }
 
 

diff --git a/ts/DataGrid/Defaults.ts b/ts/DataGrid/Defaults.ts
@@ -40,22 +40,24 @@ namespace Defaults {
      */
     export const defaultOptions: Globals.DeepPartial<Options> = {
         accessibility: {
-            enabled: true
+            enabled: true,
+            announcements: {
+                cellEditing: true,
+                sorting: true
+            }
         },
         lang: {
             accessibility: {
                 cellEditing: {
                     editable: 'Editable.',
                     announcements: {
-                        enabled: true,
                         started: 'Entered cell editing mode.',
                         edited: 'Edited cell value.',
                         cancelled: 'Editing canceled.'
                     }
                 },
                 sorting: {
                     announcements: {
-                        enabled: true,
                         ascending: 'Sorted ascending.',
                         descending: 'Sorted descending.',
                         none: 'Not sorted.'

diff --git a/ts/DataGrid/Table/Content/TableRow.ts b/ts/DataGrid/Table/Content/TableRow.ts
@@ -112,6 +112,7 @@ class TableRow extends Row {
     public setRowAttributes(): void {
         const idx = this.index;
         const el = this.htmlElement;
+        const a11y = this.viewport.dataGrid.accessibility;
 
         el.style.transform = `translateY(${this.getDefaultTopOffset()}px)`;
         el.classList.add(Globals.classNames.rowElement);
@@ -125,10 +126,7 @@ class TableRow extends Row {
         }
 
         // Calculate levels of header, 1 to avoid indexing from 0
-        el.setAttribute(
-            'aria-rowindex',
-            idx + (this.viewport.header?.levels ?? 1) + 1
-        );
+        a11y?.setRowIndex(el, idx + (this.viewport.header?.levels ?? 1) + 1);
 
         // Indexing from 0, so rows with even index are odd.
         el.classList.add(Globals.classNames[idx % 2 ? 'rowEven' : 'rowOdd']);

diff --git a/ts/DataGrid/Table/Header/HeaderRow.ts b/ts/DataGrid/Table/Header/HeaderRow.ts
@@ -233,8 +233,8 @@ class HeaderRow extends Row {
      * Sets the row HTML element attributes and additional classes.
      */
     public setRowAttributes(): void {
-        const el = this.htmlElement;
-        el.setAttribute('aria-rowindex', this.level);
+        const a11y = this.viewport.dataGrid.accessibility;
+        a11y?.setRowIndex(this.htmlElement, this.level);
     }
 }