Access4all / adg

Accessibility Developer Guide
http://www.accessibility-developer-guide.com
Other
187 stars 36 forks source link

ADG-421 Contents structured bookmarklet and shadow DOM #427

Closed backflip closed 6 months ago

backflip commented 7 months ago

This PR updates the Contents structured bookmarklet to traverse shadow roots, too.

Before: image

After (more elements are highlighted): image

It uses the same approach as https://github.com/hinderlingvolkart/h123/pull/5. See https://github.com/Access4all/adg/pull/427/commits/ab95120622b0cc1c67365e82c7a037de5be8792e for actual change.

While working on this, I got the impression that the whole escaping was not needed anymore. Tested in current Chrome, Firefox, Edge and Safari on current macOS.

Demo: https://deploy-preview-427--accessibility-developer-guide.netlify.app/setup/browsers/bookmarklets/contents-structured/

Fixes #421

netlify[bot] commented 7 months ago

Deploy Preview for accessibility-developer-guide ready!

Name Link
Latest commit 5bf7691d697404138a91606ee0856f78dafeabf3
Latest deploy log https://app.netlify.com/sites/accessibility-developer-guide/deploys/660e4f9823e7530008d57bbe
Deploy Preview https://deploy-preview-427--accessibility-developer-guide.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

NicSR commented 6 months ago

I checked it with different sites and sometimes I have an unlovley view: grafik or: grafik

is it possible to change it so that everything is readable?

backflip commented 6 months ago

I checked it with different sites and sometimes I have an unlovley view: grafik or: grafik

is it possible to change it so that everything is readable?

@NicSR Possibly! You could check the original, they might have a better styling approach. But as this is unrelated to the change here, I would tackle it separately.