Add tabbable option to Highlight object

Default tabbable to true

Update snapshots

Author: RoyEJohnson

src/Highlight.ts

@@ -14,6 +14,7 @@ export interface IHighlightData {
 export interface IOptions {
   skipIDsBy?: RegExp;
   formatMessage: (descriptor: { id: string }, values: { style: IHighlightData['style'] }) => string;
+  tabbable?: boolean;
 }
 
 export default class Highlight {

src/Highlighter.ts

@@ -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);
@@ -106,11 +108,12 @@ export default class Highlighter {
   }
 
   public getHighlightOptions(): HighlightOptions {
-    const { formatMessage, skipIDsBy } = this.options;
+    const { formatMessage, skipIDsBy, tabbable } = this.options;
 
     return {
       formatMessage,
       skipIDsBy,
+      tabbable,
     };
   }
 

src/__snapshots__/injectHighlightWrappers.spec.ts.snap

@@ -10,7 +10,6 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   hardware store sells 16-ft ladders and 24-ft ladders. A window is located 12 feet above the ground. A ladder needs to be purchased that will reach the window from a point on the ground 5 feet from the building.
 </span>
@@ -46,7 +45,6 @@ exports[`inject highlight wrappers for figure with caption for highlight ending
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   hardware store sells 16-ft ladders and 24-ft ladders. A window is located 12 feet above the ground. A ladder needs to be purchased that will reach the window from a point on the ground 5 feet from the building.
 </span>
@@ -82,7 +80,6 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
@@ -108,7 +105,6 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
@@ -134,7 +130,6 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
@@ -170,7 +165,6 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
@@ -206,7 +200,6 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
@@ -232,7 +225,6 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
@@ -258,7 +250,6 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
@@ -284,7 +275,6 @@ exports[`inject highlight wrappers for img between paragraphs in chrome and safa
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
 </span>
@@ -320,7 +310,6 @@ exports[`inject highlight wrappers for img between paragraphs in firefox 1`] = `
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
 </span>
@@ -356,7 +345,6 @@ exports[`inject highlight wrappers for text followed by section in chrome and sa
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   How To
   <span
@@ -377,7 +365,6 @@ exports[`inject highlight wrappers for text followed by section in firefox 1`] =
     aria-label="Start of highlight"
     data-for-screenreaders="true"
     data-highlight-id="some-highlight"
-    tabindex="0"
   />
   How To
   <span

src/injectHighlightWrappers.ts

@@ -76,7 +76,9 @@ function createAndInsertNodeForScreenReaders(highlight: Highlight, element: HTML
   node.setAttribute('aria-label', ariaLabel);
 
   if (position === 'start') {
-    node.setAttribute('tabindex', '0');
+    if (highlight.options.tabbable) {
+      node.setAttribute('tabindex', '0');
+    }
     element.prepend(node);
   } else {
     element.append(node);