AG-12606 Add altText to close icon

ag-grid · Sep 12, 2024 · d8d150c · d8d150c
1 parent b50551d
commit d8d150c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/packages/ag-charts-community/src/dom/elements.ts b/packages/ag-charts-community/src/dom/elements.ts
@@ -8,13 +8,23 @@ interface MissingAriaAttrs {
     ariaControls?: string;
 }
 
-export interface ButtonOptions {
-    label: string | HTMLElement;
+// These types force a compilation error if the developer tries to add an icon-only
+// menu item without an accessible text alternative.
+type LabelAndIcon = { label: string; icon?: AgIconName; altText?: undefined };
+type IconOnly = { label?: undefined; icon: AgIconName; altText: string };
+export type LabelIcon = LabelAndIcon | IconOnly;
+
+export type ButtonOptions = LabelIcon & {
     onPress: (event: MouseEvent) => void;
-}
+};
 export function createButton(options: ButtonOptions, attrs?: Attrs<HTMLButtonElement>) {
     const button = createElement('button', getClassName('ag-charts-input ag-charts-button', attrs));
-    button.append(options.label);
+    if (options.label !== undefined) {
+        button.append(options.label);
+    } else {
+        button.append(createIcon(options.icon));
+        button.ariaLabel = options.altText;
+    }
     button.addEventListener('click', options.onPress);
     applyAttrs(button, attrs);
     return button;

diff --git a/packages/ag-charts-enterprise/src/components/dialog/dialog.ts b/packages/ag-charts-enterprise/src/components/dialog/dialog.ts
@@ -180,11 +180,13 @@ export abstract class Dialog<Options extends DialogOptions = DialogOptions> exte
         const buttons: HTMLButtonElement[] = [];
 
         for (const button of options) {
-            const altTextT = this.ctx.localeManager.t(button.altText);
+            const { icon, altText: altTextKey } = button;
+            const altText = this.ctx.localeManager.t(altTextKey);
 
             const buttonEl = createButton(
                 {
-                    label: createIcon(button.icon),
+                    icon,
+                    altText,
                     onPress: () => {
                         for (const b of Array.from(group.children)) {
                             b.classList.remove(activeClass);
@@ -199,8 +201,7 @@ export abstract class Dialog<Options extends DialogOptions = DialogOptions> exte
                     className: 'ag-charts-dialog__button',
                     role: 'radio',
                     ariaChecked: button.value === value ? 'true' : 'false',
-                    ariaLabel: altTextT,
-                    title: altTextT,
+                    title: altText,
                 }
             );
 
@@ -308,7 +309,7 @@ export abstract class Dialog<Options extends DialogOptions = DialogOptions> exte
 
     private createHeaderCloseButton() {
         const closeButton = createButton(
-            { label: createIcon('close'), onPress: () => this.hide() },
+            { icon: 'close', altText: this.ctx.localeManager.t('iconAltTextClose'), onPress: () => this.hide() },
             'ag-charts-dialog__close-button'
         );
 

diff --git a/packages/ag-charts-enterprise/src/components/menu/menu.ts b/packages/ag-charts-enterprise/src/components/menu/menu.ts
@@ -1,5 +1,4 @@
 import { _ModuleSupport } from 'ag-charts-community';
-import type { AgIconName } from 'ag-charts-types';
 
 import { AnchoredPopover, type AnchoredPopoverOptions } from '../popover/anchoredPopover';
 
@@ -13,12 +12,7 @@ export interface MenuOptions<Value = any> extends AnchoredPopoverOptions {
     menuItemRole?: 'menuitem' | 'menuitemradio';
 }
 
-// These types force a compilation error if the developer tries to add an icon-only
-// menu item without an accessible text alternative.
-type LabelAndIcon = { label: string; icon?: AgIconName; altText?: undefined };
-type IconOnly = { label?: undefined; icon: AgIconName; altText: string };
-
-export type MenuItem<Value = any> = (LabelAndIcon | IconOnly) & {
+export type MenuItem<Value = any> = _ModuleSupport.LabelIcon & {
     value: Value;
     strokeWidth?: number;
 };

diff --git a/packages/ag-charts-locale/src/en-US.ts b/packages/ag-charts-locale/src/en-US.ts
@@ -67,6 +67,8 @@ export const AG_CHARTS_LOCALE_EN_US: Record<string, string> = {
     iconAltTextAlignCenter: 'Center',
     // Alt-text for the 'position-right' icon
     iconAltTextAlignRight: 'Right',
+    // Alt-text for the 'close' icon
+    iconAltTextClose: 'Close',
     // Default text for the 'loading data' overlay
     overlayLoadingData: 'Loading data...',
     // Default text for the 'no data' overlay