AVT 1 - Code Snippet -> Inline has a DAP violation

[snidersd]

Environment

macOS Mojave version 10.14.6
Chrome Version Version 77.0.3865.90
Carbon v10 - React
DAP IBM Accessibility 1.8.0.0 Sept 2019 Ruleset

Detailed Description

Go to the React Component
Run DAP and the following violations are present (see screenshot):

Note: "node -v" which is the button text does not match the aria-label="copyable code snippet".

[joshblack]

@snidersd what would the expected resolution be in this case? Seems like we'd want to communicate that the button action is to copy, but having it announce copy node -v may be unintended as it would announce the entire code snippet.

[dakahn]

Seems like DAP is incorrectly picking up our code text as it's visible label. When really, an inline code snippet has no visible label -- only a programmatic one excluding it from 2.5.3
https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html

[joshblack]

Waiting for confirmation on approach from IBMa

[snidersd]

@joshblack @dakahn Confirmed that this was discussed with IBMa and the DAP violation is valid, since the code snippet is still considered a visible label.

[dakahn]

The internally proposed solution seems to be include the code to be copied in the programmatic label like aria-label="copy code snippet <div>...

This doesn't seem like it will scale very well considering there are no technical limits to our inline code snippet. Making the copy button distinct from the code it's acting on is probably the more usable move here I would think.

[elizabethsjudd]

@dakahn @snidersd why not use remove the aria attributes and use the the assistive technology class on a span within the button? I've personally found it troublesome to use aria-label on elements like buttons and links.

[dakahn]

@elizabethsjudd Oh, cool -- thanks for the suggestions we'll keep that in mind. We actually aren't looking to implement the suggested changes as they were proposed. Sometimes a code snippet can be quite long and having that read as a label isn't the experience we want here -- or at least we think it's not.

One idea we're kicking around is having a distinct (copy) button somewhere adjacent to the code. Would make more sense maybe than having the code be a button.

[jnm2377]

Testing latest carbon react, and I'm not seeing any a11y violations come up. I'm closing this issue for now, but we can re-open if we can reproduce later.