Use mark instead of span

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/highlighter",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

src/Highlight.ts

@@ -1,6 +1,5 @@
 import * as uuid from 'uuid/v4';
 import dom from './dom';
-import { DATA_SCREEN_READERS_ATTR_SELECTOR } from './injectHighlightWrappers';
 import SerializedHighlight from './SerializedHighlight';
 
 export const FOCUS_CSS = 'focus';
@@ -14,6 +13,7 @@ export interface IHighlightData {
 export interface IOptions {
   skipIDsBy?: RegExp;
   formatMessage: (descriptor: { id: string }, values: { style: IHighlightData['style'] }) => string;
+  tabbable?: boolean;
 }
 
 export default class Highlight {
@@ -93,11 +93,15 @@ export default class Highlight {
     return this;
   }
 
-  /**
-   * Add class 'focus' to all elements of this highlight.
-   */
+  public updateStartMarker(el: HTMLElement, position: string) {
+    el.dataset.startMessage = this.getMessage(`i18n:highlighter:highlight:${position}`);
+  }
+
   public addFocusedStyles(): Highlight {
-    this.elements.forEach((el: HTMLElement) => el.classList.add(FOCUS_CSS));
+    this.elements.forEach((el: HTMLElement) => {
+      el.classList.add(FOCUS_CSS);
+      this.updateStartMarker(el, 'start-selected');
+    });
     return this;
   }
 
@@ -106,12 +110,8 @@ export default class Highlight {
    * @return boolean indicating if the action was a success.
    */
   public focus(): boolean {
-    const focusableElement = this.elements[0].querySelector(DATA_SCREEN_READERS_ATTR_SELECTOR) as HTMLElement | null;
-    if (focusableElement) {
-      focusableElement.focus();
-      return true;
-    }
-    return false;
+    this.elements[0].focus();
+    return true;
   }
 
   public intersects(range: Range): boolean {

src/Highlighter.ts

@@ -1,7 +1,7 @@
 import { debounce } from 'lodash';
 import dom, { isHtmlElement } from './dom';
 import Highlight, { FOCUS_CSS, IHighlightData, IOptions as HighlightOptions } from './Highlight';
-import injectHighlightWrappers, { DATA_ATTR, DATA_ID_ATTR, DATA_SCREEN_READERS_ATTR } from './injectHighlightWrappers';
+import injectHighlightWrappers, { DATA_ATTR, DATA_ID_ATTR } from './injectHighlightWrappers';
 import { rangeContentsString } from './rangeContents';
 import removeHighlightWrappers from './removeHighlightWrappers';
 import { getRange, snapSelection } from './selection';
@@ -21,6 +21,7 @@ interface IOptions {
   onSelect?: (highlights: Highlight[], newHighlight?: Highlight) => void;
   onFocusIn?: (highlight: Highlight) => void;
   onFocusOut?: (highlight: Highlight) => void;
+  tabbable?: boolean;
 }
 
 export default class Highlighter {
@@ -42,6 +43,7 @@ export default class Highlighter {
       onFocusOut: () => {
         this.clearFocusedStyles();
       },
+      tabbable: true,
       ...options,
     };
     this.debouncedSnapSelection = debounce(this.snapSelection, ON_SELECT_DELAY);
@@ -96,21 +98,39 @@ export default class Highlighter {
     return this.container.querySelector(`[id="${id}"]`);
   }
 
+  public getHighlightFromElement(el: Element) {
+    const highlightId = el.getAttribute('data-highlight-id');
+
+    if (!highlightId) {
+      return null;
+    }
+    return this.getHighlight(highlightId);
+  }
+
   public clearFocusedStyles(): void {
-    this.container.querySelectorAll(`.${this.options.className}.${FOCUS_CSS}`)
-      .forEach((el: Element) => el.classList.remove(FOCUS_CSS));
+    this.container.querySelectorAll<HTMLElement>(`.${this.options.className}.${FOCUS_CSS}`)
+      .forEach((el) => {
+        const highlight = this.getHighlightFromElement(el);
+
+        if (!highlight) {
+          return;
+        }
+        el.classList.remove(FOCUS_CSS);
+        highlight.updateStartMarker(el, 'start');
+      });
   }
 
   public getHighlights(): Highlight[] {
     return Object.values(this.highlights);
   }
 
   public getHighlightOptions(): HighlightOptions {
-    const { formatMessage, skipIDsBy } = this.options;
+    const { formatMessage, skipIDsBy, tabbable } = this.options;
 
     return {
       formatMessage,
       skipIDsBy,
+      tabbable,
     };
   }
 
@@ -189,7 +209,7 @@ export default class Highlighter {
       return;
     }
 
-    const highlightId = isHtmlElement(ev.target) && ev.target.hasAttribute(DATA_SCREEN_READERS_ATTR)
+    const highlightId = isHtmlElement(ev.target)
       ? ev.target.getAttribute(DATA_ID_ATTR)
       : null;
     const highlight = highlightId ? this.getHighlight(highlightId) : null;