search

raunofreiberg / axe-mode

Accessibility testing visualized
MIT License
194 stars 5 forks source link

feat: catch DOM mutation violations #12

Closed raunofreiberg closed 4 years ago

raunofreiberg commented 4 years ago

Closes #8

For testing, I've added a trivial DOM mutation by asynchronously setting the alt tag on img. Generally, I think this works. Though, there's a weird bug that I can't figure out:

gif

  1. Refresh the page
  2. All nodes are in violation
  3. img gets a valid alt attribute after 3 seconds, thus it is no longer in violation
  4. The overlays of input elements disappear

If I resize the window, the input overlays reappear.

I think the problem is with observing the position of the overlay:

https://github.com/raunofreiberg/axe-mode/blob/57809ed8e5e1455653046e1f4cd350fbc4543b60/src/index.tsx#L88-L90

If I add this, the overlays persists its position:

const bounds = targetNode.getBoundingClientRect();
setOverlayPosition(overlayNode, bounds);

@chancestrickland maybe you can shine some light here. I might be doing something wrong! 😄