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/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/SelectContentPage/ChannelContentsSummary.vue

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

kolibri/plugins/device/frontend/views/lodUsers/importUser/SelectFacilityPage.vue

@@ -21,14 +21,10 @@
           :itemValue="x => x.id"
         />
 
-        <label
-          class="select-button-label"
-          for="select-address-button"
-        >
+        <span class="select-button-label">
           {{ selectDifferentDeviceLabel$() }}
-        </label>
+        </span>
         <KButton
-          id="select-address-button"
           appearance="basic-link"
           :text="getCommonSyncString('addNewAddressAction')"
           @click="showSelectAddressModal = true"

kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue

@@ -16,6 +16,7 @@
 
     <div
       class="epub-viewer-content"
+      role="presentation"
       :style="{ 'border-color': $themeTokens.fineLine }"
       :dir="contentDirection"
       @mousedown.stop="handleMouseDown"

kolibri/plugins/facility/frontend/views/ImportCsvPage/Init.vue

@@ -33,17 +33,17 @@
       {{ $tr('beforeCommitting') }}
     </p>
     <p>
-      <label for="csv-file"> {{ $tr('proceed') }}</label>
-    </p>
-    <p>
-      <input
-        id="csv-file"
-        ref="fileInput"
-        type="file"
-        accept=".csv"
-        name="csv-file"
-        @change="filesChanged"
-      >
+      <label for="csv-file">
+        {{ $tr('proceed') }}
+        <input
+          id="csv-file"
+          ref="fileInput"
+          type="file"
+          accept=".csv"
+          name="csv-file"
+          @change="filesChanged"
+        >
+      </label>
     </p>
     <!-- Temporarily remove this functionality for MVP -->
     <p v-if="false">

kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue

@@ -39,6 +39,7 @@
         :style="{ backgroundColor: $themePalette.grey.v_200 }"
         frameBorder="0"
         :src="rooturl"
+        :title="$tr('contentFrameTitle')"
         allow="fullscreen"
       >
       </iframe>
@@ -208,6 +209,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',
+      },
     },
   };