Merge pull request #1384 from katlich112358/Focus-Styling-for-Language-Buttons

calebfoss · web-flow · commit 5295b89fa83a · 2023-07-20T12:01:36.000-05:00
Added CSS styling for Language button focus state
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -157,7 +157,7 @@ textarea {
 
 #logo_image {
     position: absolute;
-    top: 0;
+    top: 0;         
 }
 
 #menu.top_menu,
@@ -324,6 +324,7 @@ textarea {
     font-size: 25px;
     padding: 5px;
     opacity: 0;
+    cursor: default;
 }
 
 #skip-to-content:focus {
@@ -2288,7 +2289,8 @@ p + img {
 }
 
 #lockup a:focus {
-    outline: 0;
+    outline: active;
+    outline-style: dotted;
 }
 
 .logo {
@@ -2899,6 +2901,13 @@ iframe {
     z-index: 5;
 }
 
+#i18n-btn a:focus {
+    color: #ed225d;
+    outline: active;
+    outline-style: dotted;
+}
+
+
 #i18n-btn a:hover {
     color: #ed225d;
 }
diff --git a/src/templates/layouts/default.hbs b/src/templates/layouts/default.hbs
@@ -27,7 +27,6 @@
   </head>
   <body>
 
-    <a href="#content" class="sr-only">{{#i18n "Skip-To-Content"}}{{/i18n}}</a>
     {{>i18n}}
     <!-- .container -->
     <div class="container">
diff --git a/src/templates/pages/index.hbs b/src/templates/pages/index.hbs
@@ -10,7 +10,7 @@ slug: /
       <form id="search" method="get" action="https://www.google.com/search">
         <input type="hidden" name="as_sitesearch" value="p5js.org">
         <input id="search_button" type="submit" aria-label="Search" class='sr-only'>
-        <input tabindex="2" id='search_field' type="text" size="20" placeholder="Search p5js.org" name="q">
+        <input id='search_field' type="text" size="20" placeholder="Search p5js.org" name="q">
         <label class="sr-only" for="search_field">Search p5js.org</label>
       </form>
 

Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,7 @@ textarea {`
`157`	`157`
`158`	`158`	`#logo_image {`
`159`	`159`	`position: absolute;`
`160`		`- top: 0;`
	`160`	`+ top: 0;`
`161`	`161`	`}`
`162`	`162`
`163`	`163`	`#menu.top_menu,`
`@@ -324,6 +324,7 @@ textarea {`
`324`	`324`	`font-size: 25px;`
`325`	`325`	`padding: 5px;`
`326`	`326`	`opacity: 0;`
	`327`	`+ cursor: default;`
`327`	`328`	`}`
`328`	`329`
`329`	`330`	`#skip-to-content:focus {`
`@@ -2288,7 +2289,8 @@ p + img {`
`2288`	`2289`	`}`
`2289`	`2290`
`2290`	`2291`	`#lockup a:focus {`
`2291`		`- outline: 0;`
	`2292`	`+ outline: active;`
	`2293`	`+ outline-style: dotted;`
`2292`	`2294`	`}`
`2293`	`2295`
`2294`	`2296`	`.logo {`
`@@ -2899,6 +2901,13 @@ iframe {`
`2899`	`2901`	`z-index: 5;`
`2900`	`2902`	`}`
`2901`	`2903`
	`2904`	`+#i18n-btn a:focus {`
	`2905`	`+ color: #ed225d;`
	`2906`	`+ outline: active;`
	`2907`	`+ outline-style: dotted;`
	`2908`	`+}`
	`2909`	`+`
	`2910`	`+`
`2902`	`2911`	`#i18n-btn a:hover {`
`2903`	`2912`	`color: #ed225d;`
`2904`	`2913`	`}`