a11y: improve outline style for menu controls #581

layouts/partials/menu.html

@@ -70,10 +70,10 @@
         <div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
           <ul>
             <li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
-              <div class="padding select-container">
+              <div class="padding menu-control">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
-                <div class="select-style">
+                <div class="control-style">
                   <label class="a11y-only" for="select-language">{{ T "Language" }}</label>
                   <select id="select-language" onchange="location = baseUri + this.value;">
                     {{- $page := .Page }}
@@ -92,14 +92,14 @@
                     {{- end }}
                   </select>
                 </div>
-                <div class="select-clear"></div>
+                <div class="clear"></div>
               </div>
             </li>
             <li id="select-variant-container" class="footerVariantSwitch{{if $showvariantswitch}} showVariantSwitch{{end}}">
-              <div class="padding select-container">
+              <div class="padding menu-control">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
-                <div class="select-style">
+                <div class="control-style">
                   <label class="a11y-only" for="select-variant">{{ T "Theme" }}</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
                     {{- $firstvariant := true }}
@@ -115,11 +115,20 @@
                     {{- end }}
                   </select>
                 </div>
-                <div class="select-clear"></div>
+                <div class="clear"></div>
               </div>
               <script>window.variants && variants.markSelectedVariant();</script>
             </li>
-            <li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}"><button class="padding" onclick="clearHistory();"><i class="fas fa-history fa-fw"></i><span>&nbsp;</span>{{ T "Clear-History" }}</button></li>
+            <li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
+              <div class="padding menu-control">
+                <i class="fas fa-history fa-fw"></i>
+                <span>&nbsp;</span>
+                <div class="control-style">
+                  <button onclick="clearHistory();">{{ T "Clear-History" }}</button>
+                </div>
+                <div class="clear"></div>
+              </li>
+            </div>
           </ul>
         </div>
         <div id="footer" class="footerFooter{{if $showfooter}} showFooter{{end}}">

static/css/ie.css

@@ -155,11 +155,11 @@
 	.anchor {
 		margin-left: .66em;
 	}
-	html[dir="rtl"] .select-container i,
-	html[dir="rtl"] .select-container span {
+	html[dir="rtl"] .menu-control i,
+	html[dir="rtl"] .menu-control span {
 		float: left;
 	}
-	.footerVisitedLinks > * {
+	.menu-control > button {
 		text-align: left;
 	}
 	.searchform input {
@@ -214,7 +214,6 @@
 		font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
 	}
 
-	.footerVisitedLinks > *,
 	a,
 	.anchor,
 	#toc-menu,
@@ -262,17 +261,15 @@
 	}
 
 	#sidebar .collapsible-menu label,
-	#sidebar .select-container,
-	#sidebar a,
-	#sidebar button {
+	#sidebar .menu-control,
+	#sidebar a {
 		color: rgba( 186, 186, 186, 1 ); /* var(--MENU-SECTIONS-LINK-color) */
 	}
 
 	#sidebar select:hover,
 	#sidebar .collapsible-menu li:not(.active) > label:hover,
-	#sidebar .select-container:hover,
-	#sidebar a:hover,
-	#sidebar button:hover {
+	#sidebar .menu-control:hover,
+	#sidebar a:hover {
 		color: rgba( 255, 255, 255, 1 ); /* var(--MENU-SECTIONS-LINK-HOVER-color) */
 	}
 
@@ -828,7 +825,7 @@
         display: block;
     }
 
-	.select-style select::-ms-expand {
+	.menu-control select::-ms-expand {
 		/* hide the triangle */
 		display: none;
 	}

static/css/theme-neon.css

@@ -174,9 +174,8 @@ body .searchbox span:hover {
 
 body #sidebar select:hover,
 body #sidebar .collapsible-menu li:not(.active) > label:hover,
-body #sidebar .select-container:hover,
-body #sidebar a:hover,
-body #sidebar button:hover {
+body #sidebar .menu-control:hover,
+body #sidebar a:hover {
     color: rgba( 255, 255, 255, 1 );
     text-shadow:
         0 0  1px rgba( 255, 255, 255, 1 ),

static/css/theme.css

@@ -1456,57 +1456,64 @@ h6 a {
     margin-top: 1rem;
 }
 
-.select-container i {
-    padding-top: .25em;
-}
-
-.select-container i,
-.select-container span {
-    display: block;
-    float: left;
-}
-html[dir="rtl"] .select-container i,
-html[dir="rtl"] .select-container span {
-    float: right;
-}
-
-#sidebar ul select {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-.select-style {
+.menu-control .control-style {
     border: 0;
     border-radius: 0;
+    cursor: pointer;
     height: 1.574em;
     overflow: hidden;
 }
 
-.select-style select {
-    -webkit-appearance: none;
-    appearance: none;
-    border: none;
-    box-shadow: none;
-    background-color: transparent;
-    background-image: none;
-    width: 100%;
+.menu-control i {
+    padding-top: .25em;
 }
 
-.select-style select:focus {
-    outline: none;
+.menu-control i,
+.menu-control span {
+    cursor: pointer;
+    display: block;
+    float: left;
+}
+html[dir="rtl"] .menu-control i,
+html[dir="rtl"] .menu-control span {
+    float: right;
 }
 
-.select-style :hover {
+.menu-control :hover,
+.menu-control i:hover,
+.menu-control span:hover {
     cursor: pointer;
 }
 
-.select-style option {
+.menu-control select,
+.menu-control button {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+}
+.menu-control select {
+    background-color: transparent;
+    background-image: none;
+    border: none;
+    box-shadow: none;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.menu-control option {
     color: rgba( 0, 0, 0, 1 );
     padding: 0;
     margin: 0;
 }
 
-.select-clear {
+.menu-control button {
+    background-color: transparent;
+	cursor: pointer;
+    display: block;
+    text-align: start;
+}
+
+.clear {
     clear: both;
 }
 
@@ -1524,16 +1531,6 @@ html[dir="rtl"] .select-container span {
     display: initial;
 }
 
-.footerVisitedLinks > * {
-    -webkit-appearance: none;
-    appearance: none;
-    background: transparent;
-	cursor: pointer;
-    text-align: start;
-    text-decoration: none;
-    width: 100%;
-}
-
 @media screen and (max-width: 48rem) {
     #breadcrumbs .links {
         display: none;

static/css/variant.css

@@ -10,7 +10,6 @@ body {
     font-family: var(--INTERNAL-MAIN-font);
 }
 
-.footerVisitedLinks > *,
 a,
 .anchor,
 #toc-menu,
@@ -51,17 +50,15 @@ a:hover,
 }
 
 #sidebar .collapsible-menu label,
-#sidebar .select-container,
-#sidebar a,
-#sidebar button {
+#sidebar .menu-control,
+#sidebar a {
     color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
 }
 
 #sidebar select:hover,
 #sidebar .collapsible-menu li:not(.active) > label:hover,
-#sidebar .select-container:hover,
-#sidebar a:hover,
-#sidebar button:hover {
+#sidebar .menu-control:hover,
+#sidebar a:hover {
     color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
 }