[E] Restore focus to previous after deleting a highlight

ManifoldScholar · May 20, 2024 · 485fd75 · 485fd75
1 parent 131b8e0
commit 485fd75
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/client/src/reader/components/section/body-nodes/nodes/Text.js b/client/src/reader/components/section/body-nodes/nodes/Text.js
@@ -228,13 +228,16 @@ class TextNode extends Component {
             }
           : {};
 
+      const previousTabIndex = previous ? { tabIndex: -1 } : {};
+
       const props = {
         key: index,
         className: classes,
         "data-removable-highlight-id": removableHighlightId,
         "data-text-annotation-ids": textAnnotationIds,
         "data-annotation-ids": map[index].map(a => a.id),
-        ...interactiveAttributes
+        ...interactiveAttributes,
+        ...previousTabIndex
       };
 
       const Tag = interactiveAttributes.href ? "a" : "span";

diff --git a/client/src/reader/containers/annotation/Annotatable.js b/client/src/reader/containers/annotation/Annotatable.js
@@ -279,7 +279,7 @@ export class Annotatable extends Component {
       );
       this.appendLastSelectionAnnotation(selectionAnnotation);
       this.resetState({
-        restoreFocusTo: this.selectableRef,
+        restoreFocusTo: this.pendingAnnotationNode,
         restoreSelectionTo: this.pendingAnnotationNode
       });
     });

diff --git a/client/src/theme/styles/components/reader/annotations/marker.js b/client/src/theme/styles/components/reader/annotations/marker.js
@@ -114,4 +114,10 @@ export default `
       }
     }
   }
+
+  .previous {
+    &:focus-visible {
+      outline: 2px solid var(--focus-color);
+    }
+  }
 `;