符合ARIA的radiogroup

最新推荐文章于 2022-02-18 19:38:16 发布

转载最新推荐文章于 2022-02-18 19:38:16 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017463769

本文详细介绍了一种使用纯JavaScript实现的RadioGroup组件，该组件能够处理键盘导航、焦点管理和ARIA角色设置，以增强HTML元素的可访问性和用户体验。

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">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
      </div>

      <h3>Drink Options</h3>

      <ul id="group1" class="radiogroup">
        <li class="radio">
          Water
        </li>
        <li class="radio">
          Tea
        </li>
        <li class="radio">
          Coffee
        </li>
        <li class="radio">
          Cola
        </li>
        <li class="radio">
          Ginger Ale
        </li>
      </ul>

      <div>
        <button>Order a drink</button>
      </div>

    </div>

    <script src="radiogroup.js"></script>

  </body>
</html>

省略css，js是核心，以下为部分核心js代码

  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));
    this.el.addEventListener('click', this.handleClick.bind(this));

    // Set ARIA role for the radio group.
    this.el.setAttribute('role', 'radiogroup');

    var firstButton = true;
    for (var button of this.buttons) {
      if (firstButton) {
        button.tabIndex = '0';
        firstButton = false;
      } else {
        button.tabIndex = '-1';
      }
    // Set ARIA role for the radio.
      button.setAttribute('role', 'radio');
    }
  }

上面为radiogroup和radio添加role

RadioGroup.prototype.handleKeyDown = function(e) {
  switch(e.keyCode) {

    case VK_UP:
    case VK_LEFT: {

      e.preventDefault();

      this.focusedIdx--;
      if (this.focusedIdx < 0)
        this.focusedIdx = this.focusedIdx + this.buttons.length;

      break;
    }

    case VK_DOWN:
    case VK_RIGHT: {

      e.preventDefault();

      this.focusedIdx = (this.focusedIdx + 1) % this.buttons.length;

      break;
    }

  case VK_SPACE:
      var focusedButton = e.target;
      var idx = this.buttons.indexOf(focusedButton);
      if (idx < 0)
        return;
      this.focusedIdx = idx;
      break;

    default:
      return;
  }

  this.changeFocus();
};

RadioGroup.prototype.handleClick = function(e) {
  var button = e.target;
  var idx = this.buttons.indexOf(button);
  if (idx < 0)
    return;
  this.focusedIdx = idx;
  this.changeFocus();
};

上为监听器函数

 RadioGroup.prototype.changeFocus = function() {
   // Set the old button to tabindex -1
   this.focusedButton.tabIndex = -1;
   this.focusedButton.removeAttribute('checked');
   this.focusedButton.setAttribute('aria-checked', 'false');

   // Set the new button to tabindex 0 and focus it
   this.focusedButton = this.buttons[this.focusedIdx];
   this.focusedButton.tabIndex = 0;
   this.focusedButton.focus();
   this.focusedButton.setAttribute('checked', '');
   this.focusedButton.setAttribute('aria-checked', 'true');
 };

 var group1 = new RadioGroup('#group1');

}());

aria-checked这个属性不用初始化，可以在焦点改变时修改