Blazorise
Blazorise copied to clipboard
[Bug]: Stepper is not accessible
Blazorise Version
1.5.x
What Blazorise provider are you running on?
None
Link to minimal reproduction or a simple code snippet
https://blazorise.com/docs/components/step
Steps to reproduce
- Try to access the stepper "buttons" with the Tab key
- Or use a screenreader and search for the stepper "buttons"
What is expected?
- The buttons can be accessed with the tab key and pressed with the keyboard
- The screenreader announces the buttons as buttons
What is actually happening?
- The buttons can't be accessed with the tab key (and not pressed with the keyboard)
- The screenreader doesn't announce the buttons as buttons
What browsers do you see the problem on?
Chrome
Any additional comments?
The problem is that the "buttons" are clickable divs, which should never be used. (for reference e.g: https://www.a11yproject.com/checklist/#controls and https://benmyers.dev/blog/clickable-divs/#or) The stepper buttons should rather use the HTML button element with CSS overrides. In this case we'll get the things that aren't working for free 🆓😄
Additionally by using buttons, we would get the expected mouse pointer style for free.
Thank you for reporting this issue. We already plan to add many accessibility improvements as part of #3705 and #3454, possibly in 1.7 release.
In case you find any other issues, don't hesitate to open a new ticket, as any extra information would greatly help us to figure out what needs to be done.
That's very good to hear that you're committed to improving this 👍 In that case if I find anything else I'll open another ticket 👍