Enable vuejs-accessibility lint rules and remediate violations across Vue files

kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue

@@ -39,6 +39,7 @@
         :style="{ backgroundColor: $themePalette.grey.v_200 }"
         frameBorder="0"
         :src="rooturl"
+        :title="$tr('contentFrameTitle')"
         allow="fullscreen"
       >
       </iframe>
@@ -173,6 +174,10 @@
         context:
           'Learners can use the full screen button in the upper right corner to open an html5 app in fullscreen view.\n',
       },
+      contentFrameTitle: {
+        message: 'Content viewer',
+        context: 'Accessible title for the iframe that displays the content',
+      },
     },
   };
 

kolibri/plugins/coach/frontend/views/CoachPrompts/index.vue

@@ -122,14 +122,24 @@
             <p>Station 1</p>
             <p>Kolibri learning</p>
           </th>
-          <td><img src="./kolibri.png" ></td>
+          <td>
+            <img
+              src="./kolibri.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Station 2</p>
             <p>Guided practice</p>
           </th>
-          <td><img src="./guided.png" ></td>
+          <td>
+            <img
+              src="./guided.png"
+              alt=""
+            >
+          </td>
         </tr>
       </table>
     </div>
@@ -146,21 +156,36 @@
             <p>Station 1</p>
             <p>Kolibri learning</p>
           </th>
-          <td><img src="./kolibri.png" ></td>
+          <td>
+            <img
+              src="./kolibri.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Station 2</p>
             <p>Guided practice</p>
           </th>
-          <td><img src="./guided.png" ></td>
+          <td>
+            <img
+              src="./guided.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Station 3</p>
             <p>Independent activity</p>
           </th>
-          <td><img src="./independent.png" ></td>
+          <td>
+            <img
+              src="./independent.png"
+              alt=""
+            >
+          </td>
         </tr>
       </table>
     </div>
@@ -364,14 +389,24 @@
             <p>Option 1</p>
             <p>Next to each other</p>
           </th>
-          <td><img src="./pair.png" ></td>
+          <td>
+            <img
+              src="./pair.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Option 2</p>
             <p>In a triangle</p>
           </th>
-          <td><img src="./triangle.png" ></td>
+          <td>
+            <img
+              src="./triangle.png"
+              alt=""
+            >
+          </td>
         </tr>
       </table>
     </div>
@@ -400,28 +435,48 @@
             <p>Option 1</p>
             <p>In a square</p>
           </th>
-          <td><img src="./square.png" ></td>
+          <td>
+            <img
+              src="./square.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Option 2</p>
             <p>In a rectangle</p>
           </th>
-          <td><img src="./rectangle.png" ></td>
+          <td>
+            <img
+              src="./rectangle.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Option 2</p>
             <p>In a circle</p>
           </th>
-          <td><img src="./circle.png" ></td>
+          <td>
+            <img
+              src="./circle.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Option 2</p>
             <p>In a horseshoe</p>
           </th>
-          <td><img src="./horseshoe.png" ></td>
+          <td>
+            <img
+              src="./horseshoe.png"
+              alt=""
+            >
+          </td>
         </tr>
       </table>
     </div>
@@ -448,14 +503,24 @@
             <p>Option 2</p>
             <p>In a circle</p>
           </th>
-          <td><img src="./circle.png" ></td>
+          <td>
+            <img
+              src="./circle.png"
+              alt=""
+            >
+          </td>
         </tr>
         <tr>
           <th>
             <p>Option 2</p>
             <p>In a horseshoe</p>
           </th>
-          <td><img src="./horseshoe.png" ></td>
+          <td>
+            <img
+              src="./horseshoe.png"
+              alt=""
+            >
+          </td>
         </tr>
       </table>
     </div>

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

@@ -8,16 +8,28 @@
     <ul
       ref="learnerList"
       class="history-list"
+      role="listbox"
+      tabindex="0"
+      :aria-label="coreString('learnersLabel')"
+      @keydown.home="setSelectedLearner(0)"
+      @keydown.end="setSelectedLearner(learners.length - 1)"
+      @keydown.up.prevent="setSelectedLearner(previousLearner(selectedLearnerNumber))"
+      @keydown.down.prevent="setSelectedLearner(nextLearner(selectedLearnerNumber))"
     >
       <template v-for="(learner, index) in learners">
         <li
           :key="index"
           class="clickable learner-item"
+          role="option"
+          :aria-selected="isSelected(index).toString()"
+          tabindex="-1"
           :style="{
             borderBottom: `2px solid ${$themeTokens.textDisabled}`,
             backgroundColor: isSelected(index) ? $themeTokens.textDisabled : '',
           }"
           @click="setSelectedLearner(index)"
+          @keydown.enter="setSelectedLearner(index)"
+          @keydown.space.prevent="setSelectedLearner(index)"
         >
           <div class="title">
             <KIcon
@@ -74,18 +86,27 @@
     },
     methods: {
       setSelectedLearner(learnerNumber) {
+        const item = this.$refs.learnerList.children[learnerNumber];
+        if (item) {
+          item.focus();
+        }
         this.$emit('select', learnerNumber);
-        this.scrollToSelectedLearner(learnerNumber);
+        this.scrollToSelectedLearner(learnerNumber, item);
       },
       isSelected(learnerNumber) {
         return Number(this.selectedLearnerNumber) === learnerNumber;
       },
-      scrollToSelectedLearner(learnerNumber) {
-        const selectedElement = this.$refs.learnerList.children[learnerNumber];
-        if (selectedElement) {
+      previousLearner(learnerNumber) {
+        return learnerNumber - 1 >= 0 ? learnerNumber - 1 : this.learners.length - 1;
+      },
+      nextLearner(learnerNumber) {
+        return learnerNumber + 1 < this.learners.length ? learnerNumber + 1 : 0;
+      },
+      scrollToSelectedLearner(learnerNumber, selectedElement) {
+        const el = selectedElement || this.$refs.learnerList.children[learnerNumber];
+        if (el) {
           const parent = this.$el.parentElement;
-          parent.scrollTop =
-            selectedElement.offsetHeight * (learnerNumber + 1) - parent.offsetHeight / 2;
+          parent.scrollTop = el.offsetHeight * (learnerNumber + 1) - parent.offsetHeight / 2;
         }
       },
     },

kolibri/plugins/coach/frontend/views/common/assignments/AssignmentDetailsModal.vue

@@ -33,6 +33,7 @@
             :layout8="{ span: assignmentIsQuiz ? 3 : 7 }"
             :layout12="{ span: assignmentIsQuiz ? 5 : 11 }"
           >
+            <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
             <KTextbox
               ref="titleField"
               v-model.trim="title"
@@ -47,6 +48,7 @@
               @input="showTitleError = false"
               @keydown.enter="submitData"
             />
+            <!-- eslint-enable vuejs-accessibility/no-autofocus -->
           </KGridItem>
           <template v-if="assignmentIsQuiz">
             <KGridItem

kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/CreateGroupModal.vue

@@ -9,6 +9,7 @@
     @cancel="$emit('cancel')"
     @submit="callCreateGroup"
   >
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       ref="name"
       v-model.trim="name"
@@ -20,6 +21,7 @@
       :maxlength="50"
       @blur="nameBlurred = true"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
   </KModal>
 
 </template>

kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/RenameGroupModal.vue

@@ -9,6 +9,7 @@
     @submit="callRenameGroup"
     @cancel="$emit('cancel')"
   >
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       ref="name"
       v-model.trim="name"
@@ -20,6 +21,7 @@
       :maxlength="50"
       @blur="nameBlurred = true"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
   </KModal>
 
 </template>

kolibri/plugins/device/frontend/views/AvailableChannelsPage/ChannelTokenModal.vue

@@ -19,6 +19,7 @@
       {{ $tr('networkErrorMessage') }}
     </UiAlert>
 
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       v-model.trim="token"
       :label="$tr('channelTokenLabel')"
@@ -30,6 +31,7 @@
       autocapitalize="none"
       @blur="tokenIsBlurred = true"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
   </KModal>
 
 </template>

kolibri/plugins/device/frontend/views/DeviceNameModal.vue

@@ -10,6 +10,7 @@
     <p>
       {{ $tr('deviceNameExplanation') }}
     </p>
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       ref="name"
       v-model.trim="name"
@@ -21,6 +22,7 @@
       :maxlength="50"
       @blur="nameBlurred = true"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
   </KModal>
 
 </template>

kolibri/plugins/device/frontend/views/DeviceSettingsPage/index.vue

@@ -43,7 +43,7 @@
         </div>
 
         <div class="fieldset">
-          <label class="fieldset-label">{{ $tr('externalDeviceSettings') }}</label>
+          <span class="fieldset-label">{{ $tr('externalDeviceSettings') }}</span>
           <KCheckbox
             :label="$tr('unlistedChannels')"
             :checked="allowPeerUnlistedChannelImport"
@@ -68,7 +68,7 @@
         </div>
 
         <div class="fieldset">
-          <label class="fieldset-label">{{ $tr('landingPageLabel') }}</label>
+          <span class="fieldset-label">{{ $tr('landingPageLabel') }}</span>
           <KRadioButtonGroup>
             <KRadioButton
               data-testid="landingPageButton"
@@ -119,7 +119,7 @@
           class="fieldset"
         >
           <h2>
-            <label>{{ $tr('allowDownloadOnMeteredConnection') }}</label>
+            {{ $tr('allowDownloadOnMeteredConnection') }}
           </h2>
           <p :class="InfoDescriptionColor">
             {{ $tr('DownloadOnMeteredConnectionDescription') }}
@@ -205,7 +205,7 @@
 
         <div class="fieldset">
           <h2>
-            <label>{{ $tr('autoDownload') }}</label>
+            {{ $tr('autoDownload') }}
           </h2>
           <KCheckbox
             :label="$tr('enableAutoDownload')"

kolibri/plugins/device/frontend/views/ManageContentPage/ChannelPanel/ChannelDetails.vue

@@ -10,6 +10,7 @@
         v-if="channel.thumbnail"
         class="thumbnail"
         :src="channel.thumbnail"
+        alt=""
         loading="lazy"
       >
       <KIcon

kolibri/plugins/device/frontend/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue

@@ -7,6 +7,7 @@
     @cancel="handleCancel"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         v-model="source"
         :label="$tr('network')"
@@ -15,6 +16,7 @@
         :autofocus="!kolibriStudioIsOffline"
         :description="$tr('studioDescription')"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
       <KRadioButton
         v-model="source"
         :label="$tr('localNetworkOrInternet')"