ClipboardCopy accessible name

I want to be able to customize the accessible name that’s attached to the ClipboardCopy input and button to improve the accessible experience. In the example below, I want to refer to the input as “callback url” and the button as “copy callback url button”. With the current implementation, we expose the actual value of the text to be copied to screen reader users, and offer a generic text “copy to clipboard copyable input” for the button.

Imagine if the text to be copied were an ssh key, for example, showing the actual copy text value itself isn’t so helpful - what would be better is if users supply a human-readable name that serves as a name for what a given element is.

For the button, we have a logical problem. While it has an accessible name, the accessible name that’s used doesn’t indicate anything unique about the control so it’s less helpful in practice. It doesn’t tell me what’s going to be copied if I select the button. If multiple copy to clipboard components are present on a same page then the problem is compounded because users are not able to distinguish between them.

Currently, when specifying aria-label as a prop to ClipboardCopy, this attribute is placed on the component’s html container, which doesn’t really have any meaningful impact on the accessible experience as far as I can tell.

Is there something we can do to improve it? The current implementation doesn’t provide a way to fix the experience on the consuming side.

[jgiardino]

I tested the current behavior by editing the first example to include the textAriaLabel prop that @boaz0 mentioned above: <ClipboardCopy textAriaLabel="ssh key">This is editable</ClipboardCopy>

This does add the text “ssh key” as the input label. In VO on safari, the screen reader behavior is to announce the contents of the text input, followed by the input label (when navigating using the Tab key). This is why your screen capture doesn’t show the aria-label value, because it’s being announced after the value, but it is there. This is standard behavior with <input type="text" aria-label="..."> that we have no control over. Creating an alternate experience where the label is announced first would require an alternate html structure that does not include the contents being copied inside an <input> element. But honestly, this alternate structure would not be much different than the example in your screen capture (e.g. text that describes the value to be copied, the value to be copied, the copy button).

As for the button, the following is what gets announced:

Copy to clipboard ssh key, button

In this case, the button label is based on the label given to the input, so the button’s label is “Copy to clipboard [value of textAriaLabel]”. For this element, there are enhancements we can do to make this more consistent with similar cases in other components.

For similar cases, we create a default label for the button by adding aria-label with a default value that we defined (e.g. “Copy to clipboard” in this case), and an aria-labelledby value that references another element in the component that provides a name (e.g. the input in this case). However, the default aria-label string is not localized. To enable consumers to provide localized strings, we enable an aria-label prop, that when used, removes the aria-labelledby attribute and expects the full meaningful name to be provided.

My suggestion for this issue is to follow that same practice. Specifically, the updates would be the following:

• Add a prop named buttonAriaLabel that accepts a string and when used:

  • Adds the string as the value for aria-label on button.pf-c-clipboard-copy__group-copy
  • Removes the aria-labelledby attribute from button.pf-c-clipboard-copy__group-copy.

  So when the consumer defines this: <ClipboardCopy textAriaLabel="ssh key" buttonAriaLabel="Copy to clipboard ssh key">This is editable</ClipboardCopy>

  The screen reader will announce this for the button:

  Copy to clipboard ssh key, button

@seanforyou23 Let me know your thoughts on this.

[boaz0]

Hey @seanforyou23 did you try to use textAriaLabel prop? It allows you to set aria-label on the text input to anything you want. In addition the clipboard copy button aria-label is set to hoverTip prop.