# shou_bo

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

# 无障碍相关

## 特殊tabindex
所有需要能通过tab键focus，并进一步朗读、在放大镜区域显示的元素（几乎是所有叶子元素）都需要添加tabindex attribute。tabindex具体取值是0还是-1还是正值，还需要依据产品设计而定。

## 特殊class
* aria-control-target: 手动添加。此节点和其后代会受无障碍菜单的控制。
* aria-theme-inverse: 手动添加。此节点的背景文字颜色会和无障碍菜单里的设置相反。
* aria-no-zoom: 手动添加。此节点不会受无障碍菜单里缩放的控制。
* aria-hide: 手动添加。此节点不会显示，只是为了tab键focus。
* aria-theme-[some color]: 自动添加。设置无障碍颜色时，这个class会被加到带有aria-control-target class的节点上。
* aria-active: 自动添加。开启无障碍功能时添加到html和body上。
* aria-magnifying: 自动添加。开启无障碍功能且开启其中的放大镜功能时添加到body上。

## 特殊attribute
（使用第三方vue组件时无法直接在组件内部需要focus的元素上应用class，但良好的组件（以element-ui为例）似乎会将data-xxx attribute作为组件prop接收并应用在组件内部最重要的元素（如el-input里的input）上，从而可以在js中基于某个固定的data-xxx attribute来找到我们想要的组件内部元素，进而focus它。所以，对于页面特殊区域，不应该使用class来标记，而应该用data-xxx attribute来标记。）
* data-aria-navigation-area: 手动添加到导航区。
* data-aria-viewport-area: 手动添加到视窗区。
* data-aria-interactive-area: 手动添加到交互区。
* tabindex: 手动添加，表示这个元素需要在被聚焦、鼠标hover时提取出无障碍信息来朗读、显示。
* aria-label: 手动添加，可选，表示元素在无障碍信息中显示的类型，不写的话会根据元素标签得到其在无障碍信息中显示的类型。
* aria-description: 手动添加，可选，表示元素在无障碍信息中显示的详细描述，不写的话会拿元素的innerText作为描述。

## 特殊node（自动添加）
* `<style id="aria-big-cursor-style-node"></style>`: 大号光标样式代码。
* `<style id="aria-zoom-style-node"></style>`: 缩放样式代码。

## 数据同步
同一个域的多个页面的accessibility组件实例、该域下的唯一一份local storage之间的无障碍菜单设置会自动同步。

初次加载一个组件实例，改变设置，自动保存到storage，触发storage事件，自动从storage读取设置，同步到组件，不会导致组件设置变化，over。

第二次加载一个组件实例，起初为默认设置状态，自动从storage读取到设置，同步给该组件，因为该组件新设置状态与storage中相同，不会再同步回storage，over。

在另一个页面改变组件实例设置状态，自动把该组件新的设置状态保存到storage，触发storage事件，自动把storage数据同步给当前所有加载了的组件，导致有些组件状态变化，但所有组件的新状态都和storage相同不会再同步回storege，over。

## 无障碍组件与外界的消息沟通

### 向本组件$emit
* show：组件显示
* hide：组件隐藏
* audio-end: 音频播放结束
* audio-error: 音频出错
* audio-abort: 音频中止（并非暂停，还不知道什么情况下会触发这个）

### 监听原型对象上的$eventBus的消息
* request-read: 请求朗读指定的文本