search

joomla-projects / gsoc22_guided-tour

GNU General Public License v2.0
6 stars 6 forks source link

Live tour - Accessibility fails #31

Open brianteeman opened 1 year ago

brianteeman commented 1 year ago

Steps to reproduce the issue

Just try to take the tour using a keyboard. It is completely impossible

I couold go into more details but it is really obvious that once the tour window has focus you can not navigate to the underlying component with the keyboard. So you can never complete the tour and you can also never leave the tour. you are stuck in a loop

brianteeman commented 1 year ago

shepherd.js is simply not designed to work the way that it is being used.

it is for guided tours not interactive tours

obuisard commented 1 year ago

I managed to find a solution. No longer a release blocker. I can go through the tours just with keyboard navigation with my fix. I will create a PR tomorrow.

obuisard commented 1 year ago

For the technical solution: I have replaced the focus action of the step element with:

When on a step, the targeted element has primary focus. It can be edited (an input field) or use the 'enter' key to get the button to function. On a dropdown, 'enter' can open the select element and elements can be selected. Then it's possible to move between buttons in the popup with tabs, or reversed tabs.

brianteeman commented 1 year ago

Have you commited these changes somewhere so they can be tested. It doesnt sound from the description that this works as it removes one accessibility fail with another

brianteeman commented 1 year ago

sorry just saw your other comment. Looking forward to testing it

brianteeman commented 1 year ago

Copying my mattermost comments here for future reference

sorry to say but the changes made as expected are not accessible as they make using a screen reader to take the tour impossible.

Hopefully you will see the problem with the recent changes.

What the video is showing is that navigation to the tour dropdown and selecting a tour works great.

But then you see that when the tour loads is does not have focus. So it takes me 84 tab clicks to navigate to the start of the tour.

On the next screen you can see that the ~New button has the focus. But you dont know why. So you tab again to see if there is more information (this is where the audio breaks up sorry). I am now inside the shepherdjs focus trap. I cannot tab or shift tab out of it.

This last problem is the reason that I am saying that it fundamentally cannot work as an interactive tour using shepherdjs.

PS using a screenreader on the shepherdjs demo tour works great.

https://user-images.githubusercontent.com/1296369/218250706-237c3dd6-ff9c-40b0-8e1d-3de1782ba984.mp4

brianteeman commented 1 year ago

This is still a release blocker