From d17939881618be966d0f1604f7a4e4a60663c4b5 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:30:57 -0500
Subject: [PATCH 1/4] feat(SelectPanel): add support for announcements to
 SelectPanel.Loading

---
 .../src/drafts/SelectPanel2/SelectPanel.tsx   |  7 ++++---
 .../__tests__/SelectPanelLoading.test.tsx     | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 packages/react/src/drafts/SelectPanel2/__tests__/SelectPanelLoading.test.tsx

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
index 20b1fc67002..d7f5edd4bc2 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -12,6 +12,7 @@ import type {OverlayProps} from '../../Overlay/Overlay'
 import {StyledOverlay, heightMap} from '../../Overlay/Overlay'
 import InputLabel from '../../internal/components/InputLabel'
 import {invariant} from '../../utils/invariant'
+import { Status } from '../../internal/components/Status'
 
 const SelectPanelContext = React.createContext<{
   title: string
@@ -542,9 +543,9 @@ const SelectPanelSecondaryAction: React.FC<SelectPanelSecondaryActionProps> = ({
   else if (variant === 'checkbox') return <SecondaryCheckbox {...props} />
 }
 
-const SelectPanelLoading: React.FC<{children: string}> = ({children = 'Fetching items...'}) => {
+const SelectPanelLoading = ({children = 'Fetching items...'}: React.PropsWithChildren) => {
   return (
-    <Box
+    <Status
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -558,7 +559,7 @@ const SelectPanelLoading: React.FC<{children: string}> = ({children = 'Fetching
     >
       <Spinner size="medium" />
       <Text sx={{fontSize: 1, color: 'fg.muted'}}>{children}</Text>
-    </Box>
+    </Status>
   )
 }
 
diff --git a/packages/react/src/drafts/SelectPanel2/__tests__/SelectPanelLoading.test.tsx b/packages/react/src/drafts/SelectPanel2/__tests__/SelectPanelLoading.test.tsx
new file mode 100644
index 00000000000..5391f464f0d
--- /dev/null
+++ b/packages/react/src/drafts/SelectPanel2/__tests__/SelectPanelLoading.test.tsx
@@ -0,0 +1,19 @@
+import {render} from '@testing-library/react'
+import React from 'react'
+import {SelectPanel} from '../'
+
+describe('SelectPanel.Loading', () => {
+  it('should announce children as a polite message', () => {
+    render(<SelectPanel.Loading>test</SelectPanel.Loading>)
+
+    const liveRegion = document.querySelector('live-region')!
+    expect(liveRegion.getMessage('polite')).toBe('test')
+  })
+
+  it('should announce a default message when no children are provided', () => {
+    render(<SelectPanel.Loading />)
+
+    const liveRegion = document.querySelector('live-region')!
+    expect(liveRegion.getMessage('polite')).toBe('Fetching items...')
+  })
+})

From 48d0535d97b545b23713451be9354971be1b7780 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:31:17 -0500
Subject: [PATCH 2/4] chore: add changeset

---
 .changeset/rare-moose-destroy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rare-moose-destroy.md

diff --git a/.changeset/rare-moose-destroy.md b/.changeset/rare-moose-destroy.md
new file mode 100644
index 00000000000..9f8a27281ee
--- /dev/null
+++ b/.changeset/rare-moose-destroy.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for announcements to SelectPanel.Loading

From 6ccf122b89dc9da19d436b534624196487f5290e Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:32:51 -0500
Subject: [PATCH 3/4] chore: run format

---
 packages/react/src/drafts/SelectPanel2/SelectPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
index d7f5edd4bc2..f6a49a12956 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -12,7 +12,7 @@ import type {OverlayProps} from '../../Overlay/Overlay'
 import {StyledOverlay, heightMap} from '../../Overlay/Overlay'
 import InputLabel from '../../internal/components/InputLabel'
 import {invariant} from '../../utils/invariant'
-import { Status } from '../../internal/components/Status'
+import {Status} from '../../internal/components/Status'
 
 const SelectPanelContext = React.createContext<{
   title: string

From 42f4c3ec39bd4f1ee7e170ab4b5bdceac46a73ef Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 19 Mar 2024 10:21:50 -0500
Subject: [PATCH 4/4] Update .changeset/rare-moose-destroy.md

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
---
 .changeset/rare-moose-destroy.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/rare-moose-destroy.md b/.changeset/rare-moose-destroy.md
index 9f8a27281ee..4a8dfe7daff 100644
--- a/.changeset/rare-moose-destroy.md
+++ b/.changeset/rare-moose-destroy.md
@@ -2,4 +2,4 @@
 '@primer/react': minor
 ---
 
-Add support for announcements to SelectPanel.Loading
+experimental/SelectPanel: Add support for announcements to SelectPanel.Loading