feat: Add autoFocus property to alert

pages/alert/simple.page.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
 import Alert from '~components/alert';
+import Button from '~components/button';
 import Link from '~components/link';
 import ScreenshotArea from '../utils/screenshot-area';
 import SpaceBetween from '~components/space-between';
@@ -16,6 +17,7 @@ export default function AlertScenario() {
     <I18nProvider messages={[messages]} locale="en">
       <article>
         <h1>Simple alert</h1>
+        <Button onClick={() => setVisible(!visible)}>Toggle visibility</Button>
         <ScreenshotArea>
           <SpaceBetween size="s">
             <div className={styles['alert-container']}>
@@ -27,6 +29,7 @@ export default function AlertScenario() {
                 buttonText="Button text"
                 type="warning"
                 onDismiss={() => setVisible(false)}
+                autoFocus={true}
               >
                 Content
                 <br />

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -19,6 +19,13 @@ when the \`dismissible\` property is set to \`true\`.",
   "functions": Array [],
   "name": "Alert",
   "properties": Array [
+    Object {
+      "description": "Automatically focuses the alert when component is mounted.
+Use this when the alert should immediately notify the user of a critical error.",
+      "name": "autoFocus",
+      "optional": true,
+      "type": "boolean",
+    },
     Object {
       "deprecatedTag": "Custom CSS is not supported. For other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
       "description": "Adds the specified classes to the root element of the component.",

src/alert/interfaces.ts

@@ -53,6 +53,13 @@ export interface AlertProps extends BaseComponentProps {
    * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.
    */
   action?: React.ReactNode;
+
+  /**
+   * Automatically focuses the alert when component is mounted.
+   * Use this when the alert should immediately notify the user of a critical error.
+   */
+  autoFocus?: boolean;
+
   /**
    * Fired when the user clicks the close icon that is displayed
    * when the `dismissible` property is set to `true`.

src/alert/internal.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { InternalButton } from '../button/internal';
 import { IconProps } from '../icon/interfaces';
@@ -37,6 +37,7 @@ export default function InternalAlert({
   header,
   buttonText,
   action,
+  autoFocus,
   onDismiss,
   onButtonClick,
   __internalRootRef = null,
@@ -45,6 +46,7 @@ export default function InternalAlert({
   const baseProps = getBaseProps(rest);
   const i18n = useInternalI18n('alert');
 
+  const focusRef = useRef<HTMLDivElement>(null);
   const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);
   const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
 
@@ -66,6 +68,12 @@ export default function InternalAlert({
     [DATA_ATTR_ANALYTICS_ALERT]: type,
   };
 
+  useEffect(() => {
+    if (autoFocus && visible && focusRef.current) {
+      focusRef.current.focus();
+    }
+  }, [autoFocus, visible, focusRef]);
+
   return (
     <div
       {...baseProps}
@@ -81,15 +89,17 @@ export default function InternalAlert({
     >
       <VisualContext contextName="alert">
         <div className={clsx(styles.alert, styles[`type-${type}`])}>
-          <div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
-            <InternalIcon name={typeToIcon[type]} size={size} />
-          </div>
-          <div className={styles.body}>
-            <div className={clsx(styles.message, styles.text)}>
-              {header && <div className={styles.header}>{header}</div>}
-              <div className={styles.content}>{children}</div>
+          <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
+            <div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
+              <InternalIcon name={typeToIcon[type]} size={size} />
+            </div>
+            <div className={styles.body}>
+              <div className={clsx(styles.message, styles.text)}>
+                {header && <div className={styles.header}>{header}</div>}
+                <div className={styles.content}>{children}</div>
+              </div>
+              {hasAction && <div className={styles.action}>{actionButton}</div>}
             </div>
-            {hasAction && <div className={styles.action}>{actionButton}</div>}
           </div>
           {dismissible && (
             <div className={styles.dismiss}>

src/alert/styles.scss

@@ -6,6 +6,7 @@
 @use 'sass:map';
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+@use '../internal/hooks/focus-visible' as focus-visible;
 
 @use './motion';
 
@@ -50,6 +51,17 @@
   /* used in test-utils */
 }
 
+.alert-focus-wrapper {
+  display: flex;
+
+  &:focus {
+    outline: none;
+  }
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+  }
+}
+
 .text {
   padding: awsui.$border-field-width 0; // To account for vertical misalignment due to button borders
   margin: awsui.$space-scaled-xxs awsui.$space-xxs;