Add tabbable option to Highlight object

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);

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);