Accessibility fixes for copy button

[ahamelers]

Currently, there are several accessibility issues with the copy button:

1. The function works in such a way that the focus is removed from the button, stranding the keyboard/screen reading user
2. If there are multiple copy buttons on the same page, they all have the same text and so cannot be discerned from one another by the screen reader user
3. The 'copied' success status update is not announced to the screen reader user.

This PR fixes these issues by:

1. Updating the copy function to use the clipboard API and no longer change focus
2. Adding an aria-label to each copy button to make it clear to the screen reader user what they are copying
3. Updating an aria status element so the 'copied' success status update is announced

Also note that scrollable regions on a page must be able to receive tab focus, and stuff that's focussable should be labeled and given a role if possible, so this PR also adds a label, role, and tabindex to the scrollable region that the copy button copies.