Skip to content

Bug - ClipboardCopy - aria attributes not correctly applied #7271

Description

@thatblindgeye

Describe the problem
This is an issue with

  • Patternfly 5

  • Patternfly 6

  • other

  • Some expandable examples are missing the aria-expanded attribute when the clipboard copy is not expanded. For expansion, aria-expanded must always be present with either a true or false value; omitting the attribute provides a different context than passing a false value.

  • The expandable buttons need to have an aria-label applied. Currently their aria-labelledby is self-referencing, but the button itself does not have its own label.

  • There's some inconsistency with some browser+AT combos where despite the text input having its own aria-label, the expand or copy buttons are using the value of the input to create an accessible name (e.g. "Copy to clipboard This is editable" instead of "Copy to clipboard copyable input". Somewhat related to React issue Bug - Clipboard copy with expansion variant - screen reader issue patternfly-react#11372, this could be confusing to users. Rather than using aria-labelledby on these buttons, it may be better to just use aria-label to achieve the desired result of the text "Copy to clipboard" + the aria-label of the input. For inline compact variants, we'd need to choose a fitting text to append after the "Copy.." text, possibly the example name e.g "Copy to clipboard inline compact content"?

How do you reproduce the problem?
Go to the expandable clipboard copy examples and inspect the DOM; notice that the examples that are not expanded are missing aria-expanded="false". Also note that there is no aria-label applied to these buttons.

Expected behavior
aria-expanded is always present when expansion is possible.

Is this issue blocking you?
List the workaround if there is one.

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

A11yAccessibility related issuesPF TeamIssue originates from PF Team

Type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions