Blazorise icon indicating copy to clipboard operation
Blazorise copied to clipboard

[Bug]: Stepper is not accessible

Open panmona opened this issue 2 months ago • 2 comments

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.

panmona avatar May 15 '24 12:05 panmona

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.

stsrki avatar May 16 '24 18:05 stsrki

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 👍

panmona avatar May 17 '24 07:05 panmona