When you developing a complex component by your own, one thing you cannot ignore is Accessibility.
Checkout this link. It lists all things you need to do regarding to accessibility when implements a complex component.
The tech we are using is: Roving Focus
Take radio group as an example, when doing roving focus, we set current focus element's:
tabindex = "0 " checked="checked"
And set other elements to:
tabindex="-1"
(function() { 'use strict'; // Define values for keycodes var VK_ENTER = 13; var VK_SPACE = 32; var VK_LEFT = 37; var VK_UP = 38; var VK_RIGHT = 39; var VK_DOWN = 40; // Helper function to convert NodeLists to Arrays function slice(nodes) { return Array.prototype.slice.call(nodes); } function RadioGroup(id) { this.el = document.querySelector(id); this.buttons = slice(this.el.querySelectorAll('.radio')); this.focusedIdx = 0; this.focusedButton = this.buttons[this.focusedIdx]; this.el.addEventListener('keydown', this.handleKeyDown.bind(this)); } RadioGroup.prototype.handleKeyDown = function(e) { switch(e.keyCode) { case VK_UP: case VK_LEFT: { e.preventDefault(); // This seems like a good place to do some stuff :) if(this.buttons && this.buttons.length && this.focusedIdx > 0) { this.focusedIdx -= 1; } else if(this.buttons && this.buttons.length && this.focusedIdx === 0) { this.focusedIdx = this.buttons.length - 1; } break; } case VK_DOWN: case VK_RIGHT: { e.preventDefault(); // This seems like a good place to do some stuff :) if(this.buttons && this.buttons.length && this.focusedIdx < this.buttons.length - 1) { this.focusedIdx += 1; } else if(this.buttons && this.buttons.length && this.focusedIdx === this.buttons.length - 1) { this.focusedIdx = 0; } break; } } this.changeFocus(this.focusedIdx); // <-- Hmm, interesting... }; RadioGroup.prototype.changeFocus = function(idx) { // Set the old button to tabindex -1 this.focusedButton.tabIndex = -1; this.focusedButton.removeAttribute('checked'); // Set the new button to tabindex 0 and focus it this.focusedButton = this.buttons[idx]; this.focusedButton.tabIndex = 0; this.focusedButton.focus(); this.focusedButton.setAttribute('checked', 'checked'); }; var group1 = new RadioGroup('#group1'); }());
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="demo"> <h3>Drink Options</h3> <ul id="group1" class="radiogroup"> <li tabindex="0" class="radio" checked> Water </li> <li tabindex="-1" class="radio"> Tea </li> <li tabindex="-1" class="radio"> Coffee </li> <li tabindex="-1" class="radio"> Cola </li> <li tabindex="-1" class="radio"> Ginger Ale </li> </ul> </div> <script src="radiogroup.js"></script> </body> </html>