Show anchored headings on focus

The anchored headings are included in the tab order but were previously invisible when active. This gives them an active state consistent with the rest of the document.

The padding changes are so that the icon is visually centered when the element is highlighted.

template/source/stylesheets/modules/_anchored-heading.scss

@@ -8,8 +8,8 @@
   &__icon {
     position: absolute;
     width: $icon-width;
-    left: -($icon-width + $icon-spacing);
-    padding-right: $icon-spacing;
+    left: -($icon-width + ($icon-spacing * 2));
+    padding: 0 $icon-spacing;
     margin-top: -1px;
 
     opacity: 0;
@@ -20,7 +20,7 @@
 
     background-image: file-url('anchored-heading-icon.png');
     background-repeat: no-repeat;
-    background-position: left center;
+    background-position: center center;
 
     @include device-pixel-ratio {
       background-image: file-url('anchored-heading-icon-2x.png');
@@ -37,4 +37,12 @@
       opacity: 1;
     }
   }
+
+  &__icon:focus {
+    @include media(tablet) {
+      opacity: 1;
+      outline-width: 1px;
+      padding: 0 ($icon-spacing - 1);
+    }
+  }
 }