diff --git a/.changeset/fair-trainers-battle.md b/.changeset/fair-trainers-battle.md new file mode 100644 index 00000000000..7993793d74d --- /dev/null +++ b/.changeset/fair-trainers-battle.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Add aria-labelledby to listbox within draft SelectPanel diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..a97c4a4d491 Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..95f1127b429 Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..823c43d946e Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-linux.png new file mode 100644 index 00000000000..7f6e34e2987 Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..a97c4a4d491 Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-colorblind-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..494ff776e7c Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..879ebfdc3b0 Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-linux.png new file mode 100644 index 00000000000..fcc0a933be4 Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..494ff776e7c Binary files /dev/null and b/.playwright/snapshots/components/drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-light-tritanopia-linux.png differ diff --git a/e2e/components/drafts/SelectPanel.test.ts b/e2e/components/drafts/SelectPanel.test.ts new file mode 100644 index 00000000000..b53326f1916 --- /dev/null +++ b/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() + }) + }) + } + }) +}) diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx index 04669a33f13..7d9f4dbae2f 100644 --- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx @@ -299,6 +299,7 @@ const Panel: React.FC = ({ selectionAttribute: 'aria-selected', selectionVariant: selectionVariant === 'instant' ? 'single' : selectionVariant, afterSelect: internalAfterSelect, + listLabelledBy: `${panelId}--title`, }} > {childrenInBody}