Skip to content

Conversation

@thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Nov 5, 2025

Issue number: internal


What is the current behavior?

The screen reader does not announce when an option is selected within the action sheet interface. This is because the action sheet uses standard buttons, which do not support a detectable selected state via native properties or ARIA attributes like aria-checked or aria-selected, creating an inconsistent user experience across different interface types.

What is the new behavior?

  • Updated the action sheet buttons to accept role="radio"
  • Added keyboard navigation to follow the pattern for radio group
  • Added test

Does this introduce a breaking change?

  • Yes
  • No

Other information

Basic

@github-actions github-actions bot added the package: core @ionic/core package label Nov 5, 2025
@vercel
Copy link

vercel bot commented Nov 5, 2025

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

Project Deployment Preview Comments Updated (UTC)
ionic-framework Ready Ready Preview Comment Nov 15, 2025 2:19am

@thetaPC thetaPC changed the title Fw 6818 fix(select): use aria description for selected option Nov 5, 2025
@thetaPC thetaPC changed the title fix(select): use aria description for selected option fix(select): use aria description for selected option within action sheet Nov 5, 2025
@thetaPC thetaPC marked this pull request as ready for review November 5, 2025 21:11
@thetaPC thetaPC requested a review from a team as a code owner November 5, 2025 21:11
@thetaPC thetaPC requested a review from gnbm November 5, 2025 21:11
Copy link
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Extremely minor grammatical nits, feel free to ignore if you don't wanna run CI just for them 🤷‍♂️

@thetaPC thetaPC changed the title fix(select): use aria description for selected option within action sheet fix(select, action-sheet): use radio role for options Nov 13, 2025
Copy link
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, just a couple of minor things

@Watch('buttons')
buttonsChanged() {
// Initialize activeRadioId when buttons change
if (this.hasRadioButtons) {
Copy link
Member

@ShaneK ShaneK Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My only concern here is this.hasRadioButtons is only set in connectedCallback, I believe this means if buttons are set dynamically this value may become stale and this process may not trigger when it's supposed to. That's sort of an edge case for many, but it may be worth re-computing this.hasRadioButtons here, if you feel like this could be a concern. Up to you!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants