ui-react(fix): Add accessible label to Alert dismiss button (#2303)

* add dismissButtonLabel to types

* add dismissButtonLabel prop

* wrote tests for default and custom cases

* update docs

* Create late-papayas-run.md

* Update late-papayas-run.md

* update alert props table

Co-authored-by: Joe Buono <[email protected]>

Author: joebuono

.changeset/late-papayas-run.md

@@ -0,0 +1,9 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+ui-react(fix): Adds an accessible label for the Alert's dismiss button, which is configurable via the `dismissButtonLabel` prop
+
+<Alert dismissButtonLabel="Custom dismiss button label" isDismissible>
+  Configure a custom aria label for the dismiss button
+</Alert>

docs/src/pages/[platform]/components/alert/examples/DismissButtonLabelExample.tsx

@@ -0,0 +1,9 @@
+import { Alert } from '@aws-amplify/ui-react';
+
+export const DismissButtonLabelExample = () => {
+  return (
+    <Alert dismissButtonLabel="Custom dismiss button label" isDismissible>
+      Configure a custom aria label for the dismiss button
+    </Alert>
+  );
+};

docs/src/pages/[platform]/components/alert/examples/index.tsx

@@ -1,8 +1,9 @@
-export { DefaultAlertExample } from './DefaultAlertExample';
-export { AlertVariationsExample } from './AlertVariationsExample';
 export { AlertHeadingExample } from './AlertHeadingExample';
 export { AlertIconExample } from './AlertIconExample';
-export { DismissibleAlertExample } from './DismissibleAlertExample';
-export { OnDismissAlertExample } from './OnDismissAlertExample';
 export { AlertStylePropsExample } from './AlertStylePropsExample';
+export { AlertVariationsExample } from './AlertVariationsExample';
 export { AlertThemeExample } from './AlertThemeExample';
+export { DefaultAlertExample } from './DefaultAlertExample';
+export { DismissButtonLabelExample } from './DismissButtonLabelExample';
+export { DismissibleAlertExample } from './DismissibleAlertExample';
+export { OnDismissAlertExample } from './OnDismissAlertExample';

docs/src/pages/[platform]/components/alert/props-table.mdx

@@ -39,6 +39,16 @@ string
       <TableCell className="props-table__tr-description">Additional CSS class name for component</TableCell>
     </TableRow>
 
+    <TableRow>
+      <TableCell className="props-table__tr-name">dismissButtonLabel</TableCell>
+      <TableCell>
+```jsx
+string
+```
+</TableCell>
+      <TableCell className="props-table__tr-description">Configures the accessible label for the Alert's dismiss button.</TableCell>
+    </TableRow>
+
     <TableRow>
       <TableCell className="props-table__tr-name">hasIcon</TableCell>
       <TableCell>

docs/src/pages/[platform]/components/alert/react.mdx

@@ -12,6 +12,7 @@ import {
   OnDismissAlertExample,
   AlertStylePropsExample,
   AlertThemeExample,
+  DismissButtonLabelExample,
 } from './examples';
 
 ## Demo
@@ -290,4 +291,19 @@ For Amplify UI, the `alert` ARIA role is not built-in because it depends on your
 However, if you're just displaying some information that isn't critical or time sensitive, then we would not recommend passing in the `alert` role.
 
 For more information, check out the [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role).
-    
+
+#### Custom aria label
+
+You can configure a custom `aria-label` for the dismiss button using the `dismissButtonLabel` prop (defaults to `'Dismiss alert'`).
+
+<Example>
+  <DismissButtonLabelExample />
+  
+  <ExampleCode>
+
+```jsx file=./examples/DismissButtonLabelExample.tsx
+
+```
+
+  </ExampleCode>
+</Example>

packages/react/src/primitives/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { ComponentClassNames } from '../shared/constants';
+import { ComponentClassNames, ComponentText } from '../shared/constants';
 import { classNameModifier } from '../shared/utils';
 import { AlertProps, Primitive } from '../types';
 import { View } from '../View';
@@ -16,6 +16,7 @@ const AlertPrimitive: Primitive<AlertProps, typeof Flex> = (
     buttonRef,
     children,
     className,
+    dismissButtonLabel = ComponentText.Alert.dismissButtonLabel,
     hasIcon = true,
     heading,
     isDismissible = false,
@@ -56,6 +57,7 @@ const AlertPrimitive: Primitive<AlertProps, typeof Flex> = (
         </View>
         {isDismissible && (
           <Button
+            ariaLabel={dismissButtonLabel}
             variation="link"
             className={ComponentClassNames.AlertDismiss}
             onClick={dismissAlert}

packages/react/src/primitives/Alert/__tests__/Alert.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import { Alert } from '../Alert';
-import { ComponentClassNames } from '../../shared/constants';
+import { ComponentClassNames, ComponentText } from '../../shared/constants';
 import { ComponentPropsToStylePropsMap } from '../../types';
 import kebabCase from 'lodash/kebabCase';
 
@@ -111,6 +111,26 @@ describe('Alert: ', () => {
     expect(isDismissible.childElementCount).toBe(2);
   });
 
+  it('can configure an accessible label for the dismiss button', async () => {
+    const customDismissButtonLabel = 'Testing 123';
+    render(
+      <div>
+        <Alert isDismissible>Default dismiss button label</Alert>
+        <Alert isDismissible dismissButtonLabel={customDismissButtonLabel}>
+          Custom dismiss button label
+        </Alert>
+      </div>
+    );
+
+    const [defaultLabel, customLabel] = await screen.queryAllByRole('button');
+    expect(defaultLabel.getAttribute('aria-label')).toBe(
+      ComponentText.Alert.dismissButtonLabel
+    );
+    expect(customLabel.getAttribute('aria-label')).toBe(
+      customDismissButtonLabel
+    );
+  });
+
   it('can apply styling via props', async () => {
     render(
       <Alert backgroundColor="white" fontStyle="italic" testId="alertId">

packages/react/src/primitives/shared/constants.ts

@@ -517,6 +517,9 @@ export const ComponentClassObject = {
 
 // For internal use, no need to export
 export const ComponentText = {
+  Alert: {
+    dismissButtonLabel: 'Dismiss alert',
+  },
   Collection: {
     searchButtonLabel: 'Search',
   },

packages/react/src/primitives/types/alert.ts

@@ -17,6 +17,12 @@ export interface AlertProps extends FlexProps {
    */
   isDismissible?: boolean;
 
+  /**
+   * @description
+   * Configures the accessible label for the Alert's dismiss button.
+   */
+  dismissButtonLabel?: string;
+
   /**
    * @description
    * The onDismiss callback will be called when the user dismisses (closes) the Alert.