Merge remote-tracking branch 'origin/restyle-skiplinks'

alphagov · Aug 9, 2013 · 8f2c4d2 · 8f2c4d2
2 parents 4aab63e + f6201eb
commit 8f2c4d2
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/app/assets/stylesheets/accessibility.scss b/app/assets/stylesheets/accessibility.scss
@@ -53,6 +53,33 @@ a:focus {
   outline: 3px solid #ffbf47;
 }
 
+/* Make skiplinks visible when they are tabbed to */
+
+.skiplink {
+  position: absolute;
+  left: -9999em;
+}
+
+.skiplink:focus {
+  position: static;
+}
+
+#skiplink-container {
+  text-align: center;
+  background: $black;
+
+  div {
+    text-align: left;
+    margin: 0 auto;
+    max-width: 1020px;
+  }
+
+  .skiplink {
+    @include inline-block;
+    margin: 0.75em 0 0 30px;
+  }
+}
+
 input:focus,
 textarea:focus,
 select:focus,

diff --git a/app/assets/stylesheets/core.scss b/app/assets/stylesheets/core.scss
@@ -343,8 +343,22 @@ h4 {
 
 header.page-header {
     .skip-to-related {
-      position:absolute;
-      left:-9999em;
+      position: absolute;
+      left: -9999em;
+
+      &:focus {
+        position: relative;
+        @include inline-block;
+        left: 32px;
+        top: -2em;
+      }
+
+      @include media(mobile) {
+        position: relative;
+        @include inline-block;
+        left: 1em;
+        top: -1em;
+      }
     }
 
     div {

diff --git a/app/views/root/_base.html.erb b/app/views/root/_base.html.erb
@@ -23,7 +23,11 @@
   <body<%= content_for?(:body_classes) ? " class=\"#{yield(:body_classes)}\"".html_safe : '' %>>
       <script type="text/javascript">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
 
-    <a href="#<%= local_assigns[:skip_id] || "content" %>" class="visuallyhidden">Skip to main content</a>
+    <div id="skiplink-container">
+      <div>
+        <a href="#<%= local_assigns[:skip_id] || "content" %>" class="skiplink">Skip to main content</a>
+      </div>
+    </div>
 
     <header role="banner" id="global-header">
       <div class="header-wrapper">