无障碍组件对外发的消息更完善

web/README.md

@@ -24,7 +24,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 * 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上。
@@ -59,6 +58,12 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 * audio-error: 音频出错
 * audio-abort: 音频中止（并非暂停，还不知道什么情况下会触发这个）
 
+### 向原型对象上的$eventBus发消息。
+* aria-show：组件显示
+* aria-hide：组件隐藏
+* aria-show-magnify-area: magnify区域开始显示
+* aria-hide-magnify-area: magnify区域开始隐藏
+
 ### 监听原型对象上的$eventBus的消息。
 用于在js中进行无障碍辅助信息的提供
 * request-read: 请求朗读指定的文本。

web/src/assets/css/ariaGlobalStyle.less

@@ -1,9 +1,5 @@
 @import './common.less';
 
-.aria-hide {
-  display: none !important;
-}
-
 .aria-active {
   .aria-theme-default {
     &:focus {

web/src/views/accessibility.vue

@@ -503,6 +503,7 @@ export default {
           document.body.classList.add('aria-active')
           document.documentElement.classList.add('aria-active')
           this.$emit('show')
+          this.$eventBus.$emit('aria-show')
         } else {
           this.onClickReset()
           for (const iterator of document.body.classList) {
@@ -516,6 +517,7 @@ export default {
             }
           }
           this.$emit('hide')
+          this.$eventBus.$emit('aria-hide')
         }
       },
       immediate: true,
@@ -590,10 +592,12 @@ export default {
       handler(v) {
         if (v) {
           document.body.classList.add('aria-magnifying')
+          this.$eventBus.$emit('aria-show-magnify-area')
         } else {
           for (const iterator of document.body.classList) {
             if (iterator === 'aria-magnifying') {
               document.body.classList.remove(iterator)
+              this.$eventBus.$emit('aria-hide-magnify-area')
             }
           }
         }