diff --git a/src/scripts/templates.ts b/src/scripts/templates.ts index 04fd6a42..0d49ec36 100644 --- a/src/scripts/templates.ts +++ b/src/scripts/templates.ts @@ -322,6 +322,7 @@ const templates: TemplatesInterface = { } else { addClassesToElement(div, itemSelectable); div.dataset.choiceSelectable = ''; + div.setAttribute('aria-selected', 'false'); } return div; diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts index 9e3afe35..c593173f 100644 --- a/test-e2e/tests/select-multiple.spec.ts +++ b/test-e2e/tests/select-multiple.spec.ts @@ -147,6 +147,26 @@ describe(`Choices - select multiple`, () => { }); }); + describe('aria attributes', () => { + const testId = 'disabled-choice'; + test('aria-selected', async ({ page, bundle }) => { + const suite = new SelectTestSuit(page, bundle, testUrl, testId); + await suite.startWithClick(); + + await suite.input.press('ArrowDown'); + await expect(suite.choices.first()).toHaveAttribute("aria-selected", "false"); + await expect(suite.choices.nth(1)).toHaveAttribute("aria-selected", "true"); + await expect(suite.choices.nth(2)).toHaveAttribute("aria-selected", "false"); + await expect(suite.choices.nth(3)).not.toHaveAttribute("aria-selected"); + + await suite.input.press('ArrowUp'); + await expect(suite.choices.first()).toHaveAttribute("aria-selected", "true"); + await expect(suite.choices.nth(1)).toHaveAttribute("aria-selected", "false"); + await expect(suite.choices.nth(2)).toHaveAttribute("aria-selected", "false"); + await expect(suite.choices.nth(3)).not.toHaveAttribute("aria-selected"); + }); + }); + describe('searching choices', () => { const validValue = 'item2'; const validLabelForValue = 'Choice 2';