소스 검색

首页添加新的搜索控件后,实现合理的键盘访问功能和无障碍提示功能。

任一存 2 년 전
부모
커밋
9e3780e8a9
1개의 변경된 파일13개의 추가작업 그리고 4개의 파일을 삭제
  1. 13 4
      web/src/views/layout/index.vue

+ 13 - 4
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="" />
@@ -585,7 +594,7 @@ export default {
           }
         }
       }
-      &:hover {
+      &:hover, &:focus-within {
         .searchHover {
           opacity: 1;
           pointer-events: auto;