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>
@ionic/angular
Ionic Angular specific building blocks on top of @ionic/core components.
Related
License
Testing Local Ionic Framework with ng add
This guide shows you how to test the local Ionic Framework build with a new Angular application using ng add. This is useful for development and testing changes before publishing.
Prerequisites
- Node.js and npm installed
- Angular CLI installed globally (
npm install -g @angular/cli)
Build Local Ionic Framework
-
Clone the repository (if not already done):
git clone https://github.com/ionic-team/ionic-framework.git cd ionic-framework -
Pull the latest from
maingit pull origin main -
Install dependencies and build the
corepackage:cd core npm install npm run build -
Install dependencies, sync the
corebuild and build the Angular package:cd ../packages/angular npm install npm run sync npm run build -
Create a tarball:
cd dist npm pack -
Copy the tarball to Downloads:
cp ionic-angular-*.tgz ~/Downloads/ionic-angular.tgz
Test with New Angular App
-
Create a new Angular app:
# Change to whichever directory you want the app in cd ~/Documents/ ng new my-app --style=css --ssr=false --zoneless=false cd my-app -
Install the local
@ionic/angularpackage:npm install ~/Downloads/ionic-angular.tgz -
Run
ng add:ng add @ionic/angular --skip-confirmation -
Serve the app:
ng serve
The local Ionic Framework build is now active in the Angular app. Changes to the Ionic source code require rebuilding the packages and reinstalling the tarball to see updates.
Project Structure
common
This is where logic that is shared between lazy loaded and standalone components live. For example, the lazy loaded IonPopover and standalone IonPopover components extend from a base IonPopover implementation that exists in this directory.
Note: This directory exposes internal APIs and is only accessed in the standalone and src submodules. Ionic developers should never import directly from @ionic/angular/common. Instead, they should import from @ionic/angular or @ionic/angular/standalone.
standalone
This is where the standalone component implementations live. It was added as a separate entry point to avoid any lazy loaded logic from accidentally being pulled in to the final build. Having a separate directory allows the lazy loaded implementation to remain accessible from @ionic/angular for backwards compatibility.
Ionic developers can access this by importing from @ionic/angular/standalone.
src
This is where the lazy loaded component implementations live.
Ionic developers can access this by importing from @ionic/angular.