From e8333345d8540996a592b86c264503499cb9ebcf Mon Sep 17 00:00:00 2001
From: Alexander Harding <noreply@harding.dev>
Date: Thu, 30 Apr 2026 22:33:49 -0500
Subject: [PATCH] fix(action-sheet): restore action-sheet-selected class for
 role="selected"

The radio-group rework in #30769 unconditionally set
`'action-sheet-selected': isActiveRadio` after spreading `buttonClass(b)`,
overwriting the class that `buttonClass` emits for `role: 'selected'`.
Only override when the button is a radio so the documented public API
keeps working.

Fixes #31090
---
 .../components/action-sheet/action-sheet.tsx  |  6 +++-
 .../test/basic/action-sheet.spec.tsx          | 35 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index beda9b01ac0..187b7ac9096 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -564,7 +564,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
           id={buttonId}
           class={{
             ...buttonClass(b),
-            'action-sheet-selected': isActiveRadio,
+            // Only override `action-sheet-selected` when this button participates
+            // in the radio group. For non-radio buttons we let `buttonClass(b)`
+            // own the class so the public `role: 'selected'` API keeps working
+            // (regression from #30769 / issue #31090).
+            ...(isRadio && { 'action-sheet-selected': isActiveRadio }),
           }}
           onClick={() => {
             if (isRadio) {
diff --git a/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx b/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx
index fce291525f2..09ae98880d4 100644
--- a/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx
+++ b/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx
@@ -59,3 +59,38 @@ describe('action sheet: disabled buttons', () => {
     await expect(cancelButton.hasAttribute('disabled')).toBe(false);
   });
 });
+
+describe('action sheet: role="selected"', () => {
+  // Regression test for https://github.com/ionic-team/ionic-framework/issues/31090
+  // Buttons with `role: "selected"` must render the `action-sheet-selected`
+  // class so that userland CSS targeting the active option keeps working.
+  it('should add the action-sheet-selected class to a button with role="selected"', async () => {
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      template: () => (
+        <ion-action-sheet
+          buttons={[
+            { text: 'Option A' },
+            { text: 'Option B', role: 'selected' },
+            { text: 'Option C' },
+            { text: 'Cancel', role: 'cancel' },
+          ]}
+          overlayIndex={1}
+        ></ion-action-sheet>
+      ),
+    });
+
+    const actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    await actionSheet.present();
+
+    const buttons = Array.from(actionSheet.querySelectorAll<HTMLButtonElement>('.action-sheet-button'));
+    const selectedButton = buttons.find((btn) => btn.textContent?.trim() === 'Option B');
+
+    await expect(selectedButton).toBeDefined();
+    await expect(selectedButton!.classList.contains('action-sheet-selected')).toBe(true);
+
+    const optionA = buttons.find((btn) => btn.textContent?.trim() === 'Option A');
+    await expect(optionA!.classList.contains('action-sheet-selected')).toBe(false);
+  });
+});