joomla / joomla-cms

Home of the Joomla! Content Management System
https://www.joomla.org
GNU General Public License v2.0
4.77k stars 3.65k forks source link

[Guided tours] toggle buttons #40010

Open brianteeman opened 1 year ago

brianteeman commented 1 year ago

Steps to reproduce the issue

See video recording - keyboard navigation only - all key presses highlighted on screen by external software Creating seperate issue for each bug report so that they dont get lost inside a bigger report (again)

When the step is at a toggle button then the keyboard will only navigate to the cancel button. (unless you go backwards)

https://user-images.githubusercontent.com/1296369/222924822-5f7eb9a0-5779-429f-9d0c-cc3758b6aa8d.mp4

The requirement to use a mouse to successfully use the Guided Tours component is an accessibility failure and breaks our commitment to providing an accessible way to use Joomla

brianteeman commented 1 year ago

still not possible to use the keyboard to set a toggle button

GeraintEdwards commented 1 year ago

@brianteeman The issue is that the 'input' element targetted by the tour is not visible and not available for keyboard actions as a result. If you change the selector for this step to

jform_sendEmail label[for=jform_sendEmail0]

then it will respond to left/right arrows once you have focus on the element.

It looks rather strange though and is confusing to use and there is another complication in that the 'blur' event doesn't fire so you have to tab to get to the next step in the tour.

The real issue I think is that the .switcher wrapper should ideally respond to keyboard events and not rely on the label being 'clicked'

I have a enhancement available soon for the tour where input fields will automatically receive focus once the step if shown which would make keyboard interaction a LOT easier. This still suffers from the lack of response to the 'blur' event though - need to think more on that one.

GeraintEdwards commented 1 year ago

I have a fix for this which will be in a PR for Joomla 5 along with some other enhancements. It works by allowing the tour step to highlight one element (the switcher as a whole) but set the focus on a different element.

brianteeman commented 3 months ago

@GeraintEdwards did you ever submit that fix?

obuisard commented 3 months ago

The arrow keys should allow the user to step through the switcher buttons. So far it has not been fixed. Geraint @GeraintEdwards, would you have any update?