Fix page overflow caused by highlights close to borders

Highlights contains two pseudo-elements (`::before` and `::after`) with
text for assistive technologies. Because these elements have dimensions,
on RTL languages a highlight near the right border of the document,
makes the `::after` pseudo-element to overflow the page to the right.

Based on similar classes from other popular CSS frameworks, I made these
pseudo-elements to have
1 x 1px dimensions. This does not affect negatively the screen readers.

Example:

- Bootstrap: https://github.com/twbs/bootstrap/blob/c2f67d72e8010307f657b2a55ae93fc5c9cab2a5/scss/mixins/_visually-hidden.scss#L9-L17

- Foundation: https://github.com/foundation/foundation-sites/blob/258d9eb3432d7e497f41b4554f4116d5c59c92a8/scss/util/_mixins.scss#L217-L224

Closes #2811

src/styles/annotator/highlights.scss

@@ -34,7 +34,7 @@
       @include a11y.screen-reader-only;
 
       // nb. The leading/trailing spaces are intended to ensure the text is treated
-      // as separate words by assisitve technologies from the content before/after it.
+      // as separate words by assistive technologies from the content before/after it.
       content: ' annotation start ';
     }
     &::after {

src/styles/mixins/a11y.scss

@@ -6,6 +6,9 @@
 @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