Merge pull request #3591 from alphagov/fix-copy-to-clipboard

Fix copy to clipboard

app/__init__.py

@@ -807,6 +807,7 @@ def add_template_filters(application):
         format_notification_status_as_url,
         format_number_in_pounds_as_currency,
         formatters.formatted_list,
+        formatters.normalise_lines,
         nl2br,
         format_phone_number_human_readable,
         format_thousands,

app/assets/javascripts/apiKey.js

@@ -6,13 +6,24 @@
   Modules.ApiKey = function() {
 
     const states = {
-      'keyVisible': (key, thing) => `
-        <span class="api-key__key">${key}</span>
-        <input type='button' class='govuk-button govuk-button--secondary api-key__button--copy' value='Copy ${thing} to clipboard' />
+      'keyVisible': (options) => `
+        <span class="api-key__key">
+          ${options.keyLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.key}
+        </span>
+        <span class="api-key__notice govuk-visually-hidden" aria-live="assertive">
+          ${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
+        </span>
+        <button class="govuk-button govuk-button--secondary api-key__button--copy">
+          Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
+        </button>
       `,
-      'keyCopied': thing => `
-        <span class="api-key__key">Copied to clipboard</span>
-        <input type='button' class='govuk-button govuk-button--secondary api-key__button--show' value='Show ${thing}' />
+      'keyCopied': (options) => `
+        <span class="api-key__notice" aria-live="assertive">
+          <span class="govuk-visually-hidden">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
+        </span>
+        <button class="govuk-button govuk-button--secondary api-key__button--show">
+          Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
+        </button>
       `
     };
 
@@ -30,24 +41,38 @@
     this.start = function(component) {
 
       const $component = $(component),
-            key = $component.data('key'),
-            thing = $component.data('thing');
+            stateOptions = {
+              key: $component.data('key'),
+              thing: $component.data('thing')
+            },
+            name = $component.data('name');
+
+      // if the name is distinct from the thing:
+      // - it will be used in the rendering
+      // - the key won't be identified by a heading so needs its own label
+      if (name !== stateOptions.thing) {
+        stateOptions.name = name;
+        stateOptions.keyLabel = true;
+      }
 
       $component
         .addClass('api-key')
         .css('min-height', $component.height())
-        .html(states.keyVisible(key, thing))
-        .attr('aria-live', 'polite')
+        .html(states.keyVisible($.extend({ 'onload': true }, stateOptions)))
         .on(
           'click', '.api-key__button--copy', () =>
             this.copyKey(
               $('.api-key__key', component)[0], () =>
-                $component.html(states.keyCopied(thing))
+                $component
+                  .html(states.keyCopied(stateOptions))
+                  .find('.govuk-button').focus()
             )
         )
         .on(
           'click', '.api-key__button--show', () =>
-            $component.html(states.keyVisible(key, thing))
+            $component
+              .html(states.keyVisible(stateOptions))
+              .find('.govuk-button').focus()
         );
 
       if ('stickAtBottomWhenScrolling' in GOVUK) {

app/assets/stylesheets/components/api-key.scss

@@ -9,6 +9,7 @@
     margin-bottom: 5px;
   }
 
+  &__notice,
   &__key {
     font-family: monospace;
     display: block;

app/templates/components/api-key.html

@@ -1,10 +1,13 @@
-{% macro api_key(key, name=None, thing="API key") %}
-  {% if name %}
+{% macro api_key(key, name, thing="API key") %}
+  {% if name == thing %}
     <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 }}" data-name="{{ name }}">
+    <span class="api-key__key">
+      {% if name != thing %}<span class="govuk-visually-hidden">{{ thing }}: </span>{% endif %}{{ key }}
+    </span>
+    <span class="api-key__notice" aria-live="assertive"></span>
   </div>
 {% endmacro %}

app/templates/views/api/keys/show.html

@@ -24,7 +24,8 @@
 
       {{ api_key(
         '{}-{}-{}'.format(key_name, service_id, secret),
-        'API key'
+        name='API key',
+        thing='API key'
       ) }}
 
       {{ page_footer(

app/templates/views/service-settings/email_reply_to.html

@@ -34,7 +34,7 @@
           <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a>
         {% endif %}
         {% if current_service.count_email_reply_to_addresses > 1 %}
-          {{ api_key(item.id, thing="ID") }}
+          {{ api_key(item.id, name=item.email_address, thing="ID") }}
         {% endif %}
       </div>
     {% endfor %}

app/templates/views/service-settings/letter-contact-details.html

@@ -43,7 +43,8 @@
         <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_letter_contact', service_id =current_service.id, letter_contact_id = item.id) }}">Change</a>
         {% endif %}
         {% if letter_contact_details|length  > 1 %}
-          {{ api_key(item.id, thing="ID") }}
+          {% set first_line_of_contact_block = item.contact_block|normalise_lines|first %}
+          {{ api_key(item.id, name=first_line_of_contact_block, thing="ID") }}
         {% endif %}
       </div>
     {% endfor %}

app/templates/views/service-settings/sms-senders.html

@@ -36,7 +36,7 @@
           <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">Change</a>
         {% endif %}
         {% if current_service.count_sms_senders > 1 %}
-          {{ api_key(item.id, thing="ID") }}
+          {{ api_key(item.id, name=item.sms_sender, thing="ID") }}
         {% endif %}
       </div>
     {% endfor %}