Skip to content

bug: ion-select with popover interface causes aria issues #30410

@rtarling

Description

@rtarling

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <ion-radio.sc-ion-select-popover-md md in-item radio-label-placement-start radio-checked>
Ancestor with aria-hidden: <ion-popover.select-popover md popover-side-bottom#ion-overlay-4>

Expected Behavior

No aria issue

Steps to Reproduce

Just using the ionic example given in the documentation causes the problem when copied into my app.

https://ionicframework.com/docs/api/select

Code Reproduction URL

N/A

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (C:\Users\rolan\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/vue 8.5.7

Capacitor:

Capacitor CLI : 7.2.0
@capacitor/android : 7.2.0
@capacitor/core : 7.2.0
@capacitor/ios : 7.2.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.14.0 (C:\Program Files\nodejs\node.exe)
npm : 11.3.0
OS : Windows 10

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions