Wrapped KRadioButton groups in KRadioButtonGroup

[iamshobhraj]

Summary

Wrapped the unwrapped KRadioButton Groups in KRadioButtonGroup tag to ensure keyboard navigation in firefox.

References

• Addreses the issue Wrap KRadioButton groups in KRadioButtonGroup #12596
• used my custom vue js parser written in python to parse and wrap the KRadioButton Groups.

Reviewer guidance

• After running the script, some v directive divs were changed to non continuous, so i manually fixed those files.
• Some tests were failed while testing locally, but i didnt make any changes to those files. Develop branch also failed those tests.

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0.dev0_git.20241115110000.pex
Windows Installer (EXE)	kolibri-0.18.0.dev0+git.20241115110000-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0.dev0+git.20241115110000-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0.dev0+git.20241115110000.dmg
Android Package (APK)	kolibri-0.18.0.dev0+git.20241115110000-0.1.4-debug.apk
TAR file	kolibri-0.18.0.dev0+git.20241115110000.tar.gz
WHL file	kolibri-0.18.0.dev0+git.20241115110000-py2.py3-none-any.whl

[nucleogenesis]

Thank you for your work on this! I've added a couple of requests for changes which, in summary, are:

• The KRadioButtonGroup should only wrap what is necessary for it to do its job. There are several places where it's wrapped around structural/layout components which could cause issues / conflicts
• There are several lines that seem arbitrarily removed - if this is a result of your parsing script (and not our linter) then we'll want to revert the non-functional changes. If our linter did make the changes, ignore this

[MisRob]

We will need @radinamatic's approval here as well. Radina, this PR attempts to address #10491 for all radio buttons in Kolibri.

[MisRob]

Thanks @iamshobhraj, this is a great start and will be wonderful a11y improvement. I agree with @nucleogenesis concern regarding the placement of KRadioButtonGroup. There's some more nuance to it though so I posted more guidance with examples. I didn't review all places so would ask you to revisit and align all changes with that. Let us know if you had any questions.

[MisRob]

@radinamatic there will some code changes based on @nucleogenesis and my review - it'd be best to do QA rather after that.

.

[nucleogenesis]

I think that with some additional regression testing by @radinamatic or @pcenov would be great here.

I saw some minor syntax inconsistencies that I noted but overall the updates look good to me. I'll request changes on that particular issue and will dismiss my request upon successful QA

[iamshobhraj]

@nucleogenesis i fixed the syntax inconsistency. just waiting for the QA. But now there is a merge conflict. It was fine yesterday. How do i fix this?

[pcenov]

Thanks @iamshobhraj - no issues observed while manually testing, LGTM!

[radinamatic]

Apologies for the delay, I'll look at this later today, @iamshobhraj! 🙏🏽

[iamshobhraj]

Apologies for the delay, I'll look at this later today, @iamshobhraj! 🙏🏽

No worries, I'm in no such hurry. Take your time.

[radinamatic]

Thank you for your contribution @iamshobhraj, keyboard navigation seems to be working correctly! 🙏🏽

@MisRob I apologize for not making it more explicit, but when I linked the ARIA Authoring Practices Guide (APG) for radio button in the initial issue, I hoped that we would also implement the proper radiogroup role in the KRadioButtonGroup component. This role offers a better UX to screen reader users by providing context that they are navigating through (and selecting from) a group of related set of options, and how many they have available.

APG example	Current Kolibri implementation (this PR)

[iamshobhraj]

Thanks, @radinamatic ! Great to hear the keyboard navigation is on point. I’m glad to be part of these improvements.

[MisRob]

@MisRob I apologize for not making it more explicit, but when I linked the ARIA Authoring Practices Guide (APG) for radio button in the initial issue, I hoped that we would also implement the proper radiogroup role in the KRadioButtonGroup component. This role offers a better UX to screen reader users by providing context that they are navigating through (and selecting from) a group of related set of options, and how many they have available.

Hi @radinamatic, this is rather a new KDS task. @iamshobhraj if you're interested, you're welcome to message us for an assignment here learningequality/kolibri-design-system#828. Let's keep it separately from this work.

[iamshobhraj]

@MisRob I'll be happy to take up the new KDS task. But there is a merge conflict in this PR. Is it for me to fix it? If so, how do I fix it?

[MisRob]

@iamshobhraj Thanks for offering to take care of the conflicts, that'd be much appreciated. You could resolve them by merging the latest develop to your branch and then using the usual conflict resolution workflow. I like to use VSCode to resolve conflicts but there's more ways you could do it. One idea I had would be, for these files, to accept whatever is coming from develop and then re-wrapping the radio buttons in the group. Sometimes it's the easiest. But you will see depending on the nature of conflicts. Depending on your confidence and experience with these kinds of tasks, you could also consider making a backup of your branch. Let us know how it goes.

[iamshobhraj]

@MisRob Merge conflict is fixed. I believe this PR is ready to be merged

[MisRob]

Thanks! I will let @nucleogenesis to do the final approve as he saw most of the changes.

[iamshobhraj]

@nucleogenesis i believe this pr is ready to be merged. are there any additional changes you would like me to make?