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.

app/templates/components/api-key.html

@@ -1,10 +1,11 @@
-{% macro api_key(key, name=None, thing="API key") %}
-  {% if name %}
+{% macro api_key(key, name, thing="API key", heading=True) %}
+  {% if heading %}
     <h2 class="api-key__name">
       {{ name }}
     </h2>
   {% endif %}
-  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive">
-    <span class="api-key__key">{{ key }}</span>
+  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}"{% if not heading %}data-name="{{ name }}"{% endif %}>
+    <span class="api-key__key"><span class="govuk-visually-hidden">{{ thing }}: </span>{{ key }}</span>
+    <span class="api-key__notice" aria-live="assertive"></span>
   </div>
 {% endmacro %}