ShouBo/web

shou_bo

测试环境部署

打包后，除了data目录，其他的都上传到这里：https://oss.console.aliyun.com/bucket/oss-cn-beijing/zzbbh/object?path=shouBo%2F

data目录上传到上面链接的父目录中。

正式环境部署

注意要用执行build-prod这个script！

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.

无障碍相关

朗读竞争的问题：

需要的功能

• 1.页面更新，朗读页面概述
• 2.tab键或程序调用focus方法（由于按下快捷键或者在连读模式），focus到页面特定区域，朗读页面特定区域概述（结构读屏）
• 3.tab键或程序调用focus方法（由于按下快捷键或者在连读模式），focus到元素，朗读元素内容
• 4.主动hover到元素，朗读元素内容（有延时）
• 5.【点击或回车】触发无障碍菜单按钮，朗读刚刚发生的行为。

要避免的行为

• 点击导致的focus，不可有反应。（记录点击行为的最后一次时间，此后极短时间内focus事件里不朗读，且如果focus到了页面特殊区域（页面结构元素），还要取消focus。）
• 页面更新导致被动hover到元素，不可有反应。（不能用上一次mousemove事件的时间来判断是否要响应hover事件，因为mousemove到按钮上马上点击，也可能导致被动hover。只好在keydown.enter事件以及mousedown事件刚发生后忽略hover事件。）

竞争情况（不考虑极端操作时偶尔的竞争。）

• 1与2：不会竞争
• 1与3：不会竞争
• 1与4：会竞争。移动到某个元素上立刻点击导致页面更新时。改为请求朗读后短时间内不理会hover事件。
• 1与5：点击help按钮时会竞争。改为点击help按钮时不朗读，help页加载后朗读刚刚发生的行为。
• 2与3：不会竞争
• 2与4：不会竞争
• 2与5：不会竞争
• 3与4：不会竞争
• 3与5：不会竞争
• 4与5：会竞争。移动到某个按钮上立刻点击时。改为请求朗读后短时间内不理会hover事件。

特殊class

• aria-control-target: 手动添加。此节点和其后代会受无障碍菜单的控制。
• aria-inverse-theme: 手动添加。此节点的背景文字颜色会和无障碍菜单里的设置相反。
• aria-theme-independent: 手动添加。此节点颜色不会受无障碍设置的影响。
• aria-outline-out: 手动添加。此节点被focus时，outline在节点外围显示而非像默认那样在节点内部边缘显示。
• aria-no-zoom: 手动添加。此节点不会受无障碍菜单里缩放的控制。
• aria-theme-[some color]: 自动添加。设置无障碍颜色时，这个class会被加到带有aria-control-target class的节点上。
• aria-active: 自动添加。开启无障碍功能时添加到html和body上。
• aria-magnifying: 自动添加。开启无障碍功能且开启其中的放大镜功能时添加到body上。

特殊attribute

• data-aria-navigation-area: 手动添加到导航区包裹元素。是导航区的标记。这种包裹元素应该只用于包裹区域、提供tab键focus功能和无障碍提示信息，不应承担其他功能。
• data-aria-viewport-area: 手动添加到视窗区包裹元素。是视窗区的标记。这种包裹元素应该只用于包裹区域、提供tab键focus功能和无障碍提示信息，不应承担其他功能。
• data-aria-interaction-area: 手动添加到交互区包裹元素。是交互区的标记。这种包裹元素应该只用于包裹区域、提供tab键focus功能和无障碍提示信息，不应承担其他功能。
• tabindex: 手动添加，表示这个元素需要能够被聚焦，且在被聚焦、鼠标hover时应该提取出其上储存的无障碍信息来朗读、显示。对于a、button、input等天生可以聚焦的标签，如果不写这个，则能聚焦但不会提取出无障碍信息。
• aria-label: 手动添加，可选，表示元素在无障碍信息中显示的类型，不写的话会根据元素标签得到其在无障碍信息中显示的类型。
• aria-description: 手动添加，可选，表示元素在无障碍信息中显示的详细描述，不写的话会拿元素的innerText作为描述。
• aria-audio-id: 手动添加，可选。表示该元素有预先录制好的音频供朗读，并记录音频id。

特殊node

• <style id="aria-big-cursor-style-node"></style>: （自动添加）大号光标样式代码。
• <style id="aria-zoom-style-node"></style>: （自动添加）缩放样式代码。
• <code aria-audio-id="lalala"></code>: （手动添加）如果不方便给【需要朗读专门录制的音频】的元素添加aria-audio-id attribute，则可以用替代方案：给该元素添加这个code元素作为其第一个子元素。code元素不会显示在页面中。

数据同步

同一个域的多个页面的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发消息。

• aria-show：组件显示
• aria-hide：组件隐藏
• aria-show-magnify-area: magnify区域开始显示
• aria-hide-magnify-area: magnify区域开始隐藏

监听原型对象上的$eventBus的消息。

用于在js中进行无障碍辅助信息的提供

• request-read: 请求朗读指定的文本。
• request-magnify: 请求在大屏幕或曰放大镜区域显示指定的文字
• request-process-text-element: 请求对某个元素的子孙元素中所有符合【是包含文字的叶子节点】这一条件的元素，都添加上tabindex="0"这一attribute。（工作量太大时可以用这招。）

其他组件通过mixin能得到的变量

• 表示当前无障碍配色方案的themeIdx，可用于决定加载哪种颜色的图标。

使用无障碍组件时，路由跳转相关规则

• 单纯的路由跳转，尽量用a标签或router-link标签，不要在点击事件回调里跳转，因为上述标签天生支持键盘操作。
• 复杂逻辑的路由跳转，不得不在事件回调里进行操作时，除了响应click事件，还要响应keydown事件：@keydown.enter.passive...
• 因为前端路由变化不会导致被复用的组件失焦，而很多原本只是hover到某个区域时才显示的东西，比如hover时弹出的菜单，为了支持键盘访问，改为了在focus-within时也显示，又不希望点击后这些东西还在那里显示着，所以：对于点击会导致前端路由改变的东西，可以通过给前端路由对象添加全局后置钩子，在其中令focus的元素blur来解决：router.afterEach(() => {document.activeElement.blur()})；对于不会导致前端路由改变的东西，只好不厌其烦地在点击回调里调用blur了。