Describe the issue
Current Behaviour
The Dock component items have role="button" and tabIndex={0}, making them focusable via keyboard. However:
- Pressing Enter or Space while a dock item is focused does not trigger its
onClick handler.
- Dock items have no accessible label — screen readers announce them only as "button" with no description of their action.
Expected Behaviour
- Pressing Enter or Space on a focused dock item should activate its
onClick handler, matching native <button> behavior.
- Each dock item should expose an accessible name (via
aria-label) derived from its label prop.
Proposed Solution
- Add an
onKeyDown handler to DockItem that triggers onClick on Enter or Space, with preventDefault() to avoid page scroll on Space.
- Pass
aria-label to DockItem derived from item.label.
Accessibility Benefits
This improves usability for:
- Keyboard-only users
- Screen reader users
- Users relying on assistive technologies
Reproduction Link
No response
Steps to reproduce
- Open the Dock component demo.
- Press Tab until a dock item is focused.
- Press Enter or Space.
- Observe the
onClick action does not trigger.
Validations
Describe the issue
Current Behaviour
The Dock component items have
role="button"andtabIndex={0}, making them focusable via keyboard. However:onClickhandler.Expected Behaviour
onClickhandler, matching native<button>behavior.aria-label) derived from itslabelprop.Proposed Solution
onKeyDownhandler toDockItemthat triggersonClickonEnterorSpace, withpreventDefault()to avoid page scroll on Space.aria-labeltoDockItemderived fromitem.label.Accessibility Benefits
This improves usability for:
Reproduction Link
No response
Steps to reproduce
onClickaction does not trigger.Validations