fix: Use consistent close modal label across components (#3527)

avinashbot · web-flow · commit 894b79b98072 · 2025-05-21T13:50:20.000Z
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5844,6 +5844,11 @@ The object should contain, among others:
             "optional": true,
             "type": "string",
           },
+          {
+            "name": "preferencesModalCloseAriaLabel",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "preferencesModalConfirm",
             "optional": true,
@@ -6295,6 +6300,13 @@ The values for all configured preferences are present even if the user didn't ch
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "Adds an aria-label to the close button, for accessibility.",
+      "i18nTag": true,
+      "name": "closeAriaLabel",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Label of the confirm button in the modal footer.",
       "i18nTag": true,
@@ -16950,6 +16962,11 @@ exports[`Documenter definition for split-panel matches the snapshot: split-panel
             "optional": true,
             "type": "string",
           },
+          {
+            "name": "preferencesCloseAriaLabel",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "preferencesConfirm",
             "optional": true,
diff --git a/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap b/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap
@@ -309,6 +309,7 @@ Map {
       "closeButtonAriaLabel": undefined,
       "openButtonAriaLabel": undefined,
       "preferencesCancel": undefined,
+      "preferencesCloseAriaLabel": undefined,
       "preferencesConfirm": undefined,
       "preferencesPositionBottom": undefined,
       "preferencesPositionDescription": undefined,
@@ -1075,6 +1076,7 @@ Map {
       "closeButtonAriaLabel": undefined,
       "openButtonAriaLabel": undefined,
       "preferencesCancel": undefined,
+      "preferencesCloseAriaLabel": undefined,
       "preferencesConfirm": undefined,
       "preferencesPositionBottom": undefined,
       "preferencesPositionDescription": undefined,
diff --git a/src/code-editor/__tests__/code-editor.test.tsx b/src/code-editor/__tests__/code-editor.test.tsx
@@ -675,6 +675,9 @@ describe('Code editor component', () => {
             'i18nStrings.preferencesModalThemeFilteringAriaLabel': 'Custom theme filter',
             'i18nStrings.preferencesModalThemeFilteringPlaceholder': 'Custom theme filter placeholder',
           },
+          modal: {
+            closeAriaLabel: 'Custom modal close',
+          },
         }}
       >
         <CodeEditor {...defaultProps} themes={{ light: ['One'], dark: ['Two'] }} i18nStrings={undefined} />
@@ -683,6 +686,7 @@ describe('Code editor component', () => {
     const wrapper = createWrapper(container).findCodeEditor()!;
     wrapper.findSettingsButton()!.click();
     const modal = createWrapper().findModal()!;
+    expect(modal.findDismissButton().getElement()).toHaveAccessibleName('Custom modal close');
     expect(modal.findHeader().getElement()).toHaveTextContent('Custom modal header');
     expect(modal.findFooter()!.findSpaceBetween()!.find(':nth-child(1)')!.findButton()!.getElement()).toHaveTextContent(
       'Custom cancel'
diff --git a/src/code-editor/__tests__/common.ts b/src/code-editor/__tests__/common.ts
@@ -19,6 +19,7 @@ export const i18nStrings: CodeEditorProps.I18nStrings = {
 
   preferencesModalHeader: 'Preferences',
   preferencesModalCancel: 'Cancel',
+  preferencesModalCloseAriaLabel: 'Close',
   preferencesModalConfirm: 'Confirm',
   preferencesModalWrapLines: 'Wrap lines',
   preferencesModalTheme: 'Theme',
diff --git a/src/code-editor/__tests__/preferences-modal.test.tsx b/src/code-editor/__tests__/preferences-modal.test.tsx
@@ -23,14 +23,28 @@ afterEach(() => {
 });
 
 test('should not render modal when preferences are not displayed', () => {
-  const { wrapper } = renderCodeEditor({});
+  const { wrapper } = renderCodeEditor();
   expect(createWrapper().findModal()).toBeFalsy();
   wrapper.findSettingsButton()!.click();
   expect(createWrapper().findModal()).toBeTruthy();
   cancelPreferences();
   expect(createWrapper().findModal()).toBeFalsy();
 });
 
+test('should use preferencesModalCloseAriaLabel when provided', () => {
+  const { wrapper } = renderCodeEditor({
+    i18nStrings: { preferencesModalCloseAriaLabel: 'Close', preferencesModalCancel: 'Cancel' },
+  });
+  wrapper.findSettingsButton()!.click();
+  expect(createWrapper().findModal()!.findDismissButton()!.getElement()).toHaveAccessibleName('Close');
+});
+
+test("should use preferencesModalCancel when preferencesModalCloseAriaLabel isn't provided", () => {
+  const { wrapper } = renderCodeEditor({ i18nStrings: { ...i18nStrings, preferencesModalCloseAriaLabel: undefined } });
+  wrapper.findSettingsButton()!.click();
+  expect(createWrapper().findModal()!.findDismissButton()!.getElement()).toHaveAccessibleName('Cancel');
+});
+
 test('should change wrap lines preference via modal', () => {
   const onPreferencesChange = jest.fn();
   const { wrapper } = renderCodeEditor({ onPreferencesChange: event => onPreferencesChange(event.detail) });
diff --git a/src/code-editor/index.tsx b/src/code-editor/index.tsx
@@ -72,6 +72,7 @@ const CodeEditor = forwardRef((props: CodeEditorProps, ref: React.Ref<CodeEditor
   const isRefresh = useVisualRefresh();
   const baseProps = getBaseProps(rest);
   const i18n = useInternalI18n('code-editor');
+  const i18nModal = useInternalI18n('modal');
 
   const errorsTabRef = useRef<HTMLButtonElement>(null);
   const warningsTabRef = useRef<HTMLButtonElement>(null);
@@ -291,6 +292,9 @@ const CodeEditor = forwardRef((props: CodeEditorProps, ref: React.Ref<CodeEditor
                 header: i18n('i18nStrings.preferencesModalHeader', i18nStrings?.preferencesModalHeader),
                 cancel: i18n('i18nStrings.preferencesModalCancel', i18nStrings?.preferencesModalCancel),
                 confirm: i18n('i18nStrings.preferencesModalConfirm', i18nStrings?.preferencesModalConfirm),
+                close:
+                  i18nModal('closeAriaLabel', i18nStrings?.preferencesModalCloseAriaLabel) ||
+                  i18nStrings?.preferencesModalCancel,
                 wrapLines: i18n('i18nStrings.preferencesModalWrapLines', i18nStrings?.preferencesModalWrapLines),
                 theme: i18n('i18nStrings.preferencesModalTheme', i18nStrings?.preferencesModalTheme),
                 lightThemes: i18n('i18nStrings.preferencesModalLightThemes', i18nStrings?.preferencesModalLightThemes),
diff --git a/src/code-editor/interfaces.ts b/src/code-editor/interfaces.ts
@@ -159,6 +159,7 @@ export namespace CodeEditorProps {
     preferencesModalHeader?: string;
     preferencesModalCancel?: string;
     preferencesModalConfirm?: string;
+    preferencesModalCloseAriaLabel?: string;
     preferencesModalWrapLines?: string;
     preferencesModalTheme?: string;
     preferencesModalLightThemes?: string;
diff --git a/src/code-editor/preferences-modal.tsx b/src/code-editor/preferences-modal.tsx
@@ -19,6 +19,7 @@ interface PreferencesModali18nStrings {
   header?: string;
   cancel?: string;
   confirm?: string;
+  close?: string;
   wrapLines?: string;
   theme?: string;
   lightThemes?: string;
@@ -76,7 +77,7 @@ export default (props: PreferencesModalProps) => {
       removeModalRoot={props.removeModalRoot}
       onDismiss={props.onDismiss}
       header={props.i18nStrings.header}
-      closeAriaLabel={props.i18nStrings.cancel}
+      closeAriaLabel={props.i18nStrings.close}
       footer={
         <InternalBox float="right">
           <InternalSpaceBetween direction="horizontal" size="xs">
diff --git a/src/collection-preferences/__tests__/collection-preferences.test.tsx b/src/collection-preferences/__tests__/collection-preferences.test.tsx
@@ -223,6 +223,20 @@ describe('i18n', () => {
     expect(footerItems.find(':nth-child(2)')!.findButton()!.getElement()).toHaveTextContent('Custom confirm');
   });
 
+  test('correctly provides closeAriaLabel to the dismiss button', () => {
+    const { container } = render(<CollectionPreferences closeAriaLabel="Close" />);
+    const wrapper = createWrapper(container).findCollectionPreferences()!;
+    wrapper.findTriggerButton().click();
+    expect(wrapper.findModal()!.findDismissButton()!.getElement()).toHaveAccessibleName('Close');
+  });
+
+  test("uses cancelLabel if closeAriaLabel isn't provided", () => {
+    const { container } = render(<CollectionPreferences cancelLabel="Cancel" />);
+    const wrapper = createWrapper(container).findCollectionPreferences()!;
+    wrapper.findTriggerButton().click();
+    expect(wrapper.findModal()!.findDismissButton()!.getElement()).toHaveAccessibleName('Cancel');
+  });
+
   test('supports using preference labels and descriptions from i18n provider', () => {
     const { container } = render(
       <TestI18nProvider
@@ -244,6 +258,9 @@ describe('i18n', () => {
             'contentDisplayPreference.liveAnnouncementDndItemCommitted':
               '{isInitialPosition, select, true {Item moved back to its original position {initialPosition} of {total}} false {Item moved from position {initialPosition} to position {finalPosition} of {total}} other {}}',
           },
+          modal: {
+            closeAriaLabel: 'Custom modal close',
+          },
         }}
       >
         <CollectionPreferences
@@ -269,6 +286,7 @@ describe('i18n', () => {
     const wrapper = createWrapper(container).findCollectionPreferences()!;
     wrapper.findTriggerButton().click();
     const modal = wrapper.findModal()!;
+    expect(modal.findDismissButton().getElement()).toHaveAccessibleName('Custom modal close');
     expect(modal.findPageSizePreference()!.findTitle().getElement()).toHaveTextContent('Custom page size');
     expect(modal.findWrapLinesPreference()!.findLabel().getElement()).toHaveTextContent('Custom wrap lines');
     expect(modal.findWrapLinesPreference()!.findDescription()!.getElement()).toHaveTextContent(
diff --git a/src/collection-preferences/index.tsx b/src/collection-preferences/index.tsx
@@ -47,6 +47,7 @@ export default function CollectionPreferences({
   title,
   confirmLabel,
   cancelLabel,
+  closeAriaLabel,
   disabled = false,
   onConfirm,
   onCancel,
@@ -206,7 +207,7 @@ export default function CollectionPreferences({
                 </InternalSpaceBetween>
               </InternalBox>
             }
-            closeAriaLabel={cancelLabel}
+            closeAriaLabel={closeAriaLabel || cancelLabel}
             size={hasContentOnTheLeft && hasContentOnTheRight ? 'large' : 'medium'}
             onDismiss={onCancelListener}
           >
diff --git a/src/collection-preferences/interfaces.ts b/src/collection-preferences/interfaces.ts
@@ -20,6 +20,11 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
    * @i18n
    */
   cancelLabel?: string;
+  /**
+   * Adds an aria-label to the close button, for accessibility.
+   * @i18n
+   */
+  closeAriaLabel?: string;
   /**
    * Determines whether the preferences trigger button is disabled.
    */
diff --git a/src/split-panel/__tests__/split-panel.test.tsx b/src/split-panel/__tests__/split-panel.test.tsx
@@ -53,13 +53,15 @@ function renderSplitPanel({
   props,
   contextProps,
   messages = {},
+  modalMessages = {},
 }: {
   props?: Partial<SplitPanelProps>;
   contextProps?: Partial<SplitPanelContextProps>;
   messages?: Record<string, string>;
+  modalMessages?: Record<string, string>;
 } = {}) {
   const { container } = render(
-    <TestI18nProvider messages={{ 'split-panel': messages }}>
+    <TestI18nProvider messages={{ 'split-panel': messages, modal: modalMessages }}>
       <SplitPanelContextProvider value={{ ...defaultSplitPanelContextProps, ...contextProps }}>
         <SplitPanel {...defaultProps} {...props} />
       </SplitPanelContextProvider>
@@ -219,6 +221,15 @@ describe('Split panel', () => {
           expect(modalWrapper).not.toBeNull();
         });
 
+        test('applies preferencesCloseAriaLabel to the modal close button', () => {
+          const { wrapper } = renderSplitPanel({
+            props: { closeBehavior, i18nStrings: { preferencesCloseAriaLabel: 'Close' } },
+          });
+          wrapper!.findPreferencesButton()!.click();
+          const modalWrapper = createWrapper().findModal()!;
+          expect(modalWrapper.findDismissButton().getElement()).toHaveAccessibleName('Close');
+        });
+
         test('cancels modal', () => {
           const { wrapper } = renderSplitPanel({ props: { closeBehavior } });
           wrapper!.findPreferencesButton()!.click();
@@ -274,6 +285,15 @@ describe('Split panel', () => {
       });
 
       describe('i18n', () => {
+        test("should use preferencesCancel when preferencesCloseAriaLabel isn't provided", () => {
+          const { wrapper } = renderSplitPanel({
+            props: { i18nStrings: { preferencesCancel: 'Custom cancel' }, closeBehavior },
+            contextProps: { position: 'bottom', isOpen: true },
+          });
+          wrapper!.findPreferencesButton()!.click();
+          expect(createWrapper().findModal()!.findDismissButton().getElement()).toHaveAccessibleName('Custom cancel');
+        });
+
         testIf(closeBehavior === 'collapse')(
           'supports using i18nStrings.openButtonAriaLabel from i18n provider',
           () => {
@@ -315,9 +335,13 @@ describe('Split panel', () => {
               'i18nStrings.preferencesConfirm': 'Custom confirm',
               'i18nStrings.preferencesCancel': 'Custom cancel',
             },
+            modalMessages: {
+              closeAriaLabel: 'Custom modal close',
+            },
           });
           wrapper!.findPreferencesButton()!.click();
           const modalWrapper = createWrapper().findModal()!;
+          expect(modalWrapper.findDismissButton().getElement()).toHaveAccessibleName('Custom modal close');
           expect(modalWrapper.findHeader().getElement()).toHaveTextContent('Custom title');
           expect(modalWrapper.findContent().findFormField()!.findLabel()!.getElement()).toHaveTextContent(
             'Custom position'
diff --git a/src/split-panel/implementation.tsx b/src/split-panel/implementation.tsx
@@ -244,6 +244,7 @@ export function SplitPanelImplementation({
             header: i18nStrings.preferencesTitle,
             confirm: i18nStrings.preferencesConfirm,
             cancel: i18nStrings.preferencesCancel,
+            close: i18nStrings.preferencesCloseAriaLabel,
             positionLabel: i18nStrings.preferencesPositionLabel,
             positionDescription: i18nStrings.preferencesPositionDescription,
             positionBottom: i18nStrings.preferencesPositionBottom,
diff --git a/src/split-panel/index.tsx b/src/split-panel/index.tsx
@@ -20,6 +20,8 @@ export default function SplitPanel({
     props: { closeBehavior, hidePreferencesButton },
   });
   const i18n = useInternalI18n('split-panel');
+  const i18nModal = useInternalI18n('modal');
+
   return (
     <SplitPanelInternal
       {...restProps}
@@ -35,6 +37,8 @@ export default function SplitPanel({
         preferencesTitle: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),
         preferencesConfirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),
         preferencesCancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),
+        preferencesCloseAriaLabel:
+          i18nModal('closeAriaLabel', i18nStrings?.preferencesCloseAriaLabel) || i18nStrings?.preferencesCancel,
         preferencesPositionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),
         preferencesPositionDescription: i18n(
           'i18nStrings.preferencesPositionDescription',
diff --git a/src/split-panel/interfaces.ts b/src/split-panel/interfaces.ts
@@ -46,6 +46,7 @@ export namespace SplitPanelProps {
     preferencesPositionBottom?: string;
     preferencesConfirm?: string;
     preferencesCancel?: string;
+    preferencesCloseAriaLabel?: string;
     resizeHandleAriaLabel?: string;
     resizeHandleTooltipText?: string;
   }
diff --git a/src/split-panel/preferences-modal.tsx b/src/split-panel/preferences-modal.tsx
@@ -17,6 +17,7 @@ import sidePositionIconRefresh from './icons/side-position-refresh';
 interface PreferencesModali18nStrings {
   header?: string;
   cancel?: string;
+  close?: string;
   confirm?: string;
   positionLabel?: string;
   positionDescription?: string;
@@ -56,7 +57,7 @@ export default (props: PreferencesModalProps) => {
       visible={props.visible}
       onDismiss={props.onDismiss}
       header={props.i18nStrings.header}
-      closeAriaLabel={props.i18nStrings.cancel!}
+      closeAriaLabel={props.i18nStrings.close}
       footer={
         <InternalBox float="right">
           <InternalSpaceBetween direction="horizontal" size="xs">
