Clipboard copy

Accessibility

To implement an accessible PatternFly clipboard copy component:

• Ensure the clipboard copy's tooltip updates to convey when content has been copied
• Pass an aria-label to the expandable toggle if the clipboard copy can be expanded

Testing

At a minimum, a clipboard copy should meet the following criteria:

• Standard keyboard navigation can be used to navigate between the clipboard copy contents or other focusable elements.Tab navigates to the next focusable element, and Shift + Tab navigates to the previous focusable element.
• Standard keyboard interaction can be used to interact with the expandable toggle, copy button, and any other actions within the clipboard copy.Both Space and Enter should activate any toggles or buttons within the clipboard copy.
• The tooltip on the copy button updates after activating it.This helps notify users that something has been successfully copied.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
additionalActions={[ClipboardCopyAction components]}	ClipboardCopy	Adds additional actions to an inline clipboard copy. When passing this prop in, you must ensure any actions passed in follow accessibility documentation, such as providing accessible names for buttons that contain only an icon.
clickTip="[text to display in the copy button tooltip]"	ClipboardCopy	Determines the text displayed in the tooltip after activating the copy button.
entryDelay={[number in milliseconds]}	ClipboardCopy	Creates a delay in the specified number of milliseconds for when the copy button's tooltip appears on hover or focus. Avoid making the entry delay too long as it can cause users to navigate away before the tooltip appears.
exitDelay={[number in milliseconds]}	ClipboardCopy	Creates a delay in the specified number of milliseconds for when the copy button's tooltip disappears after activating the button, or moving focus or the mouse pointer away from it. Avoid making the exit delay 0 or too short, as users must be given enough time to move their mouse pointer into the tooltip or enough time to read it if they are unable to keep their mouse steady.
hoverTip="[text to display in the copy button tooltip]"	ClipboardCopy	Determines the text displayed in the tooltip that triggers when hovering or focusing the copy button. Also adds an accessible name to the copy button.
isExpanded	ClipboardCopy	Indicates whether the expandable toggle is expanded or collapsed to assistive technologies.
isReadOnly	ClipboardCopy	Adds visual styling and notifies users that a text input is not editable. Required if the text input is not editable.
textAriaLabe="[text labeling the text input]"l	ClipboardCopy	Adds an accessible name to the text input. Generally this should convey that the input is copyable and what the purpose of the input is.
toggleAriaLabel="[text labeling the expandable toggle]"	ClipboardCopy	Adds an accessible name to the expandable toggle. This should generally convey what will be expanded or collapsed when activating the toggle.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class	Applied to	Reason
aria-hidden="true"	.pf-v5-c-button i	Removes the button icon from the accessibility tree, preventing assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it. Required.
aria-label="[text labeling the copy button]"	.pf-v5-c-clipboard-copy__actions-item .pf-v5-c-button.pf-m-plain, .pf-v5-c-clipboard-copy__group .pf-v5-c-button.pf-m-control	Adds an accessible name to the copy button. Required if the button does not contain any visible text. The value of this attribute should generally be the same as any tooltip contents.
aria-labelledby="[id of the copy button] [id of the text input or .pf-v5-c-clipboard-copy__text]"	.pf-v5-c-clipboard-copy__actions-item .pf-v5-c-button.pf-m-plain, .pf-v5-c-clipboard-copy__group .pf-v5-c-button.pf-m-control	Creates a unique accessible name from the copy button and the text input or copyable text. This helps provide context of what content will be copied by the copy button, and makes each clipboard copy unique on a page.
hidden	.pf-v5-c-clipboard-copy__expandable-content	Hides the expandable content. Required when aria-expanded="false" is passed in.
id	.pf-v5-c-clipboard-copy__expandable-content	Used to link the expandable content to an expandable toggle. Required.
aria-controls="[id of the expandable content controlled by the expandable toggle]"	.pf-v5-c-clipboard-copy__group .pf-v5-c-button.pf-m-control	Indicates which expandable content is controlled by the toggle. Required.
aria-expanded="[true or false]"	.pf-v5-c-clipboard-copy__group .pf-v5-c-button.pf-m-control	Indicates whether the expandable toggle is expanded (true) or collapsed (false) to assistive technologies. Required.
aria-label="[text labeling the expandable toggle]"	.pf-v5-c-clipboard-copy__group .pf-v5-c-button.pf-m-control	Adds an accessible name to the expandable toggle. Required if the clipboard copy can be expanded.
aria-label="[text labeling the text input]"	.pf-v5-c-clipboard-copy__group .pf-v5-c-form-control	Adds an accessible name to the text input. Required if the clipboard copy has a text input.
readonly	.pf-v5-c-clipboard-copy__group .pf-v5-c-form-control	Adds visual styling and notifies users that a text input is not editable. Required if the text input is not editable.