[Bug Report][2.4.9] Editable Stepper Header Not Keyboard Accessible #14022
Labels
a11y
Accessibility issue
C: VStepper
VStepper
T: bug
Functionality that does not work as intended/expected
Milestone
Environment
Vuetify Version: 2.4.9
Vue Version: 2.6.12
Browsers: Chrome 92.0.4515.107, Google Chrome, Mozilla Firefox
OS: Windows 10
Steps to reproduce
When on a page with a stepper that includes headers using the editable prop, attempt to use the keyboard to focus on and execute that step.
Expected Behavior
keyboard focus should be moved to the actionable element, in this case the stepper header, and be executable with the keyboard. All focus styles that apply when clicked should apply when focused with the keyboard.
Actual Behavior
The keyboard skips over the clickable header entirely and is therefore not executable with the keyboard
Reproduction Link
https://codepen.io/flpehr0/pen/yLbqZJe
Other comments
Adding a tabindex="0" when editable should be a good first step as well as ensuring that it will execute with a keyboard and not only a mouse.
The text was updated successfully, but these errors were encountered: