[HTML5] Accessibility Implementation for complex component

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>