feat(SelectPanel): add support for announcements to SelectPanel.Loadi…

…ng (#4407)

* feat(SelectPanel): add support for announcements to SelectPanel.Loading

* chore: add changeset

* chore: run format

* Update .changeset/rare-moose-destroy.md

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

.changeset/rare-moose-destroy.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+experimental/SelectPanel: Add support for announcements to SelectPanel.Loading

packages/react/src/drafts/SelectPanel2/SelectPanel.tsx

@@ -10,6 +10,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 {useResponsiveValue} from '../../hooks/useResponsiveValue'
 import type {ResponsiveValue} from '../../hooks/useResponsiveValue'
 
@@ -569,9 +570,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',
@@ -585,7 +586,7 @@ const SelectPanelLoading: React.FC<{children: string}> = ({children = 'Fetching
     >
       <Spinner size="medium" />
       <Text sx={{fontSize: 1, color: 'fg.muted'}}>{children}</Text>
-    </Box>
+    </Status>
   )
 }
 

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...')
+  })
+})