♿ [#2623] A11y Fix and add SpeechSynthesis pause/stop functionality

[jiromaykin]

Issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/2623

Turns out: the Pause code was in place since the beginning but wrongly implemented since there was no data-attribute,
I also added a stop function on reload because it doesn't make sense to keep on reading a page you're no longer looking at.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.59%. Comparing base (5391b5f) to head (904fd1d).
Report is 16 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #1460   +/-   ##
========================================
  Coverage    94.59%   94.59%           
========================================
  Files         1063     1063           
  Lines        39681    39681           
========================================
  Hits         37537    37537           
  Misses        2144     2144           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jiromaykin]

@pi-sigma @swrichards Please use headphones when testing this! 😄🎧
Also: keep npm run watch running and make sure to thoroughly cache-refresh your browser.

[swrichards]

As discussed on Slack: this does not seem to work on my machine, so I couldn't test this locally. @jiromaykin is looking into whether it really is a Linux thing, or a more limited set of issues. Re-request the review once we know and we'll see if there's any further changes at this point.

[jiromaykin]

As discussed on Slack: this does not seem to work on my machine, so I couldn't test this locally. @jiromaykin is looking into whether it really is a Linux thing, or a more limited set of issues. Re-request the review once we know and we'll see if there's any further changes at this point.

@pi-sigma and @swrichards :
This has to be a Linux issue. It works properly in all browsers on Browserstack. So first see if you can run this properly on Linux inside the official Chrome version from Google itself - since @alextreme claimed it is working there.

These things need to work:

1. 1st click on ‘Lees voor’ the speech should start
2. then the ‘Lees voor’ button also visibly toggles to ‘pauzeer’
3. the aria-label and title attributes of the link also toggle,
4. the second time clicking the Pauzeer button should pause the Speech Voice and change the link back to ‘Lees voor’ and also toggles all other attributes back
5. after which you can continue and click ‘Lees voor’ again, so Speech should continue where you left off, and visually looks like 'Pauzeer' again
6. +page reload, or click on another link: stops speech completely

[alextreme]

We can ignore the Firefox+Linux combination for this feature, if it works for Win+Mac that is sufficient for the time being in my eyes