[A11y] 基本的无障碍支持

[inkydragon]

虽然准备换用新前端了。但毕竟还要一段时间。
我就先在这边的基础上修了一下。
发一个 pr 以供后人参考

xref: #62

主要的修改

• label 与 输入控件要互相关联。登录页的账号、密码就是很好的例子。
• 没有描述文本的重要节点，通过 aria-label 添加无障碍描述
• 为了美观而无实际功能的节点通过 aria-hidden="true" 在无障碍树中隐藏
• 尽可能地使用语义上正确的节点类型，比如是按钮就用 button。
  如果用其他类型 a/div 等模拟，就还要考虑键盘操作的问题。
  例如：button 默认可以用空格键按下。
• 参考 tippy.js 的文档开启了弹窗的无障碍
• Modal
  • 给 Modal 多加了个参数，用作隐藏的 checkbox 节点的名字
  • 把 Modal 对应可见的控件，从无障碍树中隐藏。对应的功能通过不可见的 checkbox 进行
  • 这里弹窗的按钮因为是 input 格式的，没法用键盘操作，所以我在其他分支上做了 hack ，直接新加了很多真正的按钮

仍存在的问题

• 发送验证码按下后，暂停时间不可读
• 弹窗的按钮基本都无法使用，因为不是正常的 button
• 分区选择，用键盘操作只能选主分区，无法选择细分分区
• 侧边栏弹出提示，不会被视障者感受到。需要有文本或声音提示
• 其他待深入测试...

不过这些也不着急修了，因为现在这样就基本可用。
可以在写新前端时就考虑一些无障碍的设计，提前规避一些坑。

参考

• ARIA无障碍网页应用属性 速查 http://h-ui.net/Hui-notes-ARIA.shtml
• 常见的 a11y 警告及改正方法 https://open-wc.org/docs/linting/eslint-plugin-lit-a11y/overview/
• 浏览器插件: WAVE Evaluation Tool
• chrome 开发者工具：元素/辅助功能/启用整页辅助功能树。然后再元素的右上角点击按钮开启
  这棵树就是视障者眼中的网页

其他的备注

• 另外如果想要自己尝试屏幕阅读器，推荐使用开源的 https://nvdacn.com/
• 操作网页时是仅限键盘，一般通过方向键（上下左右）和 TAB/shift+TAB 来导航然后回车/空格选择。
• 建议主要使用方向键进行操作，TAB 键跳过的东西太多了
• 纯键盘操作参考 https://webaim.org/techniques/keyboard/#testing