Copy codes button design pattern proposal

[DJlumb]

Pattern name - Copy codes/text button pattern
Project : HEC - Hidden Economy Conditionality - Do a tax check when renewing or applying for a license

Overview
The copy codes button helps users by reducing the amount clicks needed to copy code/piece of text and improves the experience for screen readers

Is it useful and unique?

The copy codes button is useful as it helps users to reduce the amount of clicks needed to copy a code or piece of text. From 3 down to just 1 click. It is also particularly useful for users of screen readers as it reduces the steps needed to copy a piece code/text, as the user can just tab on the screen reader and select the button to copy rather than having to type, search for the word and then copy. I can see this being useful for other teams in any situation where a code or text needs to be copied to improve the accessibility of the page and service.

The copy codes button is unique as it does not appear on the current GDS but has been inspired by the copy code button which exists in the design system.

Other components or patterns we've tried
Originally the page was tested with a summary list pattern to house the codes which was sufficient for users but could be improved upon for usability by the introduction of a copy button.

original page with summary list pattern shown below

Research on this pattern
The new copy codes button was tested with users in 1 round and it was found that it was easier to use for applicants and because of the usability benefits it was a logical choice to use. As this is a pattern already in use in the GDS as a copy code button it has some advantages as it is already being used and tested for usability . So far I think more accessibility testing still needs to be done to determine it's advantages over the existing and build on conversations with Adam Liptrot on the accessibility team.

It would be great to have some feedback and opinions on this proposal,
Dan

[nubz]

I would like to add some more detail and background to this proposal given there has been progress on the implementation.

We have been using our copy button in production now since 7 March 2022. As of today, approximately 5% of users presented with it have used it (1,479 users of 27,552). The button has changed since the original proposal was posted by Daniel Lumb. The main changes are around the content used as the button label, after accessibility audits we arrived at 2 new labels, one for the Copy state of the button and one for the Copied state (once the tax check code has been copied to clipboard):

Copy state: "Copy your tax check code"

Copied state: "Tax check code copied"

It was felt that given the singular instance of the button on our confirmation page, we had no need to repeat the actual tax check code itself within the label, however when we do use multiple copy buttons on a page we do include the unique tax check code and licence type in some visually hidden text to assist screen readers know which button they are focused on. The Nunjucks macro created that supports this type of use:

{%  macro copyButton(data = {}) %}
    <button
            type="button"
            data-clip="{{ data.clip }}"
            data-module="govuk-button"
            class="js-visible govuk-button govuk-button--secondary copy-to-clipboard not-supported"
            aria-live="assertive"
    >
        <span class="copy-content">
            {% if data.copyContent %} {{ data.copyContent }} {% else %} Copy {% endif %}
        </span>
        <span class="copied-content">
            {% if data.copiedContent %} {{ data.copiedContent }} {% else %} Copied {% endif %}
        </span>
        {%  if data.screenReaderText %}
            <span class="govuk-visually-hidden">
                {{ data.screenReaderText }}
            </span>
        {%  endif %}
    </button>
{%  endmacro -%}

We have some application level JavaScript controlling the clipboard behaviour and CSS class names on the button content to show/hide the relevant content to match the state:

  (function (window, document, navigator) {
    const activeClassName = 'copied-to-clipboard'
    function copy (event) {
      event.preventDefault()
      const el = event.currentTarget
      if (navigator.clipboard) {
        navigator.clipboard.writeText(el.dataset.clip).then(function () {
          resetCopyButtons()
          el.classList.add(activeClassName)
        }, function (e) {
          console.error(e)
        })
      } else if (window.clipboardData) {
        window.clipboardData.setData('text/plain', el.dataset.clip)
        resetCopyButtons()
        el.classList.add(activeClassName)
      }
    }

    function resetCopyButtons () {
      document.querySelectorAll('button.' + activeClassName)
        .forEach(function (el) {
          el.classList.remove(activeClassName)
        })
    }

    if (!navigator.userAgent.match(/(MSIE|Trident)/)) {
      document.querySelectorAll('button.copy-to-clipboard')
        .forEach(function (el) {
          el.classList.remove('not-supported')
          el.addEventListener('click', copy)
        })
    }

  })(window, document, navigator)

and the SASS we have used to style and do the hiding and showing of content:

.copy-to-clipboard {
  padding: 7px 30px;
  &.not-supported {
    display: none;
  }
  .copied-content {
    display: none;
  }
  &.copied-to-clipboard {
    .copied-content {
      display: inline;
    }
    .copy-content {
      display: none
    }
  }
}

[Jon-Rowe-HMRC]

Thanks Alistair.

I had a few chats about this potential pattern with Daniel last year.

Ideally the next step would be for us to talk about this with the design system working group. If it's received positively, it would then be added to our pattern backlog.

The next potential meet is 1pm 5 August. Please slack me to let me know if you can make it. If not we can arrange another time.

Best, Jon