Merge pull request #3979 from segmentio/focus-visible-test

forstisabella · web-flow · commit 5ee30e43f912 · 2023-01-03T15:51:16.000-05:00
Site accessibility updates
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -80,6 +80,7 @@
   <link rel="stylesheet" href="{{ '/assets/algolia.css' | relative_url }}">
 </head>
 <body>
+  <a href="#{{ page.title | remove:':' | remove:'?' | remove:'(' | remove:')' | remove:',' | remove:'&' | replace:"'", "-"| replace:'.', '-' | downcase | split:' ' | join:"-" }}" class="skiplink">Skip to main content</a>
   <div id="consent-manager"></div>
   {{ content }}
   <a class="back-scrolling" data-back-scrolling data-active-class="back-scrolling--active">
diff --git a/src/_sass/components/_markdown.scss b/src/_sass/components/_markdown.scss
@@ -388,6 +388,25 @@ tr.show {
   white-space: nowrap;
 }
 
+.skiplink {
+  left: -999px;
+  position: absolute;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.skiplink:focus-visible {
+  outline: 2px solid color(secondary);
+  color: color(secondary);
+  position: static;
+  width: 400px;
+  height: auto;
+  overflow: visible;
+  font-weight: bold;
+}
+
 .device-web-mode,
 .device-mobile-mode {
   background-color: #e6f5ef;
diff --git a/src/_sass/components/_menu-item.scss b/src/_sass/components/_menu-item.scss
@@ -56,6 +56,11 @@
     align-items: center;
     padding: 5px 20px;
 
+    &:focus-visible {
+      border: 2px solid color(secondary);
+      color: color(secondary);
+    }
+
     &:hover {
       color: color(secondary);
       text-decoration: none;
