ba-copy-to-clipboard
Enables users to copy important short codes and reference numbers to their clipboards
Copy functionality will only work in secure contexts
The copy functionality uses the native writeText() method that will only work in secure contexts (i.e. HTTPS). If you are using this component in a non-secure context, the component will still render but the copy functionality will not populate the clipboard.
The ba-copy-to-clipboard component is optimised for reference codes. Using it for other information may break the component and degrade the user experience, especially when used with other languages or modified through users' accessibility settings
Although technically ba-copy-to-clipboard can go in ba-grid, and ba-grid can go in ba-message, the component should not be used in ba-message itself.
This is because the component is designed for standalone use in the body of the page and may break when placed in a component with limited space (e.g., ba-message).
We are currently investigating how to enable BAgel helper to flag this as an error and the best way to document this restriction.
Users of assitive technology often navigate by headings. Including a heading makes it easier for users to find and interact with the copy to clipboard component
It's important to maintain the order of headings so that they appear in a logical order in the page. Screen readers (and other assistive technology) rely on headings to navigate and understand structure of pages.
Note: this will not change the font size of the heading, only the semantic meaning.
Further reading
The copy button text will change to show the user that the copy action has been successful. The amount of space required will depend on the language of the page, zoom level and browser font size settings
| Element | State | Key press | Behaviour |
|---|---|---|---|
| Previous element in DOM | Previous element in DOM has focus | Tab |
<button> in shadow DOM gets focus |
<button> in shadow |
button in shadow has focus | Space |
Copies value in copy-text to the users clipboard |
<button> in shadow |
button in shadow has focus | Enter |
Copies value in copy-text to the users clipboard |
<button> in shadow |
button in shadow has focus | Tab |
Next tabbable element in the DOM gets focus |
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
copyText
(required)
|
copy-text |
Text to display in the component | "" |
undefined |
heading
(required)
|
heading |
Sets the heading to show abvoe the copy text | string |
undefined |
headingLevel
|
heading-level |
This will set the |
2 | 3 | 4 | 5 | 6 | undefined |
3 |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | None |
Permitted ARIA roles
None
Parent components
ba-copy-to-clipboard can be slotted into:
Usage
Basic usage
Most scenarios will only require the copy-text and a heading
<ba-copy-to-clipboard copy-text="BA1234" heading="Your booking reference"></ba-copy-to-clipboard>
Setting heading level
The heading level can be set by passing a number to to the heading-level attribute. The heading level should be set by the preceding heading on the page
<h2> in the document outline<h3>A heading further up on the page</h3>
...
<ba-copy-to-clipboard copy-text="BA1234" heading="Your booking reference" heading-level="4"></ba-copy-to-clipboard>