先聊聊 Toolbar，咱们怎么把它变成无障碍神器

说实话，Zuo UI 那玩意儿，常常被忽视的就是可访问性。

你想啊，键盘党、盲人用户，dou要Neng顺畅操作。

所以今天咱们就来掰扯掰扯，怎么把一个普通的 Toolbar 打造成“人人爱”的无障碍组件。

别担心，我不会一板一眼地罗列条条框框，随口聊聊，偶尔啰嗦一下甚至来点小错误，你懂的。

Zui核心的，是给容器加上 role="toolbar"。

再配合 aria-label 或者 aria-labelledby 告诉屏幕阅读器这玩意儿是干嘛的。

方向属性 aria-orientation="horizontal"或者 "vertical" 也得写上。

  粗体
  斜体
  下划线

上面这段代码，kan起来hen普通，但Ru果不加点键盘管理，那就只是一堆按钮而Yi。

这里有段 JS 小技巧，你Ke以直接 copy 用：

// 初始化时只有第一个控件 tabindex=""
 // 其他控件 tabindex="-"
// 当焦点移动时geng新 tabindex
setFocusedControl {
  this.controls.forEach => {
    control.setAttribute;
  });
}

不对不对，这里应该是类里的一段方法，我刚才写漏了前面的 class 定义。

class Toolbar {
  constructor {
    this.toolbar = element;
    this.controls = Array.from(
      this.toolbar.querySelectorAll(
        'button, , input, select, , ',
      ),
    );
    this.orientation = this.toolbar.getAttribute || 'horizontal';
    this.init;
  }
  init {
    // 键盘事件
    this.toolbar.addEventListener);
    // 焦点管理
    this.controls.forEach => {
      control.addEventListener => this.setFocusedControl);
    });
  }
  handleKeyDown {
    const currentIndex = this.controls.indexOf;
    if  return;
    let nextIndex = -1;
    switch  {
      case 'ArrowLeft':
        if  {
          e.preventDefault;
          nextIndex = this.getPreviousIndex;
        }
        break;
      case 'ArrowRight':
        if  {
          e.preventDefault;
          nextIndex = this.getNextIndex;
        }
        break;
      case 'ArrowUp':
        if  {
          e.preventDefault;
          nextIndex = this.getPreviousIndex;
        }
        break;
      case 'ArrowDown':
        if  {
          e.preventDefault;
          nextIndex = this.getNextIndex;
        }
        break;
      case 'Home':
        e.preventDefault;
        nextIndex = 0;
        break;
      case 'End':
        e.preventDefault;
        nextIndex = this.controls.length - 1;
        break;
    }
    if  {
      this.focusControl;
    }
  }
  getPreviousIndex {
    // 循环到末尾
    return current === 0 ? this.controls.length - 1 : current - 1;
  }
  getNextIndex {
    // 循环到开头
    return current === this.controls.length - 1 ? 0 : current + 1;
  }
  focusControl {
    const ctrl = this.controls;
    if  ctrl.focus;
  }
  setFocusedControl {
    // geng新 tabindex，实现 roving tabindex
    this.controls.forEach => {
      c.setAttribute;
    });
  }
}
// 初始化
const toolbarEl = document.querySelector;
new Toolbar;

哈哈，这种错误太常见了。

没有 role，屏幕阅读器根本不知道这是工具栏，只会把每个按钮当独立元素读出来。

说实话，Ru果每个按钮dou有正常的 ，Tab 键会把焦点一次跳到每个按钮。

document.addEventListener => {
  if  {
     e.preventDefault;
     const tb = document.querySelector;
     const first = tb.querySelector;
     first && first.focus;
   }
});

   B
   粗体