From 344c46b491260d1a3bf3a717859d2d6aa886ba7b Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.com>
Date: Wed, 16 Oct 2024 10:12:22 +0200
Subject: [PATCH 1/5] chore: Add `initialCheck` capability to alert/flash
 content API

---
 pages/alert/runtime-content.page.tsx          | 11 ++++-
 src/alert/internal.tsx                        |  2 +-
 src/flashbar/flash.tsx                        |  2 +-
 .../controllers/alert-flash-content.ts        | 44 +++++++++++++++++++
 .../helpers/use-discovered-content.tsx        | 20 +++++----
 5 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/pages/alert/runtime-content.page.tsx b/pages/alert/runtime-content.page.tsx
index 589d2b552b..557393cdbc 100644
--- a/pages/alert/runtime-content.page.tsx
+++ b/pages/alert/runtime-content.page.tsx
@@ -60,6 +60,13 @@ awsuiPlugins.alertContent.registerContentReplacer({
       },
     };
   },
+  initialCheck(context) {
+    const found = context.type === 'error' && context.contentText?.match('Access denied');
+    return {
+      header: found ? 'remove' : 'original',
+      content: found ? 'replaced' : 'original',
+    };
+  },
 });
 
 const alertTypeOptions = ['error', 'warning', 'info', 'success'].map(type => ({ value: type }));
@@ -106,7 +113,7 @@ export default function () {
         <ScreenshotArea gutters={false}>
           {hidden ? null : (
             <SpaceBetween size="m">
-              <Alert
+              {/* <Alert
                 type={type}
                 statusIconAriaLabel={type}
                 dismissAriaLabel="Dismiss"
@@ -114,7 +121,7 @@ export default function () {
                 action={<Button>Action</Button>}
               >
                 {!contentSwapped ? content1 : content2}
-              </Alert>
+              </Alert> */}
 
               <Alert
                 type={type}
diff --git a/src/alert/internal.tsx b/src/alert/internal.tsx
index 5e84397d83..8fea5aa5a0 100644
--- a/src/alert/internal.tsx
+++ b/src/alert/internal.tsx
@@ -39,7 +39,7 @@ const typeToIcon: Record<AlertProps.Type, IconProps['name']> = {
 type InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps<HTMLDivElement>;
 
 const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);
-const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent.onContentRegistered);
+const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);
 
 const InternalAlert = React.forwardRef(
   (
diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx
index ecd0cca1d5..62dc845cd7 100644
--- a/src/flashbar/flash.tsx
+++ b/src/flashbar/flash.tsx
@@ -38,7 +38,7 @@ const ICON_TYPES = {
 } as const;
 
 const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.flashbar.onActionRegistered);
-const useDiscoveredContent = createUseDiscoveredContent('flash', awsuiPluginsInternal.flashContent.onContentRegistered);
+const useDiscoveredContent = createUseDiscoveredContent('flash', awsuiPluginsInternal.flashContent);
 
 function dismissButton(
   dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],
diff --git a/src/internal/plugins/controllers/alert-flash-content.ts b/src/internal/plugins/controllers/alert-flash-content.ts
index ea9722ece1..a9264d8339 100644
--- a/src/internal/plugins/controllers/alert-flash-content.ts
+++ b/src/internal/plugins/controllers/alert-flash-content.ts
@@ -1,6 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { ReactNode } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
 import debounce from '../../debounce';
 
 // this code should not depend on React typings, because it is portable between major versions
@@ -14,6 +17,18 @@ export interface AlertFlashContentContext {
   contentRef: RefShim<HTMLElement>;
 }
 
+interface AlertFlashContentInitialContextRaw {
+  type: string;
+  header?: ReactNode;
+  content?: ReactNode;
+}
+
+export interface AlertFlashContentInitialContext {
+  type: string;
+  headerText?: string;
+  contentText?: string;
+}
+
 export type ReplacementType = 'original' | 'remove' | 'replaced';
 
 export interface ReplacementApi {
@@ -30,9 +45,15 @@ export interface AlertFlashContentResult {
   unmount: (containers: { replacementHeaderContainer: HTMLElement; replacementContentContainer: HTMLElement }) => void;
 }
 
+export interface AlertFlashContentInitialResult {
+  header: ReplacementType;
+  content: ReplacementType;
+}
+
 export interface AlertFlashContentConfig {
   id: string;
   runReplacer: (context: AlertFlashContentContext, replacementApi: ReplacementApi) => AlertFlashContentResult;
+  initialCheck?: (context: AlertFlashContentInitialContext) => AlertFlashContentInitialResult;
 }
 
 export type AlertFlashContentRegistrationListener = (provider: AlertFlashContentConfig) => () => void;
@@ -44,8 +65,15 @@ export interface AlertFlashContentApiPublic {
 export interface AlertFlashContentApiInternal {
   clearRegisteredReplacer(): void;
   onContentRegistered(listener: AlertFlashContentRegistrationListener): () => void;
+  initialSyncRender(context: AlertFlashContentInitialContextRaw): AlertFlashContentInitialResult;
 }
 
+const nodeAsString = (node: ReactNode) =>
+  flattenChildren(node)
+    .map(node => (typeof node === 'object' ? node.props.children : node))
+    .filter(node => typeof node === 'string')
+    .join('');
+
 export class AlertFlashContentController {
   #listeners: Array<AlertFlashContentRegistrationListener> = [];
   #cleanups = new Map<AlertFlashContentRegistrationListener, () => void>();
@@ -79,6 +107,21 @@ export class AlertFlashContentController {
     this.#provider = undefined;
   };
 
+  initialSyncRender = (context: AlertFlashContentInitialContextRaw): AlertFlashContentInitialResult => {
+    if (this.#provider?.initialCheck) {
+      const processedContext: AlertFlashContentInitialContext = {
+        type: context.type,
+        headerText: nodeAsString(context.header),
+        contentText: nodeAsString(context.content),
+      };
+      return this.#provider.initialCheck(processedContext);
+    }
+    return {
+      header: 'original',
+      content: 'original',
+    };
+  };
+
   onContentRegistered = (listener: AlertFlashContentRegistrationListener) => {
     if (this.#provider) {
       const cleanup = listener(this.#provider);
@@ -102,6 +145,7 @@ export class AlertFlashContentController {
   installInternal(internalApi: Partial<AlertFlashContentApiInternal> = {}): AlertFlashContentApiInternal {
     internalApi.clearRegisteredReplacer ??= this.clearRegisteredReplacer;
     internalApi.onContentRegistered ??= this.onContentRegistered;
+    internalApi.initialSyncRender ??= this.initialSyncRender;
     return internalApi as AlertFlashContentApiInternal;
   }
 }
diff --git a/src/internal/plugins/helpers/use-discovered-content.tsx b/src/internal/plugins/helpers/use-discovered-content.tsx
index 3b46c4d7af..09dd618beb 100644
--- a/src/internal/plugins/helpers/use-discovered-content.tsx
+++ b/src/internal/plugins/helpers/use-discovered-content.tsx
@@ -3,15 +3,12 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 
 import {
-  AlertFlashContentController,
+  AlertFlashContentApiInternal,
   AlertFlashContentResult,
   ReplacementType,
 } from '../controllers/alert-flash-content';
 
-export function createUseDiscoveredContent(
-  componentName: string,
-  onContentRegistered: AlertFlashContentController['onContentRegistered']
-) {
+export function createUseDiscoveredContent(componentName: string, controller: AlertFlashContentApiInternal) {
   return function useDiscoveredContent({
     type,
     header,
@@ -25,14 +22,21 @@ export function createUseDiscoveredContent(
     const contentRef = useRef<HTMLDivElement>(null);
     const replacementHeaderRef = useRef<HTMLDivElement>(null);
     const replacementContentRef = useRef<HTMLDivElement>(null);
-    const [headerReplacementType, setFoundHeaderReplacement] = useState<ReplacementType>('original');
-    const [contentReplacementType, setFoundContentReplacement] = useState<ReplacementType>('original');
+    const [initialState] = useState(() =>
+      controller.initialSyncRender({
+        type,
+        header,
+        content: children,
+      })
+    );
+    const [headerReplacementType, setFoundHeaderReplacement] = useState<ReplacementType>(initialState.header);
+    const [contentReplacementType, setFoundContentReplacement] = useState<ReplacementType>(initialState.content);
     const mountedProvider = useRef<AlertFlashContentResult | undefined>();
 
     useEffect(() => {
       const context = { type, headerRef, contentRef };
 
-      return onContentRegistered(provider => {
+      return controller.onContentRegistered(provider => {
         let mounted = true;
 
         function checkMounted(methodName: string) {

From 75e3857e6f0495d8218d17fa155de470b9243f13 Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.com>
Date: Wed, 16 Oct 2024 12:12:09 +0200
Subject: [PATCH 2/5] Hide alerts during initial render

---
 pages/alert/runtime-content.page.tsx          | 30 ++++++++++++-------
 src/alert/internal.tsx                        |  7 ++++-
 src/alert/styles.scss                         |  8 +++++
 .../controllers/alert-flash-content.ts        | 18 ++++-------
 .../helpers/use-discovered-content.tsx        | 11 ++++---
 5 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/pages/alert/runtime-content.page.tsx b/pages/alert/runtime-content.page.tsx
index 557393cdbc..39da4a09b6 100644
--- a/pages/alert/runtime-content.page.tsx
+++ b/pages/alert/runtime-content.page.tsx
@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 import {
@@ -20,7 +20,9 @@ import awsuiPlugins from '~components/internal/plugins';
 import AppContext, { AppContextType } from '../app/app-context';
 import ScreenshotArea from '../utils/screenshot-area';
 
-type PageContext = React.Context<AppContextType<{ loading: boolean; hidden: boolean; type: AlertProps.Type }>>;
+type PageContext = React.Context<
+  AppContextType<{ loading: boolean; hidden: boolean; type: AlertProps.Type; autofocus: boolean }>
+>;
 
 awsuiPlugins.alertContent.registerContentReplacer({
   id: 'awsui/alert-test-action',
@@ -61,11 +63,7 @@ awsuiPlugins.alertContent.registerContentReplacer({
     };
   },
   initialCheck(context) {
-    const found = context.type === 'error' && context.contentText?.match('Access denied');
-    return {
-      header: found ? 'remove' : 'original',
-      content: found ? 'replaced' : 'original',
-    };
+    return context.type === 'error' && !!context.contentText?.match('Access denied');
   },
 });
 
@@ -73,7 +71,7 @@ const alertTypeOptions = ['error', 'warning', 'info', 'success'].map(type => ({
 
 export default function () {
   const {
-    urlParams: { loading = false, hidden = false, type = 'error' },
+    urlParams: { loading = false, hidden = false, type = 'error', autofocus = false },
     setUrlParams,
   } = useContext(AppContext as PageContext);
   const [unrelatedState, setUnrelatedState] = useState(false);
@@ -82,6 +80,14 @@ export default function () {
   const content1 = useMemo(() => (loading ? <Box>Loading...</Box> : <Box>Content</Box>), [loading]);
   const content2 = loading ? <Box>Loading...</Box> : <Box>There was an error: Access denied because of XYZ</Box>;
 
+  const alertRef = useRef<AlertProps.Ref>(null);
+
+  useEffect(() => {
+    if (autofocus && !hidden) {
+      alertRef.current?.focus();
+    }
+  }, [autofocus, hidden]);
+
   return (
     <Box margin="m">
       <h1>Alert runtime actions</h1>
@@ -99,6 +105,9 @@ export default function () {
           <Checkbox onChange={e => setContentSwapped(e.detail.checked)} checked={contentSwapped}>
             Swap content
           </Checkbox>
+          <Checkbox onChange={e => setUrlParams({ autofocus: e.detail.checked })} checked={autofocus}>
+            Auto-focus alert
+          </Checkbox>
           <FormField label="Alert type">
             <Select
               options={alertTypeOptions}
@@ -113,7 +122,7 @@ export default function () {
         <ScreenshotArea gutters={false}>
           {hidden ? null : (
             <SpaceBetween size="m">
-              {/* <Alert
+              <Alert
                 type={type}
                 statusIconAriaLabel={type}
                 dismissAriaLabel="Dismiss"
@@ -121,7 +130,7 @@ export default function () {
                 action={<Button>Action</Button>}
               >
                 {!contentSwapped ? content1 : content2}
-              </Alert> */}
+              </Alert>
 
               <Alert
                 type={type}
@@ -129,6 +138,7 @@ export default function () {
                 dismissAriaLabel="Dismiss"
                 header="Header"
                 action={<Button>Action</Button>}
+                ref={alertRef}
               >
                 {!contentSwapped ? content2 : content1}
               </Alert>
diff --git a/src/alert/internal.tsx b/src/alert/internal.tsx
index 8fea5aa5a0..e0500b8abc 100644
--- a/src/alert/internal.tsx
+++ b/src/alert/internal.tsx
@@ -71,6 +71,7 @@ const InternalAlert = React.forwardRef(
 
     const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);
     const {
+      initialHidden,
       headerReplacementType,
       contentReplacementType,
       headerRef: headerRefContent,
@@ -100,7 +101,11 @@ const InternalAlert = React.forwardRef(
         {...baseProps}
         {...analyticsAttributes}
         aria-hidden={!visible}
-        className={clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className)}
+        className={clsx(
+          styles.root,
+          { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden },
+          baseProps.className
+        )}
         ref={mergedRef}
       >
         <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
diff --git a/src/alert/styles.scss b/src/alert/styles.scss
index c719e9588e..20dae4c7a9 100644
--- a/src/alert/styles.scss
+++ b/src/alert/styles.scss
@@ -54,6 +54,14 @@
 .hidden {
   display: none;
 }
+// visibly hidden, but focusable
+.initial-hidden {
+  // TODO: decide if it should take up space:
+  opacity: 0;
+  // or be entirely hidden:
+  // overflow: hidden;
+  // height: 0;
+}
 
 .header,
 .header-replacement {
diff --git a/src/internal/plugins/controllers/alert-flash-content.ts b/src/internal/plugins/controllers/alert-flash-content.ts
index a9264d8339..bc3e15cd42 100644
--- a/src/internal/plugins/controllers/alert-flash-content.ts
+++ b/src/internal/plugins/controllers/alert-flash-content.ts
@@ -45,15 +45,10 @@ export interface AlertFlashContentResult {
   unmount: (containers: { replacementHeaderContainer: HTMLElement; replacementContentContainer: HTMLElement }) => void;
 }
 
-export interface AlertFlashContentInitialResult {
-  header: ReplacementType;
-  content: ReplacementType;
-}
-
 export interface AlertFlashContentConfig {
   id: string;
   runReplacer: (context: AlertFlashContentContext, replacementApi: ReplacementApi) => AlertFlashContentResult;
-  initialCheck?: (context: AlertFlashContentInitialContext) => AlertFlashContentInitialResult;
+  initialCheck?: (context: AlertFlashContentInitialContext) => boolean;
 }
 
 export type AlertFlashContentRegistrationListener = (provider: AlertFlashContentConfig) => () => void;
@@ -65,7 +60,7 @@ export interface AlertFlashContentApiPublic {
 export interface AlertFlashContentApiInternal {
   clearRegisteredReplacer(): void;
   onContentRegistered(listener: AlertFlashContentRegistrationListener): () => void;
-  initialSyncRender(context: AlertFlashContentInitialContextRaw): AlertFlashContentInitialResult;
+  initialCheck(context: AlertFlashContentInitialContextRaw): boolean;
 }
 
 const nodeAsString = (node: ReactNode) =>
@@ -107,7 +102,7 @@ export class AlertFlashContentController {
     this.#provider = undefined;
   };
 
-  initialSyncRender = (context: AlertFlashContentInitialContextRaw): AlertFlashContentInitialResult => {
+  initialCheck = (context: AlertFlashContentInitialContextRaw): boolean => {
     if (this.#provider?.initialCheck) {
       const processedContext: AlertFlashContentInitialContext = {
         type: context.type,
@@ -116,10 +111,7 @@ export class AlertFlashContentController {
       };
       return this.#provider.initialCheck(processedContext);
     }
-    return {
-      header: 'original',
-      content: 'original',
-    };
+    return false;
   };
 
   onContentRegistered = (listener: AlertFlashContentRegistrationListener) => {
@@ -145,7 +137,7 @@ export class AlertFlashContentController {
   installInternal(internalApi: Partial<AlertFlashContentApiInternal> = {}): AlertFlashContentApiInternal {
     internalApi.clearRegisteredReplacer ??= this.clearRegisteredReplacer;
     internalApi.onContentRegistered ??= this.onContentRegistered;
-    internalApi.initialSyncRender ??= this.initialSyncRender;
+    internalApi.initialCheck ??= this.initialCheck;
     return internalApi as AlertFlashContentApiInternal;
   }
 }
diff --git a/src/internal/plugins/helpers/use-discovered-content.tsx b/src/internal/plugins/helpers/use-discovered-content.tsx
index 09dd618beb..3580a2733d 100644
--- a/src/internal/plugins/helpers/use-discovered-content.tsx
+++ b/src/internal/plugins/helpers/use-discovered-content.tsx
@@ -22,20 +22,22 @@ export function createUseDiscoveredContent(componentName: string, controller: Al
     const contentRef = useRef<HTMLDivElement>(null);
     const replacementHeaderRef = useRef<HTMLDivElement>(null);
     const replacementContentRef = useRef<HTMLDivElement>(null);
-    const [initialState] = useState(() =>
-      controller.initialSyncRender({
+    const [initialHidden, setInitialHidden] = useState(() =>
+      controller.initialCheck({
         type,
         header,
         content: children,
       })
     );
-    const [headerReplacementType, setFoundHeaderReplacement] = useState<ReplacementType>(initialState.header);
-    const [contentReplacementType, setFoundContentReplacement] = useState<ReplacementType>(initialState.content);
+    const [headerReplacementType, setFoundHeaderReplacement] = useState<ReplacementType>('original');
+    const [contentReplacementType, setFoundContentReplacement] = useState<ReplacementType>('original');
     const mountedProvider = useRef<AlertFlashContentResult | undefined>();
 
     useEffect(() => {
       const context = { type, headerRef, contentRef };
 
+      setInitialHidden(false);
+
       return controller.onContentRegistered(provider => {
         let mounted = true;
 
@@ -99,6 +101,7 @@ export function createUseDiscoveredContent(componentName: string, controller: Al
     }, [type, header, children]);
 
     return {
+      initialHidden,
       headerReplacementType,
       contentReplacementType,
       headerRef: headerRef as React.Ref<HTMLDivElement>,

From 7361561216ee9e8a5f36a8d9b7210a2d741da97d Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.com>
Date: Wed, 16 Oct 2024 16:41:30 +0200
Subject: [PATCH 3/5] Tweaks to API

---
 pages/alert/runtime-content.page.tsx          | 10 +++++-
 pages/flashbar/runtime-content.page.tsx       | 33 +++++++++++++++++--
 src/alert/styles.scss                         |  7 ++--
 src/flashbar/flash.tsx                        |  4 ++-
 src/flashbar/styles.scss                      |  5 +++
 .../controllers/alert-flash-content.ts        | 26 +++------------
 6 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/pages/alert/runtime-content.page.tsx b/pages/alert/runtime-content.page.tsx
index 39da4a09b6..89e89014ee 100644
--- a/pages/alert/runtime-content.page.tsx
+++ b/pages/alert/runtime-content.page.tsx
@@ -63,7 +63,15 @@ awsuiPlugins.alertContent.registerContentReplacer({
     };
   },
   initialCheck(context) {
-    return context.type === 'error' && !!context.contentText?.match('Access denied');
+    return (
+      context.type === 'error' &&
+      !!(
+        context.content &&
+        typeof context.content === 'object' &&
+        'props' in context.content &&
+        context.content.props.children?.match('Access denied')
+      )
+    );
   },
 });
 
diff --git a/pages/flashbar/runtime-content.page.tsx b/pages/flashbar/runtime-content.page.tsx
index 2a1407d3be..6e69995791 100644
--- a/pages/flashbar/runtime-content.page.tsx
+++ b/pages/flashbar/runtime-content.page.tsx
@@ -1,8 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useContext, useState } from 'react';
+import React, { ReactNode, useContext, useState } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import flattenChildren from 'react-keyed-flatten-children';
 
 import {
   Box,
@@ -24,6 +25,12 @@ type PageContext = React.Context<
   AppContextType<{ loading: boolean; hidden: boolean; stackItems: boolean; type: FlashbarProps.Type }>
 >;
 
+const nodeAsString = (node: ReactNode) =>
+  flattenChildren(node)
+    .map(node => (typeof node === 'object' ? node.props.children : node))
+    .filter(node => typeof node === 'string')
+    .join('');
+
 awsuiPlugins.flashContent.registerContentReplacer({
   id: 'awsui/flashbar-test-action',
   runReplacer(context, replacer) {
@@ -62,10 +69,32 @@ awsuiPlugins.flashContent.registerContentReplacer({
       },
     };
   },
+  initialCheck(context) {
+    return context.type === 'error' && !!nodeAsString(context.content).match('Access denied');
+  },
 });
 
 const messageTypeOptions = ['error', 'warning', 'info', 'success'].map(type => ({ value: type }));
 
+const content = (
+  <>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+    <p>There was an error: Access denied because of XYZ</p>
+  </>
+);
+
 export default function () {
   const {
     urlParams: { loading = false, hidden = false, stackItems = false, type = 'error' },
@@ -117,7 +146,7 @@ export default function () {
                   type,
                   statusIconAriaLabel: type,
                   header: 'Header',
-                  content: loading ? 'Loading...' : 'There was an error: Access denied because of XYZ',
+                  content: loading ? 'Loading...' : content,
                   action: <Button>Action</Button>,
                 },
               ]}
diff --git a/src/alert/styles.scss b/src/alert/styles.scss
index 20dae4c7a9..83b99fbb26 100644
--- a/src/alert/styles.scss
+++ b/src/alert/styles.scss
@@ -56,11 +56,8 @@
 }
 // visibly hidden, but focusable
 .initial-hidden {
-  // TODO: decide if it should take up space:
-  opacity: 0;
-  // or be entirely hidden:
-  // overflow: hidden;
-  // height: 0;
+  overflow: hidden;
+  block-size: 0;
 }
 
 .header,
diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx
index 62dc845cd7..0f66b1abe8 100644
--- a/src/flashbar/flash.tsx
+++ b/src/flashbar/flash.tsx
@@ -124,6 +124,7 @@ export const Flash = React.forwardRef(
     const contentRefObject = useRef<HTMLDivElement>(null);
     const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);
     const {
+      initialHidden,
       headerReplacementType,
       contentReplacementType,
       headerRef: headerRefContent,
@@ -174,7 +175,8 @@ export const Flash = React.forwardRef(
             [styles.exiting]: transitionState === 'exiting',
             [styles.exited]: transitionState === 'exited',
           },
-          getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar')
+          getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar'),
+          initialHidden && styles['initial-hidden']
         )}
         {...analyticsAttributes}
       >
diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
index 638419326d..9681d6e0c3 100644
--- a/src/flashbar/styles.scss
+++ b/src/flashbar/styles.scss
@@ -52,6 +52,11 @@
   }
 }
 
+.initial-hidden {
+  overflow: hidden;
+  block-size: 0;
+}
+
 .flash-list {
   list-style: none;
   padding-block: 0;
diff --git a/src/internal/plugins/controllers/alert-flash-content.ts b/src/internal/plugins/controllers/alert-flash-content.ts
index bc3e15cd42..306f17e7f8 100644
--- a/src/internal/plugins/controllers/alert-flash-content.ts
+++ b/src/internal/plugins/controllers/alert-flash-content.ts
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ReactNode } from 'react';
-import flattenChildren from 'react-keyed-flatten-children';
 
 import debounce from '../../debounce';
 
@@ -17,18 +16,12 @@ export interface AlertFlashContentContext {
   contentRef: RefShim<HTMLElement>;
 }
 
-interface AlertFlashContentInitialContextRaw {
+interface AlertFlashContentInitialContext {
   type: string;
   header?: ReactNode;
   content?: ReactNode;
 }
 
-export interface AlertFlashContentInitialContext {
-  type: string;
-  headerText?: string;
-  contentText?: string;
-}
-
 export type ReplacementType = 'original' | 'remove' | 'replaced';
 
 export interface ReplacementApi {
@@ -60,15 +53,9 @@ export interface AlertFlashContentApiPublic {
 export interface AlertFlashContentApiInternal {
   clearRegisteredReplacer(): void;
   onContentRegistered(listener: AlertFlashContentRegistrationListener): () => void;
-  initialCheck(context: AlertFlashContentInitialContextRaw): boolean;
+  initialCheck(context: AlertFlashContentInitialContext): boolean;
 }
 
-const nodeAsString = (node: ReactNode) =>
-  flattenChildren(node)
-    .map(node => (typeof node === 'object' ? node.props.children : node))
-    .filter(node => typeof node === 'string')
-    .join('');
-
 export class AlertFlashContentController {
   #listeners: Array<AlertFlashContentRegistrationListener> = [];
   #cleanups = new Map<AlertFlashContentRegistrationListener, () => void>();
@@ -102,14 +89,9 @@ export class AlertFlashContentController {
     this.#provider = undefined;
   };
 
-  initialCheck = (context: AlertFlashContentInitialContextRaw): boolean => {
+  initialCheck = (context: AlertFlashContentInitialContext): boolean => {
     if (this.#provider?.initialCheck) {
-      const processedContext: AlertFlashContentInitialContext = {
-        type: context.type,
-        headerText: nodeAsString(context.header),
-        contentText: nodeAsString(context.content),
-      };
-      return this.#provider.initialCheck(processedContext);
+      return this.#provider.initialCheck(context);
     }
     return false;
   };

From be9ecb456446345145046d8b57a3a155271897d5 Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.com>
Date: Fri, 18 Oct 2024 11:05:26 +0200
Subject: [PATCH 4/5] Add tests

---
 package-lock.json                             | 10 +++
 package.json                                  |  3 +-
 .../runtime-content-initial.test.tsx          | 57 +++++++++++++++++
 .../runtime-content-initial.test.tsx          | 63 +++++++++++++++++++
 4 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 src/alert/__tests__/runtime-content-initial.test.tsx
 create mode 100644 src/flashbar/__tests__/runtime-content-initial.test.tsx

diff --git a/package-lock.json b/package-lock.json
index c7c0ed704f..a1077775f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,7 @@
         "@types/react-resizable": "^1.7.4",
         "@types/react-router": "^5.1.18",
         "@types/react-router-dom": "^5.3.2",
+        "@types/react-test-renderer": "^18.3.0",
         "@types/react-transition-group": "^4.4.4",
         "@types/webpack-env": "^1.16.3",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -3570,6 +3571,15 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-test-renderer": {
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz",
+      "integrity": "sha512-HW4MuEYxfDbOHQsVlY/XtOvNHftCVEPhJF2pQXXwcUiUF+Oyb0usgp48HSgpK5rt8m9KZb22yqOeZm+rrVG8gw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "dev": true,
diff --git a/package.json b/package.json
index 593c0f080d..4b4e9b2e62 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,8 @@
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/plugin-syntax-typescript": "^7.23.3",
-    "@cloudscape-design/build-tools": "^3.0.0",
     "@cloudscape-design/browser-test-tools": "^3.0.0",
+    "@cloudscape-design/build-tools": "^3.0.0",
     "@cloudscape-design/documenter": "^1.0.0",
     "@cloudscape-design/eslint-plugin": "file:build-tools/eslint",
     "@cloudscape-design/global-styles": "^1.0.0",
@@ -77,6 +77,7 @@
     "@types/react-resizable": "^1.7.4",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.2",
+    "@types/react-test-renderer": "^18.3.0",
     "@types/react-transition-group": "^4.4.4",
     "@types/webpack-env": "^1.16.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
diff --git a/src/alert/__tests__/runtime-content-initial.test.tsx b/src/alert/__tests__/runtime-content-initial.test.tsx
new file mode 100644
index 0000000000..2cb26a86f9
--- /dev/null
+++ b/src/alert/__tests__/runtime-content-initial.test.tsx
@@ -0,0 +1,57 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import testRenderer, { ReactTestRendererJSON } from 'react-test-renderer';
+
+import Alert from '../../../lib/components/alert';
+import awsuiPlugins from '../../../lib/components/internal/plugins';
+import { awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
+import { AlertFlashContentConfig } from '../../../lib/components/internal/plugins/controllers/alert-flash-content';
+
+import stylesCss from '../../../lib/components/alert/styles.css.js';
+
+afterEach(() => {
+  awsuiPluginsInternal.alertContent.clearRegisteredReplacer();
+  jest.resetAllMocks();
+  jest.restoreAllMocks();
+});
+
+describe('initialCheck method', () => {
+  let initialCheck: jest.Mock<boolean>;
+  beforeEach(() => {
+    initialCheck = jest.fn(() => true);
+    const plugin: AlertFlashContentConfig = {
+      id: 'plugin-1',
+      runReplacer: () => {
+        return { update: () => {}, unmount: () => {} };
+      },
+      initialCheck,
+    };
+    awsuiPlugins.alertContent.registerContentReplacer(plugin);
+  });
+
+  test('calls `initialCheck` method, and hides alert if true', () => {
+    const basicRender = testRenderer.create(<Alert type="error">Content</Alert>);
+    expect(initialCheck).toHaveBeenCalledTimes(1);
+    expect((basicRender.toJSON() as ReactTestRendererJSON).props.className.split(' ')).toEqual(
+      expect.arrayContaining([stylesCss['initial-hidden']])
+    );
+  });
+
+  test('re-shows alert on next render', () => {
+    const basicRender = testRenderer.create(<Alert type="error">Content</Alert>);
+    basicRender.update(<Alert type="error">Content</Alert>);
+    expect(initialCheck).toHaveBeenCalledTimes(1);
+    expect((basicRender.toJSON() as ReactTestRendererJSON).props.className.split(' ')).toEqual(
+      expect.not.arrayContaining([stylesCss['initial-hidden']])
+    );
+  });
+
+  test('does not hide alert if `initialCheck` returns false', () => {
+    initialCheck.mockReturnValue(false);
+    const basicRender = testRenderer.create(<Alert type="error">Content</Alert>);
+    expect((basicRender.toJSON() as ReactTestRendererJSON).props.className.split(' ')).toEqual(
+      expect.not.arrayContaining([stylesCss['initial-hidden']])
+    );
+  });
+});
diff --git a/src/flashbar/__tests__/runtime-content-initial.test.tsx b/src/flashbar/__tests__/runtime-content-initial.test.tsx
new file mode 100644
index 0000000000..d390b2f4e3
--- /dev/null
+++ b/src/flashbar/__tests__/runtime-content-initial.test.tsx
@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import testRenderer, { ReactTestRenderer, ReactTestRendererJSON } from 'react-test-renderer';
+
+import Flashbar from '../../../lib/components/flashbar';
+import awsuiPlugins from '../../../lib/components/internal/plugins';
+import { awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
+import { AlertFlashContentConfig } from '../../../lib/components/internal/plugins/controllers/alert-flash-content';
+
+import stylesCss from '../../../lib/components/flashbar/styles.css.js';
+
+afterEach(() => {
+  awsuiPluginsInternal.flashContent.clearRegisteredReplacer();
+  jest.resetAllMocks();
+  jest.restoreAllMocks();
+});
+
+describe('initialCheck method', () => {
+  let initialCheck: jest.Mock<boolean>;
+  const getFirstFlash = (basicRender: ReactTestRenderer) =>
+    (
+      ((basicRender.toJSON() as ReactTestRendererJSON).children![0] as ReactTestRendererJSON)
+        .children![0] as ReactTestRendererJSON
+    ).children![0] as ReactTestRendererJSON;
+  beforeEach(() => {
+    initialCheck = jest.fn(() => true);
+    const plugin: AlertFlashContentConfig = {
+      id: 'plugin-1',
+      runReplacer: () => {
+        return { update: () => {}, unmount: () => {} };
+      },
+      initialCheck,
+    };
+    awsuiPlugins.flashContent.registerContentReplacer(plugin);
+  });
+
+  test('calls `initialCheck` method, and hides flash if true', () => {
+    const basicRender = testRenderer.create(<Flashbar items={[{}]} />);
+    expect(initialCheck).toHaveBeenCalledTimes(1);
+    expect(getFirstFlash(basicRender).props.className.split(' ')).toEqual(
+      expect.arrayContaining([stylesCss['initial-hidden']])
+    );
+  });
+
+  test('re-shows alert on next render', () => {
+    const basicRender = testRenderer.create(<Flashbar items={[{}]} />);
+    basicRender.update(<Flashbar items={[{}]} />);
+    expect(initialCheck).toHaveBeenCalledTimes(1);
+    expect(getFirstFlash(basicRender).props.className.split(' ')).toEqual(
+      expect.not.arrayContaining([stylesCss['initial-hidden']])
+    );
+  });
+
+  test('does not hide flash if `initialCheck` returns false', () => {
+    initialCheck.mockReturnValue(false);
+    const basicRender = testRenderer.create(<Flashbar items={[{}]} />);
+    expect(initialCheck).toHaveBeenCalledTimes(1);
+    expect(getFirstFlash(basicRender).props.className.split(' ')).toEqual(
+      expect.not.arrayContaining([stylesCss['initial-hidden']])
+    );
+  });
+});

From 8b7a60b33552c27fecf473de6c350ffcfd2fb60b Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.com>
Date: Fri, 18 Oct 2024 14:37:46 +0200
Subject: [PATCH 5/5] Add some further tests

---
 pages/alert/runtime-content.page.tsx          |  7 +++-
 src/alert/__integ__/runtime-content.test.ts   | 33 +++++++++++++++++++
 .../runtime-content-initial.test.tsx          |  2 ++
 .../runtime-content-initial.test.tsx          |  2 ++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/alert/__integ__/runtime-content.test.ts

diff --git a/pages/alert/runtime-content.page.tsx b/pages/alert/runtime-content.page.tsx
index 89e89014ee..a7b92860e5 100644
--- a/pages/alert/runtime-content.page.tsx
+++ b/pages/alert/runtime-content.page.tsx
@@ -104,7 +104,11 @@ export default function () {
           <Checkbox onChange={e => setUrlParams({ loading: e.detail.checked })} checked={loading}>
             Content loading
           </Checkbox>
-          <Checkbox onChange={e => setUrlParams({ hidden: e.detail.checked })} checked={hidden}>
+          <Checkbox
+            onChange={e => setUrlParams({ hidden: e.detail.checked })}
+            checked={hidden}
+            data-testid="unmount-all"
+          >
             Unmount all
           </Checkbox>
           <Checkbox onChange={e => setUnrelatedState(e.detail.checked)} checked={unrelatedState}>
@@ -147,6 +151,7 @@ export default function () {
                 header="Header"
                 action={<Button>Action</Button>}
                 ref={alertRef}
+                data-testid="error-alert"
               >
                 {!contentSwapped ? content2 : content1}
               </Alert>
diff --git a/src/alert/__integ__/runtime-content.test.ts b/src/alert/__integ__/runtime-content.test.ts
new file mode 100644
index 0000000000..b8496c7ed2
--- /dev/null
+++ b/src/alert/__integ__/runtime-content.test.ts
@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+class RuntimeContentPage extends BasePageObject {
+  async rerenderAlerts() {
+    await this.click(createWrapper().findCheckbox('[data-testid="unmount-all"]').findNativeInput().toSelector());
+    await this.keys(['Space']);
+  }
+}
+
+function setupTest(testFn: (page: RuntimeContentPage) => Promise<void>) {
+  return useBrowser(async browser => {
+    const page = new RuntimeContentPage(browser);
+    await browser.url('#/light/alert/runtime-content/?autofocus=true');
+    await page.waitForVisible('.screenshot-area');
+    await testFn(page);
+  });
+}
+
+test(
+  'should focus the alert',
+  setupTest(async page => {
+    await page.rerenderAlerts();
+
+    await expect(page.getFocusedElementText()).resolves.toEqual(expect.stringContaining('---REPLACEMENT---'));
+    // (make sure entire page isn't focused)
+    await expect(page.getFocusedElementText()).resolves.toEqual(expect.not.stringContaining('Header'));
+  })
+);
diff --git a/src/alert/__tests__/runtime-content-initial.test.tsx b/src/alert/__tests__/runtime-content-initial.test.tsx
index 2cb26a86f9..89a90b0ce0 100644
--- a/src/alert/__tests__/runtime-content-initial.test.tsx
+++ b/src/alert/__tests__/runtime-content-initial.test.tsx
@@ -16,6 +16,8 @@ afterEach(() => {
   jest.restoreAllMocks();
 });
 
+// In a separate file as mixing react-test-renderer and @testing-library/react in a single file can cause some issues.
+// We use react-test-renderer here as it works at a slightly lower level, so doesn't "hide" the first render cycle from tests.
 describe('initialCheck method', () => {
   let initialCheck: jest.Mock<boolean>;
   beforeEach(() => {
diff --git a/src/flashbar/__tests__/runtime-content-initial.test.tsx b/src/flashbar/__tests__/runtime-content-initial.test.tsx
index d390b2f4e3..88b1b5e0f3 100644
--- a/src/flashbar/__tests__/runtime-content-initial.test.tsx
+++ b/src/flashbar/__tests__/runtime-content-initial.test.tsx
@@ -16,6 +16,8 @@ afterEach(() => {
   jest.restoreAllMocks();
 });
 
+// In a separate file as mixing react-test-renderer and @testing-library/react in a single file can cause some issues.
+// We use react-test-renderer here as it works at a slightly lower level, so doesn't "hide" the first render cycle from tests.
 describe('initialCheck method', () => {
   let initialCheck: jest.Mock<boolean>;
   const getFirstFlash = (basicRender: ReactTestRenderer) =>