Bug - Clipboard copy with expansion variant - screen reader issue

[AyushiMidha]

Describe the problem
When using a screen reader with the Clipboard Copy component in the expansion variant, the screen reader first announces the text of the expansion button and then the text of the input field. Since the text content of the expansion button and the input field are similar to some extent, this can give the impression that the screen reader is reading the same content twice. This behavior may confuse users relying on assistive technologies.

How do you reproduce the problem?

1. Navigate to the Clipboard Copy component component expansion variant (https://www.patternfly.org/components/clipboard-copy#expanded).
2. Focus on the expansion variant of the Clipboard Copy component.
3. Use a screen reader (e.g., VoiceOver) to interact with the component.
4. Observe that the screen reader announces the expansion button text and then the input field text, which are similar.

Expected behavior
The screen reader should differentiate the content being announced for the expansion button and the input field to avoid redundancy or confusion for users.

Screenshots

What is your environment?

• OS: macOs
• Browser: Chrome
• Version: 131.0.6778.205

[thatblindgeye]

This could be related to the core issue I opened, linked above, and something noticed during the a11y audit of this component -- should note that I saw a similar issue when using NVDA in Chrome and Firefox. Basically it may be partially due to some inconsistency in browser + AT combos. When using Safari + VoiceOver, the announced output is "Copy copyable input" for the copy button and "Show content, copyable input collapsed button" for example (using the text input's aria-label rather than its value).

I had mentioned that it may be better to only use an aria-label on these buttons rather than trying to concatenate an aria-labelledby, that way the intended output actually gets announced. Possibly gets trickier for inline compact variants since we can't apply an aria-label to the span/div of the text to be copied, but I did mention that for our examples we could have the copy button's aria-label just include the example name, e.g. "Copy inline compact content".

Doing this would require tweaking some of the logic within ClipboardCopy and/or other sub-components, which miiiiight be a breaking change. Right now the hoverTip prop is what determines both the button's aria-label and the tooltip content, so a new prop would most likely have to be introduced to apply an aria-label to the copy button that is separate from the hoverTip.

For the expand toggle, it might just require passing the textAriaLabel to the ClipboardCopyToggle component instead of textId.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.