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

Step link needs an href attribute so that it's keyboard navigable #455

Closed
mmazanec22 opened this issue Dec 6, 2022 · 2 comments · Fixed by #762
Closed

Step link needs an href attribute so that it's keyboard navigable #455

mmazanec22 opened this issue Dec 6, 2022 · 2 comments · Fixed by #762
Labels
a11y Accessibility enhancement Improvements to existing features and functionality

Comments

@mmazanec22
Copy link
Contributor

mmazanec22 commented Dec 6, 2022

Overview of the problem

Oruga version: 0.5.9
Vuejs version: 3.2.41
OS/Browser: Pop!_OS/Chrome

Description

The step nav bar is not currently operable via keyboard because the step a tags to not have href attributes.

Steps to reproduce

Set the steps to be clickable, and then try to use the tab key to navigate through the page.

Expected behavior

I would expect the clickable step nav links to have href attributes so that it's keyboard operable, and to be able to set those href attributes. I would also expect the nav to just be a regular ol with some aria markup and not use semantic nav and link elements when the step progress indicator is not interactive.

Actual behavior

The links are clickable when the steps are set to clickable, but the links cannot receive keyboard focus. A step nav with no clickable elements is a semantic nav element with links despite not being interactive at all, which is potentially misleading to screen reader users.

(Edited because I mixed up animated and clickable.)

@jtommy
Copy link
Member

jtommy commented Dec 11, 2022

Can you make a PR?

@mlmoravek
Copy link
Member

Maybe its easier to add tabindex="0" and role="button" as needed, to make them accessible by keyboard?

@astagi astagi added enhancement Improvements to existing features and functionality a11y Accessibility labels Jan 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility enhancement Improvements to existing features and functionality
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants