Tom Byers 7fd034a83f Change how live region works with API key JS ...

Includes implementation of new code on Reply-to
email addresses page.

The existing code put the live region on the
module element so the id and button were
read out when the state changed.

The report from the Digital Accessibility Centre
(DAC) said screenreader users were confused by the
content changing because it wasn't announced.

These changes attempt to make the state changes
clearer by:
1. moving the live region out into a separate
  element so we can better control what is
  announced
2. adding hidden text around to the button and text
  above (sometimes the id, sometimes the 'Copied
  to clipboard' text) to give more context

When the id is copied to clipboard, the button
changes but this is not announced as the
live-region text takes precedence (due to being
set to 'assertive'). Because of this, hidden text
has been added in change 2 to explain what the new
button does.

2020-08-25 10:54:42 +01:00

3.0 KiB

Raw Blame History

View Raw