search

nvaccess / nvda

NVDA, the free and open source Screen Reader for Microsoft Windows
https://www.nvaccess.org/
Other
2.12k stars 638 forks source link

NVDA Does not focus on web components that have a shadow DOM #13026

Open flyer1 opened 3 years ago

flyer1 commented 3 years ago

We use ionic framework for a mobile application that also has a desktop representation (therefore we use ionic on desktop as well where applicable). Ionic uses web components and many have a shadow DOM.

When NVDA is running, tabbing to components that have a shadow DOM does not occur. Instead, NVDA's yellowish focus rectangle can be seen on the last tabbable control. If you hit enter or the space bar to trigger what you think is the current control, it triggers the last control instead.

We find this problem with ionics <ion-select> and <ion-toggle>. However, it does not occur with <ion-input> b/c this web component does not have a shadow DOM.

The shadow DOM is hidden behind element.shadowRoot. Therefore statements like parentElement.querySelectorAll('') will skip the shadow DOM elements. Perhaps this is why NVDA is not able to handle these types of components?

Example: Tab thru a page with a button and an ion-select. Ionic make it look like the ion-select has focus but NVDA still shows the yellowish focus rectangle still on the button. Therefore when you press the enter key, the button is triggered instead of the ion-select. 

<button>Test</button>
<ion-list>
   <ion-item>
       <ion-label>Foo</ion-label>
       <ion-select></ion-select>
   </ion-item>
</ion-list>

This blog post describes the issue very well: https://nolanlawson.com/2021/02/13/managing-focus-in-the-shadow-dom/

Adriani90 commented 21 hours ago

@flyer1 are you still having this issue with NVDA 2024.4.1? In which browsers did you encounter this issue?

cc: @jcsteh maybe you have any thoughts on this as well.