[E] Improve focus on page change

ManifoldScholar · May 20, 2024 · 91dc203 · 91dc203
1 parent 890d720
commit 91dc203
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/client/src/reader/components/section/NextSection.js b/client/src/reader/components/section/NextSection.js
@@ -27,7 +27,10 @@ class NextSection extends PureComponent {
     if (!nextSection || !nextSection.name) return null;
     return (
       <Link
-        to={this.getSectionPath(nextSection.id)}
+        to={{
+          pathname: this.getSectionPath(nextSection.id),
+          state: { pageChange: true }
+        }}
         className="section-next-section__link"
       >
         <header className="section-next-section__header">

diff --git a/client/src/reader/components/section/Text.js b/client/src/reader/components/section/Text.js
@@ -59,16 +59,20 @@ export default class Text extends Component {
   }
 
   componentDidMount() {
-    if (this.el && this.props.location.state?.pageChange) {
-      this.el.focus();
+    const el = document.getElementById("text-section-interactive-region");
+
+    if (el && this.props.location.state?.pageChange) {
+      el.focus();
     }
   }
 
   componentDidUpdate() {
     this.checkRequestAnnotationHash();
 
-    if (this.el && this.props.location.state?.pageChange) {
-      this.el.focus();
+    const el = document.getElementById("text-section-interactive-region");
+
+    if (el && this.props.location.state?.pageChange) {
+      el.focus();
     }
   }
 
@@ -128,15 +132,7 @@ export default class Text extends Component {
 
     return (
       <HtmlClass className={fontSizeClass}>
-        <div
-          id="focus-on-page-change"
-          ref={el => {
-            this.el = el;
-          }}
-          tabIndex={-1}
-          className="main-content"
-          style={{ flexGrow: 1 }}
-        >
+        <div className="main-content" style={{ flexGrow: 1 }}>
           <section className={readerAppearanceClass}>
             <Annotation.Annotatable
               currentUser={this.props.authentication.currentUser}

diff --git a/client/src/reader/containers/annotation/annotatable-components/CaptureSelection.js b/client/src/reader/containers/annotation/annotatable-components/CaptureSelection.js
@@ -308,6 +308,7 @@ class AnnotatableCaptureSelection extends Component {
     /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
     return (
       <div
+        id="text-section-interactive-region"
         ref={this.props.setSelectableRef}
         role="region"
         aria-label={this.props.t("reader.section_label")}