You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
bug: ion-select (interface="modal") renders invalid ARIA structure: ion-list role conflicts with ion-radio-group #31074
I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
In ion-select-modal, the DOM structure includes:
ion-content
ion-list with role="list" automatically applied by Ionic
Inside it, ion-radio-group with role="radiogroup"
A list of ion-items representing the options each containing an with group "radio"
This produces an invalid semantic hierarchy because enforces a list container semantics, it must contain elements with role "listitem"
Expected Behavior
Option A (preferred)
Remove the ion-list wrapper entirely when rendering ion-radio-group, allowing the following hyerarchy inside
ion-radio-group (role="radiogroup")
ion-radio (role="radio")
Option B
If ion-list is required for styling/layout purposes, it must not impose role="list" semantics, or:
Each radio should be wrapped in a container element with role="listitem"
Ensuring valid nesting:
role="list"
role="listitem"
role="radiogroup"
role="radio"
Steps to Reproduce
Create an ion-select with interface="modal"
Provide multiple ion-select-option values
Open the select modal
Inspect DOM structure inside ion-select-modal, or analyze with accessibility tools
Observe:
ion-list wrapping the ion-radio-group
role="list" applied to the container
Activity