Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/ShouBo into master

web/src/views/accessibilityMixin.js

@@ -14,17 +14,23 @@ export default {
       } else {
         this.themeIdx = idx
       }
+    },
+    updateColorThemeByStorage() {
+      const settings = localStorage.getItem('ariaSettings')
+      if (settings) {
+        this.themeIdx = JSON.parse(settings).themeIdx
+      }
     }
   },
   created() {
     this.updateColorTheme()
-    window.addEventListener('storage', this.updateColorTheme, {
+    window.addEventListener('storage', this.updateColorThemeByStorage, {
       passive: true,
     })
     this.$eventBus.$on('color-modification', this.updateColorTheme)
   },
   destroyed() {
-    window.removeEventListener('storage', this.updateColorTheme, {
+    window.removeEventListener('storage', this.updateColorThemeByStorage, {
       passive: true,
     })
     this.$eventBus.$off('color-modification', this.updateColorTheme)

web/src/views/layout/index.vue

@@ -184,15 +184,24 @@
           data-aria-viewport-area
           tabindex="0"
           aria-label
-          aria-description="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
+          aria-description="You've reached the pop-up window section, which has one search field, one URL and one image. Please use the tab key to go through the information."
         >
-          <li class="searchLi" v-if="!menaInd.includes('Search')">
+          <li
+            class="searchLi"
+            v-if="!menaInd.includes('Search')"
+            aria-label
+            aria-description="You've reached the search field, please use the tab key to browse the content."
+            tabindex="0"
+          >
             <div class="searchHover">
               <div class="ll" @click="search2">
                 <img src="@/assets/images/LayoutSearch2.jpg" alt="" />
               </div>
               <div class="rr" @keyup.enter="search2">
-                <input type="text" placeholder="search" v-model="searchTxt2" />
+                <input type="text" placeholder="search" v-model="searchTxt2"
+                  tabindex="0"
+                  :aria-description="searchTxt2 || 'search'"
+                />
               </div>
             </div>
             <img src="@/assets/images/LayoutSearch.png" alt="" />
@@ -589,7 +598,7 @@ export default {
           }
         }
       }
-      &:hover {
+      &:hover, &:focus-within {
         .searchHover {
           opacity: 1;
           pointer-events: auto;