search

learningequality / kolibri

Kolibri Learning Platform: the offline app for universal education
https://learningequality.org/kolibri/
MIT License
756 stars 638 forks source link

Keyboard navigation inside radio button group (Firefox) #10491

Open radinamatic opened 1 year ago

radinamatic commented 1 year ago

Observed behavior

Proper keyboard interaction for moving through options inside the radio button group is with the ⬇️ ⬆️ keys, not the Tab key. This is currently working well in in Kolibri when browsing with Chrome, but not with Firefox, where users can only navigate through radio buttons with the Tab key, even after they select/change the radio option they need with the Space key, they still need to Tab-their way out the radio button group to the next interactive element.

Firefox

https://user-images.githubusercontent.com/1457929/232547281-4943cd3b-0133-4c1a-a9d1-73a4b768a253.mp4

Chrome

https://user-images.githubusercontent.com/1457929/232547284-a0fbe332-6705-4698-86e4-8ce93002c229.mp4

The benefit of the above recommended navigation (use arrow keys to navigate through the radio buttons within the group, and use the Tab key to jump out of the radio button group) is evident when there is a long list of radio buttons like in our Change language modal. In Firefox users need to Tab-their-way-out though the whole list of 30+ languages even after they selected the one they want, just so they can confirm and close the modal. Not optimal... 🙅🏽

Firefox

https://user-images.githubusercontent.com/1457929/232547280-4a457a80-0a5f-4122-b84d-6bd02a91907c.mp4

Chrome

https://user-images.githubusercontent.com/1457929/232547277-d1ba7faf-68ab-4d8c-9265-4b367c6c34a1.mp4

I was so happy to find the Chrome extension and Firefox add-on to display the pressed keys, that I went a bit finger-happy while recording, and I only now realize that it's maybe too fast to notice the interaction... 😅

Errors and logs

…

Expected behavior

https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction

User-facing consequences

Keyboard interaction not optimized on Firefox as on Chrome.

Steps to reproduce

Try changing the language using the keyboard in Firefox.

Context

radinamatic commented 1 year ago

And I also just now realized this might be the KDS issue, and not Kolibri... 🤦🏽‍♀️ @marcellamaki @MisRob let me know if I should transfer the issue!

MisRob commented 1 year ago

Thank you, @radinamatic, looking at the code, I am not sure because there's some logic for radio buttons that seems to be related in Kolibri too. So I think you don't need to spend extra time transferring it to KDS, it sometimes happens that a Kolibri issue needs to be addressed in KDS. As soon as we locate the cause of the problem, we can always open an issue referencing this one in KDS if needed.

And thanks for the browser add-ons tips.

muditchoudhary commented 5 months ago

Hi, @MisRob I confirm the issue is present only in FireFox browser. I tested on Chrome, Brave, and Edge working as expected on all of them. I will try to find the cause of this problem. Give an update if I find out.

Could you assign it to me?

AlexVelezLl commented 5 months ago

Hi @muditchoudhary! Thanks for your interest in contributing to Kolibri! I will assign this issue to you. Let us know if you have any questions.

muditchoudhary commented 5 months ago

Hi @muditchoudhary! Thanks for your interest in contributing to Kolibri! I will assign this issue to you. Let us know if you have any questions.

Thank you!! I will ask if I have any questions. Thanks

MisRob commented 5 months ago

Thanks @AlexVelezLl. Good to hear from you again @muditchoudhary.

muditchoudhary commented 5 months ago

Hello, @MisRob @radinamatic As per my finding the cause is Firefox's default implementation not Kolibri's implementation. I have found 2 bugs on Bugzilla

  1. https://bugzilla.mozilla.org/show_bug.cgi?id=1413213
  2. https://bugzilla.mozilla.org/show_bug.cgi?id=1267488

They are not prioritizing these issues for now.

I think, what we can do is create our custom logic to navigate with the keyboard respecting the w3 ARIA guidelines. I have read that we should not do this and follow the browser's default implementation.

So, what do you think?

Should I try to create some custom logic for keyboard navigation?

MisRob commented 5 months ago

Hi @muditchoudhary, good to hear from you again! Thank you for investigating and talking to us at first, that's really valuable.

I see, in the first issue you linked https://bugzilla.mozilla.org/show_bug.cgi?id=1413213

Expected results:

After TAB is pressed first radio in the group button should be focused. After next time TAB is pressed focus should leave radio group with moving to next widget.

Reading the way @radinamatic described it, I think that it'd be valuable to have a custom implementation. The bugzilla issue is 6 years old. I'll share with her your message and chat about it. I'll then confirm here.

radinamatic commented 5 months ago

Thank you @muditchoudhary for confirming that it's not Kolibri-specific issue, but rather Firefox bad implementation of the WAI recommended pattern! 👍🏽

Even though the onus would be on them to correct it, given the age of the reported issue and their imho weak justification for not giving it due severity, it boils down to us: do we want to offer the best accessible experience to our users, or we're going to justify not doing it by saying it was someone else's responsibility.

That said, we can make our own priority/severity assessments and weigh them against the effort needed to correct the issue. If you see a workable path towards implementing the recommended pattern only for Firefox, I would say go for it! 🙂

MisRob commented 5 months ago

Thanks @radinamatic, that's helpful.

@muditchoudhary We did something similar for tabs https://github.com/learningequality/kolibri-design-system/blob/main/lib/tabs/KTabsList.vue#L253 but for left/right arrow, so perhaps it will help a bit with Vue things. However, as @radinamatic says, the difference is that here it'd be good to use the custom solution only in Firefox.

That said, we can make our own priority/severity assessments and weigh them against the effort needed to correct the issue. If you see a workable path towards implementing the recommended pattern only for Firefox, I would say go for it! 🙂

I second that. I hope it's feasible, but let's see what the radio button group code looks like. You're welcome to play around with it. Let us know if you had some ideas how to do this and thanks a lot.

muditchoudhary commented 5 months ago

@MisRob @radinamatic understood! I will try to have some idea/logic for this. I will update thoroughly if I can make up the logic for this before implementing it.

Thank you!

muditchoudhary commented 4 months ago

Hello @MisRob and @radinamatic I have made a draft PR in the kolibri-design-system repo. I have added some Radio Buttons in the playground.vue to test my logic. Could you please check it?

After you will have checked it we can discuss how we are going to add the logic in Kolibri.

Here is the PR https://github.com/learningequality/kolibri-design-system/pull/554

MisRob commented 4 months ago

Hi @muditchoudhary, thank you. We will have a look.

muditchoudhary commented 2 months ago

Hello, I have to give an update on this. I have my exams in May and I'm preparing for it. I have a working solution for this issue. Just need to write some tests and perform manual tests. I will raise a PR after May. Thanks!

MisRob commented 2 months ago

Hi @muditchoudhary, thank you for keeping in touch. First, good luck with your exams! There's no pressure around this task, thanks so much.