ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.52k forks source link

bug: Modals do not support switch access (a11y) under Android #29806

Open gerngroh opened 2 weeks ago

gerngroh commented 2 weeks ago

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

The ion-menu component and also other modals (i.e. Controller Action Sheets) are not recognized by the Android Switch Access scanner.

For demonstration, I have created a demo app via the sidemenu template. The items within the ion-menu component cannot be selected via Switch Access.

However, when I open the UI Components link in the demo app, the side-menu on the HTML page is accessible via Switch Access. (https://ionicframework.com/docs/components in Chrome browser)

Expected Behavior

Menu items should be selectable by Android Switch Access.

Steps to Reproduce

  1. Enable Switch Access via Settings > Accessibility > Switch Access on your Android device
  2. Open the demo project.
  3. Run on Android device.
  4. Open the side menu via Switch Access -> the burger menu button is accessible.
  5. The side menu is visible, but no menu-items are accessible

Code Reproduction URL

https://github.com/gerngroh/a11y-switch-access/

Ionic Info

ionic info [ERROR] Error loading @ionic/angular package.json: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package' is not defined by "exports" in /Users/gerngroh/Documents/Entwicklung/ionic-demos/a11y-switch-access/a11y-switch-access/node_modules/@ionic/angular/package.json

Ionic:

Ionic CLI : 5.4.16 (/Users/gerngroh/.nvm/versions/node/v18.18.0/lib/node_modules/ionic) Ionic Framework : not installed @angular-devkit/build-angular : 18.2.1 @angular-devkit/schematics : 18.2.1 @angular/cli : 18.2.1 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/core : 6.1.2

Utility:

cordova-res : not installed native-run : 2.0.1

System:

NodeJS : v18.18.0 (/Users/gerngroh/.nvm/versions/node/v18.18.0/bin/node) npm : 9.8.1 OS : macOS Unknown

Additional Information

No response

gerngroh commented 2 weeks ago

When the side-menu is open and I remove the aria-hidden=true attribute from the ion-router-outlet Element, via Chrome debugger, the menu-items start working with Switch Access.

gerngroh commented 2 weeks ago

When i move the aria-hidden=true attribute from the ion-router-outlet Element to its first child, the ion-menu and also controller based action-sheets are working with Switch Access.