bug: ion-modal has no aria-label attribute

[Ksan8]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
In an Ionic app that uses ion-modal, the modal wrapper (with CSS class of the same name) has an attribute of role="dialog", but no aria-label or title. This causes the app to fail accessibility checks, such as axe browser extension.

The issue axe finds is:

• ARIA dialog and alertdialog nodes must have an accessible name

Expected behavior:
The modal wrapper should have either an aria-label attribute or a title, to go with the role attribute.

Steps to reproduce:

1. Clone ionicAngular (a minimal Ionic Angular app)
2. Install the axe browser extension if not already installed
3. Run ionic serve from the app root to open the app in the browser
4. Click on "Show Modal"
5. Open DevTools and click on the axe tab
6. Choose "Scan all of my page"
7. Notice the issue listed above appears in the axe results

Related code:

Sample Ionic Angular app: https://github.com/Ksan8/ionicAngular

Other information:

This is considered an accessibility issue with serious impact. More info on this specific rule can be found on Deque University's documentation for axe.

Ionic info:

Ionic:

   Ionic CLI                     : 6.13.1 (/Users/keziawineberg/.nvm/versions/node/v12.20.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

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

System:

   NodeJS : v12.20.0 (/Users/keziawineberg/.nvm/versions/node/v12.20.0/bin/node)
   npm    : 7.5.4
   OS     : macOS Big Sur

[liamdebeasi]

Thanks for the issue. The team discussed this issue, and Ionic is working as intended. Developers must provide their own accessible labels.

We did explore setting a default label of modal. The Axe violation is happening because there is no useful label provided to narrators regarding the modal. While setting a default label would make the violation go away, a label of modal provides little to no useful information about what is being shown in the modal. Since the Axe violation would not show up, some developers may think that their modals are accessible when they are lacking a useful label.

We updated the ion-modal Accessibility Guide to provide more information on how to add accessible labels to your modal. I am going to close this. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.