fix(overlay and picker): remove aria-hidden attribute

[joselrio]

Issue number: resolves #

---

What is the current behavior?

• The usage of aria-hidden="true" attributes both on overlay and picker components was causing some console error/warnings messages.
• This was being caused due the fact of the activeElement (focused element) was inside those elements with this attribute that's equal to true in all cases.

What is the new behavior?

• There is no need of making usage of this attribute due the facts:

• 1. Once overlay is closed the focus will be redirect to the element that triggers the overlay, this way screen readers will be also redirected to the same context of focused element.
• 2. After overlay is closed, it will be set as a display: none; through the selector :host(.overlay-hidden), which by itself will disable overlay content for the screen readers.

• Removed overlay tests since they were basically checking about aria-hidden attribute.

• Updated PickerColumn and PickerColumnOption structure in order to fit the a11y needs.

• Added a focus management system to better drive users when making usage of keyboard navigation inside picker.

• Skip A11Y test validation when reported violation is color contrast related.

⚠️ NOTE:

• Reported devTools issue/warning when selecting picker is from now on expected due to focus an input that's set with tabIndex="-1" and aria-hidden="true" - Which turns into an A11Y violation when it gets focused.
  It happens that it gets focused dynamically in order to open the native numeric keyboard once user selects highlighted picker values zone, in order to allow users to insert numeric values through the keyboard.
  If this aria-hidden and tabindex are removed/updated, the existing functionality will be lost since ScreenReaders will start to ignore the updated value through the PickerChange and will be focused onto the focused input.
  This mentioned input has an onChange event that's used to update the aria-valuetext on each picker-column which is being capture by the ScreenReader.
  That said, this new devTools reported issue/warning is a false positive since A11Y behaviour is being covered through a different perspective.

Does this introduce a breaking change?

• Yes
• No

Testing:

• ✅ ActionSheet
  https://ionic-framework-git-rou-11368-ionic1.vercel.app/src/components/action-sheet/test/a11y

• ✅ Alert
  https://ionic-framework-git-rou-11368-ionic1.vercel.app/src/components/alert/test/a11y

• ✅ DateTime
  https://ionic-framework-git-rou-11368-ionic1.vercel.app/src/components/datetime/test/basic
  https://ionic-framework-git-rou-11368-ionic1.vercel.app/src/components/datetime-button/test/basic

• ✅ Modal
  https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/modal/test/a11y

• ✅ Popover
  https://ionic-framework-git-rou-11368-ionic1.vercel.app/src/components/popover/test/basic

• ✅ Select
  https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/select/test/basic

• ✅ Picker, PickerColumn and PickerColumnOption
  https://ionic-framework-git-rou-11368-ionic1.vercel.app/src/components/picker/test/basic

• ✅ Toast
  https://ionic-framework-git-rou-11368-ionic1.vercel.app/src/components/toast/test/a11y

Note:

• This will fix bug: Ionic 8+ produces Blocked aria-hidden on an element because its descendant retained focus #30240, and bug: Accessibility issue - ion-popover has aria-hidden error when dismissed #30040

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 21, 2025 11:37am