search

ryersondmp / sa11y

Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.
https://sa11y.netlify.app
Other
281 stars 44 forks source link

Not working when JS changes the DOM #40

Closed markconroy closed 2 years ago

markconroy commented 2 years ago

Hi,

Thanks for this library, it's great.

One issue we have found is that if our JS changes the DOM sa11y doesn't breaks it. Here's my example:

I have an accordion, which uses h3 for the accordion title and leave the accordion body visible. Then, if JS is available, we use progressive enhancement to grab this h3, create a button element, and wrap the h3 with the button element, and hide the accordion body. This button is then used to as the trigger to show/hide the accordion body.

However, sa11y is doing 2 things (I think):

  1. It reads the rendered HTML that the server sends, so is reading the h3 and not the updated element which now has a button, and
  2. It stops the event listener on the button from working. button.addEventListener('click', ...) doesn't do anything any more.

We can fix it by:

  1. Creating the button within the HTML (but we'd prefer not to do that for progressive enhancement reasons), or
  2. Adding .accordion to the containerIgnore array (this is what we've currently done while figuring out a better fix (hence this issue!)

Have you any thoughts on this, or how we might get sa11y to work with the updated DOM?

adamchaboryk commented 2 years ago

Hey @markconroy,

Thanks for the feedback and reporting the bug!

It's a strange bug, but I managed to replicate the issue and determined that my ruleset that flags excessive all caps text is the cause.

In the meantime, if you set allCapsQA: false that should fix it. Although I'll have a proper fix for this next release. I'll keep you posted.

Cheers!

markconroy commented 2 years ago

You're a star. Thanks so much for the quick response.

adamchaboryk commented 2 years ago

It should be fixed now! 🙂

Please let me know if you come across any other issues (or have any other feedback)!

markconroy commented 2 years ago

Works a treat. Thanks.