test(e2e): add e2e test for SelectPanel2 default story (#4279)

* fix(SelectPanel2): add aria-labelledby to listbox

* test(e2e): add e2e test for SelectPanel2 default story

* chore: add changeset

* test(vrt): update snapshots

---------

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

.changeset/fair-trainers-battle.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add aria-labelledby to listbox within draft SelectPanel

e2e/components/drafts/SelectPanel.test.ts

@@ -0,0 +1,37 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../../test-helpers/storybook'
+import {themes} from '../../test-helpers/themes'
+
+test.describe('SelectPanel', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-selectpanel--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          await page.getByText('Assign label').click()
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `drafts.SelectPanel.Default.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-selectpanel--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await page.getByText('Assign label').click()
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

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

@@ -299,6 +299,7 @@ const Panel: React.FC<SelectPanelProps> = ({
                   selectionAttribute: 'aria-selected',
                   selectionVariant: selectionVariant === 'instant' ? 'single' : selectionVariant,
                   afterSelect: internalAfterSelect,
+                  listLabelledBy: `${panelId}--title`,
                 }}
               >
                 {childrenInBody}