fix(select): use aria description for selected option within action sheet

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;
     });
 

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(
+        `
+          <ion-select label="Fruit" value="apple" interface="action-sheet">
+            <ion-select-option value="apple">Apple</ion-select-option>
+            <ion-select-option value="banana">Banana</ion-select-option>
+            <ion-select-option value="orange">Orange</ion-select-option>
+          </ion-select>
+        `,
+        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');
+    });
+  });
+});