From fb0113d6fb9e844c4193b3eeb549ea2c3911a625 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Fri, 17 Jan 2025 11:27:50 -0500
Subject: [PATCH] docs: update dynamic button examples to use AriaAlert (#5548)

* docs: update example to use AriaAlert

* docs: make announcement examples more discoverable

* Revert "docs: make announcement examples more discoverable"

This reverts commit 996f1abb7cba036b5f2c496806538c81c0933313.

* Don't explicitly specify stories so that all stories get pulled in

* Set to empty array

* Just individually specify
---
 packages/react/src/Banner/Banner.docs.json            | 3 +++
 packages/react/src/Banner/Banner.examples.stories.tsx | 2 +-
 packages/react/src/Button/Button.examples.stories.tsx | 8 ++++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/Banner/Banner.docs.json b/packages/react/src/Banner/Banner.docs.json
index 9a22b629a39..b6a33c127e5 100644
--- a/packages/react/src/Banner/Banner.docs.json
+++ b/packages/react/src/Banner/Banner.docs.json
@@ -46,6 +46,9 @@
     },
     {
       "id": "experimental-components-banner-features--custom-icon"
+    },
+    {
+      "id": "experimental-components-banner-examples--with-announcement"
     }
   ],
   "props": [
diff --git a/packages/react/src/Banner/Banner.examples.stories.tsx b/packages/react/src/Banner/Banner.examples.stories.tsx
index cb65d92e850..bf590d032e0 100644
--- a/packages/react/src/Banner/Banner.examples.stories.tsx
+++ b/packages/react/src/Banner/Banner.examples.stories.tsx
@@ -46,7 +46,7 @@ export const WithUserAction = () => {
   )
 }
 
-export const WithDynamicContent = () => {
+export const WithAnnouncement = () => {
   type Choice = 'one' | 'two' | 'three'
   const messages: Map<Choice, string> = new Map([
     ['one', 'This is a message for choice one'],
diff --git a/packages/react/src/Button/Button.examples.stories.tsx b/packages/react/src/Button/Button.examples.stories.tsx
index 3ea20fc9be2..6c6d0558843 100644
--- a/packages/react/src/Button/Button.examples.stories.tsx
+++ b/packages/react/src/Button/Button.examples.stories.tsx
@@ -3,7 +3,7 @@ import type {Meta} from '@storybook/react'
 import {Button} from '.'
 import {DownloadIcon} from '@primer/octicons-react'
 import {Banner} from '../experimental'
-import {AriaStatus} from '../live-region'
+import {AriaStatus, AriaAlert} from '../live-region'
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button/Examples',
@@ -69,7 +69,11 @@ export const LoadingStatusAnnouncementError = () => {
 
   return (
     <>
-      {!loading && error ? <Banner title="Export failed" variant="critical" /> : null}
+      {!loading && error ? (
+        <AriaAlert>
+          <Banner title="Export failed" variant="critical" />
+        </AriaAlert>
+      ) : null}
 
       <Button loading={loading} leadingVisual={DownloadIcon} onClick={onClick('error')}>
         Export (error)