barbican-reset 1.4.5 → 1.4.6

package/components/skip_link.vue

@@ -0,0 +1,43 @@
+<template>
+  <a :href="href" :class="$style.skiplink">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "SkipLink",
+  props: {
+    href: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.skiplink {
+  border: 0.25rem solid $black;
+  background-color: $white;
+  display: inline-block;
+  border-radius: 0.5rem;
+  position: absolute;
+  padding: 0.5rem;
+  color: $black;
+  margin: auto;
+  width: 12rem;
+  z-index: -1;
+  top: 0.5rem;
+  opacity: 0;
+  right: 0;
+  left: 0;
+  
+  @include focus {
+    opacity: 1;
+    z-index: 2;
+  }
+}
+
+</style>

package/index.js

@@ -22,6 +22,7 @@ import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
 import VideoContent from './components/video_content'
 import PaymentLogo from './components/payment_logo'
+import SkipLink from './components/skip_link'
 
 export { 
   Loader, 
@@ -46,5 +47,6 @@ export {
   HelpRow,
   CardDisplay,
   VideoContent,
-  PaymentLogo
+  PaymentLogo,
+  SkipLink
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/table/_preferences.scss

@@ -67,6 +67,11 @@ table.preferences {
       input[type=radio] {
         position: relative;
         @include inset(auto);
+
+        @include focus {
+          outline: 0.15rem solid $blue;
+          outline-offset: 0.25rem;
+        }
       }
     }
   }