Explorar el Código

优化无障碍配色,避免outline和background同色;tabindex=-1的元素不要outline。

任一存 hace 3 años
padre
commit
5b2c5f2103
Se han modificado 2 ficheros con 18 adiciones y 18 borrados
  1. 16 16
      web/src/assets/css/ariaGlobalStyle.less
  2. 2 2
      web/src/views/Visit/Visit2.vue

+ 16 - 16
web/src/assets/css/ariaGlobalStyle.less

@@ -2,11 +2,11 @@
 
 .aria-active {
   .aria-theme-default {
-    &:focus {
+    &:focus:not([tabindex='-1']) {
       outline: 3px solid red;
     }
     * {
-      &:focus {
+      &:focus:not([tabindex='-1']) {
         outline: 3px solid red;
       }
     }
@@ -15,13 +15,13 @@
   .aria-theme-white {
     background-color: white !important;
     color: black !important;
-    &:focus {
+    &:focus:not([tabindex='-1']) {
       outline: 3px solid black;
     }
     * { // TODO: 看看博物馆项目代码有没有精细地只给需要变色的元素添加class。
       background-color: white !important;
       color: black !important;
-      &:focus {
+      &:focus:not([tabindex='-1']) {
         outline: 3px solid black;
       }
     }
@@ -41,14 +41,14 @@
   .aria-theme-blue {
     background-color: blue !important;
     color: yellow !important;
-    &:focus {
-      outline: 3px solid blue;
+    &:focus:not([tabindex='-1']) {
+      outline: 3px solid yellow;
     }
     * {
       background-color: blue !important;
       color: yellow !important;
-      &:focus {
-        outline: 3px solid blue;
+      &:focus:not([tabindex='-1']) {
+        outline: 3px solid yellow;
       }
     }
     a {
@@ -67,14 +67,14 @@
   .aria-theme-yellow {
     background-color: yellow !important;
     color: black !important;
-    &:focus {
-      outline: 3px solid yellow;
+    &:focus:not([tabindex='-1']) {
+      outline: 3px solid black;
     }
     * {
       background-color: yellow !important;
       color: black !important;
-      &:focus {
-        outline: 3px solid yellow;
+      &:focus:not([tabindex='-1']) {
+        outline: 3px solid black;
       }
     }
     a {
@@ -93,14 +93,14 @@
   .aria-theme-black {
     background-color: black !important;
     color: yellow !important;
-    &:focus {
-      outline: 3px solid black;
+    &:focus:not([tabindex='-1']) {
+      outline: 3px solid yellow;
     }
     * {
       background-color: black !important;
       color: yellow !important;
-      &:focus {
-        outline: 3px solid black;
+      &:focus:not([tabindex='-1']) {
+        outline: 3px solid yellow;
       }
     }
     a {

+ 2 - 2
web/src/views/Visit/Visit2.vue

@@ -15,7 +15,7 @@
         Museum's WeChat account for reservation.<span>X</span>
       </div>
     </div> -->
-    <div class="mm1">
+    <div class="mm1" tabindex="-1">
       <div class="mm1l">
         <p>
           <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
@@ -37,7 +37,7 @@
         <!-- <h2 tabindex="0">Online Reservation</h2> -->
       </div>
     </div>
-    <div class="sidebar">
+    <div class="sidebar" tabindex="-1">
       <ul>
         <!-- 第一个内容 -->
         <li class="title">