feat [front]: accessibility styles

front/css/a11y.sass

@@ -0,0 +1,72 @@
+/*
+ * Focus States
+ */
+
+ // thanks @cityssm/bulma-a11y
+
+a:focus,
+button:focus 
+  outline-color: $black
+  outline-offset: 4px
+  outline-style: dotted !important
+  outline-width: 2px !important
+
+  .has-background-black &,
+  .has-background-dark & 
+    outline-color: $white
+  
+a:focus 
+
+  .has-text-white 
+    outline-color: $white
+  
+.button:focus 
+
+  &.is-black 
+    outline-color: $black
+  
+  &.is-danger 
+    outline-color: $danger-dark
+  
+  &.is-dark 
+    outline-color: $dark
+  
+  &.is-info 
+    outline-color: $info-dark
+  
+  &.is-link 
+    outline-color: $link-dark
+  
+  &.is-primary 
+    outline-color: $primary-dark
+  
+  &.is-success 
+    outline-color: $success-dark
+  
+  &.is-warning 
+    outline-color: $warning-dark
+  
+  .has-background-black &.is-inverted,
+  .has-background-dark &.is-inverted 
+    outline-color: $white
+  
+/*
+ * Skip Links
+ */
+
+a.is-sr-only:focus,
+button.is-sr-only:focus 
+  position: fixed !important
+  top: 10px
+  left: 10px
+  z-index: 100
+  width: initial !important
+  height: initial !important
+  padding: $button-padding-vertical $button-padding-horizontal !important
+  overflow: initial !important
+  clip: initial !important
+  white-space: initial !important
+
+  &:not(.button) 
+    background-color: $body-background-color
+    border: initial !important

front/css/app.sass

@@ -28,6 +28,7 @@
 @import "bulma/sass/helpers/other"
 @import "bulma/sass/layout/section"
 @import "bulma/sass/layout/footer"
+@import "a11y"
 
 @import "movie-card"
 @import "fonts"