Copy button function for individual text

[anilkorotania]

What I'm trying to achieve:

I'm looking at introducing a button to allow an agent who's using 'Get Your State Pension' system to copy text from a page so they can paste it into another system where an older citizen record is held (Cam/PSCS). This is to reduce error either by manually inputting data or highlighting information but perhaps not copy all the desired data into a new field/system.

Ive seen some examples where a button may say 'Copy 123456789' however in my use case there is a copy button on every row to copy specific information within that row. Each copy button on the row could get quite long if the desired text to be copied is within the button text.

### Existing example:

My work in progress:

I know there could be an accessibility issue regarding screen readers and what we playback. Also is it evident what text will be copied in my attached example?

During user testing there was good feedback and it was evident to the agents what information would be copied but this was without using any assistive technology.

Has anyone tackled this problem? Any feedback or considerations would be really appreciated

[htmlandbacon]

just as a bit of technical - The design system has a copy this code button this wraps clipboard.js but is quite tied to the code example, so needs to be imported directly.

A couple of things from an accessibility point of view when looking at how this works.

1. buttons need to be informative - similar to check your answer buttons should have context
2. Similar to copy this code, a screen reader user should be informed what had happened

[htmlandbacon]

A few resources supplied from slack:

• Publisher - Component Copy to clipboard
• GDS backlog - Copy Button
• HMRC - Copy codes button design pattern proposal