mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-02 02:35:20 +08:00
49f96d7f1e
Issue number: resolves #30040 --------- ## 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 - [X] No ## Testing: - ✅ [ActionSheet Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/action-sheet/test/a11y) - ✅ [Alert Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/alert/test/a11y) - ✅ [DateTime Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime/test/basic) - ✅ [DateTime Button Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime-button/test/basic) - ✅ [Modal Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/modal/test/a11y) - ✅ [Popover Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/popover/test/basic) - ✅ [Select Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/select/test/basic) - ✅ [Picker, PickerColumn and PickerColumnOption Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/picker/test/basic) - ✅ [Toast Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/toast/test/a11y) ## Other Information Dev build: `8.7.4-dev.11756388042.1a103a79` --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>