issue-#10491 Allow moving with arrow keys over radio buttons in firefox

[muditchoudhary]

Description

The PR fixed the accessibility issue of arrow keys not working for moving over radio buttons in Firefox.

Issue addressed

Addresses #PR# HERE

Before/after screenshots

2024-02-22.17-53-31.mp4

Changelog

• [#PR no]
  • Description: Summary of change(s)
  • Products impact: Choose from - none (for internal updates) / bugfix / new API / updated API / removed API. If it's 'none', use "-" for all items below to indicate they are not relevant.
  • Addresses: Link(s) to GH issue(s) addressed. Include KDS links as well as links to related issues in a consumer product repository too.
  • Components: Affected public KDS component. Do not include internal sub-components or documentation components.
  • Breaking: Will this change break something in a consumer? Choose from: yes / no
  • Impacts a11y: Does this change improve a11y or adds new features that can be used to improve it? Choose from: yes / no
  • Guidance: Why and how to introduce this update to a consumer? Required for breaking changes, appreciated for changes with a11y impact, and welcomed for non-breaking changes when relevant.

[#PR no]: PR link

Steps to test

1. Step 1
2. Step 2
3. ...

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

After review

• The changelog item has been pasted to the CHANGELOG.md

Comments

[muditchoudhary]

I have used the same logic as is in KTabsList component for arrow keys movement.

The arrow keys are working fine.

But I cannot do the tab logic. I have thought about this logic:

• For tab keys, as the user presses the tab on the first radio button on a group I transfer the focus to the next component with the help of a $ref which I have given to the next component.
• Even if we have more than one radio group on the page, like I have in this draft PR. We can just give different refs to the different next and previous components after each radio group.
• Issue with this logic But I stuck with radio buttons which are in the middle. How can I disable the tab on them? If the user presses the tab on a radio button in the middle with a mouse and then presses the tab, it should not work. But currently, it works because I could not disable the tab on the middle radio buttons.
• Preview Below

2024-02-22.18-12-47.mp4

• I need your help with the tab logic.

My Thoughts

In the original issue which occurred in Devices/Settings, We can add this logic on the setting file. But I think there are many different places where Radio Buttons are used we have to add the same code to each file. Which is not a good idea. I think we can create a different component that contains all the radio buttons of a single group.

What do you think?

About the tabs, I think as the arrow keys are working. The users now do not need to use the tabs in Firefox too and even if they use it it will not break the code or logic. So I think we can skip it if we don't have a proper logic for the tab after discussion. Let's see.

So currently as per https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction guidelines the

• Arrow keys are working
• Space is working
• Tabs not working.

[MisRob]

Hi @muditchoudhary, thank you for looking into this!

In regards to troubling TAB key, can I understand right that the problem is that under certain circumstances, when you click TAB, the focus moves to the next radio button rather than outside the group, right?

[muditchoudhary]

@MisRob Yes, that's correct.

[MisRob]

Some general references that came to mind when I read your comment

• In KTabsList, I used tabindex to control TAB sequence. It's value was dynamically set to 0 or -1.
• I tried some issues you described, as far as I could understand, on this example https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/ Combination of mouse and TAB key seems to work well. They too use tabindex.

Could some of this information help?

[MisRob]

And also in regards to

But I think there are many different places where Radio Buttons are used we have to add the same code to each file. Which is not a good idea. I think we can create a different component that contains all the radio buttons of a single group.

I agree we wouldn't want to implement this over and over again and it'd be best to have something like
KRadioButtonGroup component. Let me think about it and after the issues you mentioned are resolved, let's chat.

[muditchoudhary]

Could some of this information help?

I'll check it out in the morning.

[muditchoudhary]

Hi @MisRob The tab issue has been fixed now. Thanks for telling about tabindex

2024-02-24.16-07-34.mp4

[muditchoudhary]

I will try to create KRadioButtonGroup component next. Do you have any suggestions or docs that tell what things to keep in mind when creating a KDS component?

[MisRob]

Thanks @muditchoudhary. I think that KRadioButton's usage would ideally look something like

<KRadioButtonGroup>
  <KRadioButton>
  <KRadioButton>
</KRadioButtonGroup>

It would be good to check few places in Kolibri to see if this will do for our use cases.

This page in KDS docs will help with creating a new component, even though you probably already know most of that.

It'd be good to have some tests for it.

[muditchoudhary]

Okay understood!

[MisRob]

Closing in favor of #650