Merge pull request #220 from hypothesis/a11y-css

Bring accessibility- and focus-related mixins and utils into package

styles/mixins/_a11y.scss

@@ -0,0 +1,19 @@
+// Hide content from sighted users but make it visible to screen readers.
+//
+// Resources:
+// - https://webaim.org/techniques/css/invisiblecontent/ (see "CSS clip")
+// - https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/#showing-additional-content-for-screen-readers
+@mixin screen-reader-only {
+  // Take the content out of the normal layout flow.
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+
+  // Visually hide the content and prevent it from interfering with mouse/touch
+  // text selection by clipping it to an empty box. Compared to moving content with
+  // `top`/`left` this is less likely to cause the browser to scroll to a
+  // different part of the page when the hidden text has screen-reader focus.
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}

styles/util/_a11y.scss

@@ -0,0 +1,5 @@
+@use '../mixins/a11y';
+
+.hyp-u-screen-reader-only {
+  @include a11y.screen-reader-only;
+}

styles/util/_focus.scss

@@ -7,3 +7,15 @@
 .hyp-u-focus-outline--inset {
   @include focus.outline($inset: true);
 }
+
+.hyp-u-focus-outline--hide {
+  @include focus.outline--hide;
+}
+
+.hyp-u-outline-on-keyboard-focus {
+  @include focus.outline-on-keyboard-focus;
+}
+
+.hyp-u-outline-on-keyboard-focus--inset {
+  @include focus.outline-on-keyboard-focus($inset: true);
+}

styles/util/index.scss

@@ -1,3 +1,4 @@
+@use 'a11y';
 @use 'atoms';
 @use 'colors';
 @use 'focus';