eschutho opened a new pull request, #41958:
URL: https://github.com/apache/superset/pull/41958
### WCAG rule
WCAG 2.1 SC 2.1.1 (Keyboard) — Level A.
### What changed
`CopyToClipboard`'s `getDecoratedCopyNode()` has two rendering branches.
When a caller passes a custom `copyNode` element (the `cloneElement` branch),
the component wired up `onClick` but never added an `onKeyDown` handler, and
left `tabIndex` as whatever the caller happened to pass (often `undefined`).
The result: any custom `copyNode` — even one that already has `role="button"`
and `aria-label` set by the caller, e.g.
`explore/components/EmbedCodeContent.tsx`'s copy-to-clipboard icon — was not
keyboard-focusable or keyboard-operable, despite visually/semantically
presenting as an accessible button.
The sibling default-`<span>` branch a few lines below already implements
this correctly (`tabIndex={0}` + an Enter/Space `onKeyDown` handler). This PR
extends the same behavior to the `cloneElement` branch:
- Adds an `onKeyDown` handler (Enter/Space triggers the same `onClick`, with
`preventDefault()`).
- Defaults `tabIndex` to `0` when the caller didn't specify one
(`node.props.tabIndex ?? 0`), while still respecting `disabled` (`-1`) and any
caller-specified value.
This is a single shared-component fix, so it closes the gap for every call
site that passes a custom `copyNode` (`EmbedCodeContent.tsx`,
`URLShortLinkButton/index.tsx`, `TablePreview/index.tsx`, etc.) without
touching each call site individually.
Also added a test (`CopyToClipboard.test.tsx`) covering keyboard activation
and default `tabIndex` for the `cloneElement` branch specifically — the
existing keyboard test only covered the non-element/default-span branch.
### Behavior unchanged
No visual or click-behavior change. Mouse/touch click behavior is identical;
this only adds keyboard support that was previously missing.
### Test plan
- [x] `CopyToClipboard.test.tsx` — 13/13 tests pass, including the new
keyboard test for the `cloneElement` branch.
- [ ] Manual: tab to a copy-to-clipboard icon that uses a custom `copyNode`
(e.g. the "Copy to clipboard" icon in the Explore "Embed code" popover) using
only the keyboard, and verify a screen reader announces its accessible name
(e.g. "Copy to clipboard, button"), then press Enter or Space and verify the
copy action fires.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
