Merge pull request #12513 from rtibbles/keypad_behave

Fix keypad and tab navigation issues in exercises
learningequality · Aug 1, 2024 · 69242d3 · 69242d3
2 parents 85dcf2b + 0bcca51
commit 69242d3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue
@@ -122,6 +122,7 @@ oriented data synchronization.
                 />
                 <KButton
                   v-else
+                  ref="nextButton"
                   appearance="raised-button"
                   :text="$tr('next')"
                   :primary="true"
@@ -418,6 +419,11 @@ oriented data synchronization.
         }
         this.complete = correct === 1;
         this.updateAttempt({ answerState, simpleAnswer });
+        if (this.complete) {
+          this.$nextTick(() => {
+            this.$refs.nextButton.$el.focus();
+          });
+        }
       },
       hintTaken({ answerState }) {
         this.hintWasTaken = true;

diff --git a/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue b/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue
@@ -4,7 +4,7 @@
     v-if="itemId || itemData"
     class="bibliotron-exercise perseus-root"
     :class="{ 'perseus-mobile': isMobile }"
-    @keydown.enter="answerGiven"
+    @keydown.enter.prevent="answerGiven"
   >
     <div
       class="framework-perseus"
@@ -57,6 +57,7 @@
   const keypadStyle = StyleSheet.create({
     keypadContainer: {
       zIndex: 20,
+      pointerEvents: 'none',
     },
   });
 
@@ -429,7 +430,16 @@
             createPortal(
               e(MobileKeypad, {
                 style: keypadStyle.keypadContainer,
-                onElementMounted: setKeypadElement,
+                onElementMounted: el => {
+                  // We need to add the class to the container element
+                  // but the MobileKeypad component does not pass through
+                  // React's className prop to the root element.
+                  const domNode = el.getDOMNode();
+                  if (domNode) {
+                    domNode.classList.add('perseus-keypad-container');
+                  }
+                  setKeypadElement(el);
+                },
                 onDismiss: () => renderer && renderer.blur(),
                 onAnalyticsEvent: async () => {},
               }),
@@ -973,4 +983,8 @@
     }
   }
 
+  .perseus-keypad-container > div > div {
+    pointer-events: auto;
+  }
+
 </style>