search

lit / lit-element

LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
https://lit-element.polymer-project.org
BSD 3-Clause "New" or "Revised" License
4.49k stars 319 forks source link

Accessibility => lit-element + Google Chrome Screen Reader Extension => UI Design is Changed #1204

Closed VijayanRamachandran closed 3 years ago

VijayanRamachandran commented 3 years ago

Hi,

We are facing a problem related to Accessibility topic for LitElement control in combination with Google Chrome Screen Reader Extension.

Below, a quick sample WebComponent ( abc-toggle.js ) created using LitElement and hosted in chrome.

abc-toggle.js

image

Until enabling chrome screen reader everything works as expected...

Google Chrome Screen Reader => https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en

Before enabling chrome screen reader

The above WebComponent is displayed in HTML page as below

image

After enabling Chrome Screen Reader

For accessibility purpose after enabling the extension, the above WebComponent is displayed in HTML page as below

image

Without Chrome Screen Reader

DOM Structure

image

Styles applied to div tag inside #shadow-root

image

After enabling Chrome Screen Reader

DOM Structure

image

Styles applied to div tag inside #shadow-root

image

PS:

  1. Hereby below, the entire WebComponent along with package.json ToogleButton.zip

  2. I tried hosting the same in chrome Unsafe mode and there also same problem.

Can you please help us regarding this or if there is already some information related to scenario please let me know ?

justinfagnani commented 3 years ago

I filed a bug with the extension here: https://bugs.chromium.org/p/chromium/issues/detail?id=1232133

But it looks like the extension is in maintenance mode and that users should use the built-in screen reader: https://support.google.com/chromebook/answer/7031755

VijayanRamachandran commented 3 years ago

@justinfagnani , @AndrewJakubowicz : Thanks for the help and fast response...

AndrewJakubowicz commented 3 years ago

Hi @VijayanRamachandran,

I made a small patch to the extension that should improve the style situation. The extension still breaks parts of pages in certain difficult contexts - i.e. iframes. But from my testing it's far more reliable.

Otherwise echoing Justin that the extension is in maintenance mode. Let me know how the updated extension works and thank you for the issue report!