Fix interactive element accessibility: use native button elements

Replace div[role=button] with native <button> elements in QTISandboxPage
and simplify scrollToSelectedLearner to always derive the element from
the DOM ref rather than accepting it as a parameter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: rtibblesbot

kolibri/plugins/coach/frontend/views/common/QuestionDetailLearnerList.vue

@@ -91,7 +91,7 @@
           item.focus();
         }
         this.$emit('select', learnerNumber);
-        this.scrollToSelectedLearner(learnerNumber, item);
+        this.scrollToSelectedLearner(learnerNumber);
       },
       isSelected(learnerNumber) {
         return Number(this.selectedLearnerNumber) === learnerNumber;
@@ -102,8 +102,8 @@
       nextLearner(learnerNumber) {
         return learnerNumber + 1 < this.learners.length ? learnerNumber + 1 : 0;
       },
-      scrollToSelectedLearner(learnerNumber, selectedElement) {
-        const el = selectedElement || this.$refs.learnerList.children[learnerNumber];
+      scrollToSelectedLearner(learnerNumber) {
+        const el = this.$refs.learnerList.children[learnerNumber];
         if (el) {
           const parent = this.$el.parentElement;
           parent.scrollTop = el.offsetHeight * (learnerNumber + 1) - parent.offsetHeight / 2;

kolibri/plugins/qti_viewer/frontend/components/QTISandboxPage.vue

@@ -109,35 +109,29 @@
               <div v-if="category.items">
                 <template v-for="item in category.items">
                   <div :key="item.identifier || item.title">
-                    <div
+                    <button
                       v-if="item.identifier"
+                      type="button"
                       class="qti-item"
-                      role="button"
-                      tabindex="0"
                       @click="selectItem(item)"
-                      @keydown.enter="selectItem(item)"
-                      @keydown.space.prevent="selectItem(item)"
                     >
                       <h4>{{ item.title }}</h4>
-                    </div>
+                    </button>
                     <AccordionItem
                       v-else-if="item.items"
                       :title="item.title"
                       class="nested-accordion"
                     >
                       <template #content>
-                        <div
+                        <button
                           v-for="nestedItem in item.items"
                           :key="nestedItem.identifier"
+                          type="button"
                           class="nested-item qti-item"
-                          role="button"
-                          tabindex="0"
                           @click="selectItem(nestedItem)"
-                          @keydown.enter="selectItem(nestedItem)"
-                          @keydown.space.prevent="selectItem(nestedItem)"
                         >
                           <h5>{{ nestedItem.title }}</h5>
-                        </div>
+                        </button>
                       </template>
                     </AccordionItem>
                   </div>
@@ -382,9 +376,15 @@
   }
 
   .qti-item {
+    display: block;
+    width: 100%;
     padding: 0.75rem;
     margin-bottom: 0.5rem;
+    font: inherit;
+    color: inherit;
+    text-align: start;
     cursor: pointer;
+    background: transparent;
     border: 1px solid #dddddd;
     border-radius: 4px;
     transition: background-color 0.2s;