@pocketprep/ui-kit 3.4.60 → 3.4.62

package/lib/components/Quiz/Question/MatrixChoicesContainer.vue

@@ -611,6 +611,10 @@ export default class MatrixChoicesContainer extends Vue {
             font-size: 16px;
             font-weight: 600;
         }
+
+        p {
+            margin: 0;
+        }
     }
 
     &__mobile-choices {

package/lib/components/Quiz/Question.vue

@@ -75,6 +75,7 @@
                 ref="prompt"
                 v-breakpoint:questionEl="breakpoints"
                 tabindex="-1"
+                role="group"
                 class="uikit-question__prompt"
                 :class="{
                     'uikit-question__prompt--passage-and-image': question.passage || passageImageUrl,
@@ -876,6 +877,12 @@ export default class Question extends Vue {
             column: this.showNamesColumns[0] || null,
             direction: 1,
         }
+
+        const prompt = this.$refs['prompt'] as HTMLElement
+        const promptElements = prompt?.querySelectorAll('p')
+        if (promptElements.length) {
+            promptElements.forEach(el => el.setAttribute('tabindex', '0'))
+        }
     }
 
     beforeUnmount () {

package/lib/utils.ts

@@ -84,7 +84,9 @@ export const highlightKeywordsInText = (params: {
             regex, 
             `$1<span class="keyword-highlight${params.isDarkMode 
                 ? ' keyword-highlight--dark' : ''}" data-location="${
-                params.location}""><span style="pointer-events: none;">$2</span></span>$3`
+                params.location}" role="button" tabindex="0" aria-label="${
+                word}, Instruction. Click for definition" aria-haspopup="dialog" aria-expanded="false">
+                <span style="pointer-events: none;">$2</span></span>$3`
         )
     }, params.text)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.60",
+  "version": "3.4.62",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {