diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index ac2fbb6d89f..2b12082c505 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -556,14 +556,16 @@ export class Select implements ComponentInterface { .filter((cls) => cls !== 'hydrated') .join(' '); const optClass = `${OPTION_CLASS} ${copyClasses}`; + const isSelected = isOptionSelected(selectValue, value, this.compareWith); return { - role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '', + role: isSelected ? 'selected' : '', text: option.textContent, cssClass: optClass, handler: () => { this.setValue(value); }, + ...(isSelected ? { htmlAttributes: { 'aria-description': 'selected' } } : {}), } as ActionSheetButton; }); diff --git a/core/src/components/select/test/a11y/select.e2e.ts b/core/src/components/select/test/a11y/select.e2e.ts index 063add891dc..55416a982c4 100644 --- a/core/src/components/select/test/a11y/select.e2e.ts +++ b/core/src/components/select/test/a11y/select.e2e.ts @@ -3,7 +3,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => { - test.describe(title('textarea: a11y'), () => { + test.describe(title('select: a11y'), () => { test('default layout should not have accessibility violations', async ({ page }) => { await page.setContent( ` @@ -111,3 +111,39 @@ configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => { }); }); }); + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('select: aria attributes'), () => { + test('should have a aria-description on the selected option when action sheet interface is open', async ({ + page, + }) => { + await page.setContent( + ` + + Apple + Banana + Orange + + `, + config + ); + + const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); + + const select = page.locator('ion-select'); + + await select.click(); + await ionActionSheetDidPresent.next(); + + const selectedOption = page.locator('.action-sheet-selected'); + await expect(selectedOption).toHaveAttribute('aria-description', 'selected'); + + // Check that the attribut is not added to non-selected option + const nonSelectedOption = page.locator('.select-interface-option:not(.action-sheet-selected)').first(); + await expect(nonSelectedOption).not.toHaveAttribute('aria-description'); + }); + }); +});