fix(action-sheet): restore action-sheet-selected class on non-radio buttons

[aeharding]

Issue number: resolves #31090

---

What is the current behavior?

Buttons configured with role: "selected" no longer receive the action-sheet-selected CSS class. Userland styling that targets .action-sheet-selected (the documented hook for marking the active option — bold text, custom checkmarks, etc.) silently stopped working as of 8.7.12.

This regressed in #30769 (fix(select, action-sheet): use radio role for options). The new render path computes the button's class as:

class={{
  ...buttonClass(b),
  'action-sheet-selected': isActiveRadio,
}}

buttonClass(b) already emits 'action-sheet-selected': true for role: "selected" (via [action-sheet-${button.role}]]: button.role !== undefined), but the second key with the same name overrides it. For any non-radio button isActiveRadio is false, so the class is dropped from the rendered <button>.

Repro

<ion-action-sheet id="sheet" header="Choose"></ion-action-sheet>
<script type="module">
  await customElements.whenDefined("ion-action-sheet");
  const sheet = document.getElementById("sheet");
  sheet.buttons = [
    { text: "Option A" },
    { text: "Option B", role: "selected" },
    { text: "Cancel", role: "cancel" },
  ];
  await sheet.present();
</script>

In 8.7.11 the Option B button gets action-sheet-selected. In 8.7.12+ it does not.

What is the new behavior?

• Only override action-sheet-selected based on isActiveRadio when the button actually participates in the radio group (b.htmlAttributes?.role === 'radio'). For non-radio buttons, the class map produced by buttonClass(b) is left untouched, so role: "selected" keeps emitting action-sheet-selected exactly as it has since the component was introduced.
• Adds a spec-test regression covering the role: "selected" case.

This preserves the new radio-group behavior introduced in #30769 (when the button is a radio, action-sheet-selected follows activeRadioId) and restores the documented public API.

Does this introduce a breaking change?

• Yes
• No

Other information

• The minified output for the lazy + custom-elements bundles becomes Object.assign(Object.assign({}, buttonClass(b)), isRadio && {"action-sheet-selected": isActiveRadio}). When isRadio is false, Object.assign(target, false) is a no-op and the class set by buttonClass(b) is preserved.
• Verified in a real consumer app on 8.8.4: with this patch built and installed locally, role: "selected" once again renders class="... action-sheet-selected ..." on the <button>.

Made with Cursor

[vercel]

@aeharding is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

[thetaPC]

Thank you for the fix! Just requesting minor changes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 5, 2026 10:39pm

[thetaPC]

LGTM, thank you!!

[ShaneK]

Thanks for the fix! This has been included in Ionic Framework 8.8.6!