Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][2.4.9] Editable Stepper Header Not Keyboard Accessible #14022

Closed
flpehr0 opened this issue Aug 3, 2021 · 0 comments · Fixed by #14036
Closed

[Bug Report][2.4.9] Editable Stepper Header Not Keyboard Accessible #14022

flpehr0 opened this issue Aug 3, 2021 · 0 comments · Fixed by #14036
Assignees
Labels
a11y Accessibility issue C: VStepper VStepper T: bug Functionality that does not work as intended/expected
Milestone

Comments

@flpehr0
Copy link
Contributor

flpehr0 commented Aug 3, 2021

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.

@glen-84 glen-84 added the C: VStepper VStepper label Aug 4, 2021
@johnleider johnleider added a11y Accessibility issue T: bug Functionality that does not work as intended/expected and removed S: triage labels Nov 29, 2021
@johnleider johnleider added this to the v2.6.x milestone Nov 29, 2021
@johnleider johnleider self-assigned this Nov 29, 2021
johnleider pushed a commit that referenced this issue Dec 7, 2021
fixes #14022

* fix(VStepperStep): editable step tab navigation

* fix(VStepperStep): added keyCodes helper
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility issue C: VStepper VStepper T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants