Focus in Complex Components
https://youtu.be/rPumANoosUQ
The ARIA Authoring Practices doc (or "ARIA Design Patterns doc") is a great resource for figuring out what kind of keyboard support your complex components should implement.
There are currently two versions:
- WAI-ARIA Authoring Practices 1.0
- WAI-ARIA Authoring Practices 1.1 (Newer working draft)
I personally prefer the 1.1 version because the layout is a bit easier to navigate and it includes a few fixes currently missing from the 1.0 version.
Keyboard Design Patterns
https://youtu.be/i26AnhWMZPE
Take a look at the ARIA Authoring Best Practices guide to read more about the Radio pattern. I've linked to both versions so you can choose whichever one you prefer. Both patterns are nearly identical but do note that the 1.0 version is called "Radio Button" and the 1.1 version is called "Radio Group".
https://www.w3.org/TR/wai-aria-practices/#aria_ex
Implementing Keyboard Event Listeners
https://youtu.be/K5DhDLpjdlA
You can find the files for this example in thelesson2-focus/05-radio-groupdirectory within this course's GitHub Repository.
Using the ARIA Authoring Best Practices doc (eitherversion 1.0orversion 1.1) find the radio pattern and implement support for theDown Arrow and Right Arrowpattern using the "roving focus" technique. I should point out that you'll also sometimes see this referred to as "roving tabindex."
Note: The 1.0 version of the doc refers to this as a "Radio Button" whereas the 1.1 version of the doc refers to this as a "Radio Group".
You'll want to work in theradiogroup.jsfile to implement your keyboarding support.