search

michaeldera / image-accessibility-extension

A Google Chrome and Microsoft Edge extension to add alt attributes to images on webpages without them
MIT License
6 stars 3 forks source link

Issues with dynamically loaded content #8

Open nadchif opened 4 years ago

nadchif commented 4 years ago

Describe the bug Right now everything works just well, when Image a11y processes the page on initial load. However, when content is loaded or changes dynamically, the alt labels are not updated. This leads to scenario where 'apples' are still labelled as 'oranges'.

To Reproduce Steps to reproduce the behavior:

  1. Download this gist https://gist.github.com/nadchif/211ecfab904d53880fb8e021c44c7f0b
  2. Serve on localhost with Image a11y enabled

Expected behavior Detect image src and DOM changes in order to update the alt labels dynamically

Desktop (please complete the following information):

michaeldera commented 4 years ago

Interesting observation, what would be the best way to listen on the DOM for dynamic changes to images 🤔... there should be a way to listen to each element as opposed to a diff on all elements right?

nadchif commented 4 years ago

A good place to start maybe https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.

  1. On the body --> track newly added img elements
  2. On img where we add an alt--> track src changes
michaeldera commented 4 years ago

Yes... that looks like it can work pretty well. So just added a Mutation Observer to each img child's src when we are add alt attributes....

We would also need need to add a mutation observer to the whole body and listen for new img elements as well.