bug: Chrome screen reader support

[AchaissonGGF]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When loading a page while using the Chrome Screen Reader (based on ChromeVox) the page fails to load and the following error is presented in console. This happens with a fresh starter project as well.

Unhandled Promise rejection: Cannot read properties of undefined (reading 'includes') ; Zone: ; Task: null ; Value: TypeError: Cannot read properties of undefined (reading 'includes') at addStyle (index-06cd27b1.js:144:57) at attachStyles (index-06cd27b1.js:155:21) at index-06cd27b1.js:1146:9 at Generator.next () at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:25:1) at asyncToGenerator.js:32:1 at new ZoneAwarePromise (zone.js:1340:1) at asyncToGenerator.js:21:1 at updateComponent (index-06cd27b1.js:1139:22) TypeError: Cannot read properties of undefined (reading 'includes') at addStyle (http://localhost:4200/vendor.js:11537:55) at attachStyles (http://localhost:4200/vendor.js:11550:19) at http://localhost:4200/vendor.js:12692:7 at Generator.next () at asyncGeneratorStep (http://localhost:4200/vendor.js:117234:24) at _next (http://localhost:4200/vendor.js:117256:9) at http://localhost:4200/vendor.js:117263:7 at new ZoneAwarePromise (http://localhost:4200/polyfills.js:4478:33) at http://localhost:4200/vendor.js:117252:12 at updateComponent (http://localhost:4200/vendor.js:12728:17)

Expected Behavior

The page should load and the user should be able to use the page with the screen reader.

Steps to Reproduce

Open or refresh a page in an Ionic project while using the Screen Reader extension for Chrome.

Code Reproduction URL

(https://github.com/AchaissonGGF/Ionic-Test)

Ionic Info

Ionic:

Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.0.8 @angular-devkit/build-angular : 13.2.3 @angular-devkit/schematics : 13.2.3 @angular/cli : 13.2.3 @ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.4.3 @capacitor/android : 3.4.3 @capacitor/core : 3.4.3 @capacitor/ios : 3.4.3

Utility:

cordova-res : 0.15.4 native-run (update available: 1.6.0) : 1.5.0

System:

NodeJS : v14.19.0 (/home/achaisson/.nvm/versions/node/v14.19.0/bin/node) npm : 6.14.16 OS : Linux 5.13

Additional Information

Link to screen reader: https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[sean-perkins]

This is an odd issue, with the root exception occurring from: https://github.com/ionic-team/stencil/blob/main/src/runtime/styles.ts#L90

The issue is reproducible across the hydrated and custom element bundle. Confirmed in both Angular with the reproduction provided and within React (Ionic starter app).

The issue is not reproducible in a Stencil app starter.

When the exception occurs, no web component is initialized.

The extension is stated as being in maintenance mode. If the issue cannot be reproduced in the primary screen readers (ChromeVox on Chrome OS, VoiceOver on Mac, JAWS, NVDA or Narrator on Windows, etc.), then this issue may just be the result of the way that the extension injects custom content into the webpage.

[AchaissonGGF]

I managed to get a hold of a chromebook to test it on ChromeOS and it worked. Previous testing I did showed that JAWS, NVDA, Narrator worked on Windows. So it does appear to solely be happening with the extension.

[liamdebeasi]

Hi there,

Given that the browser extension is in maintenance mode, I am going to close this. If this issue reproduces with other maintained screen readers such as JAWS, NVDA, etc please let me know and we can take another look. Thanks!

[ionitron-bot[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.