Fix vuejs-accessibility/label-has-for violations: associate labels with form controls

Addresses label-has-for and related labeling violations:

- PicturePasswordOption: adds a unique id/for pair so the label is
  programmatically associated with its checkbox.
- SearchBox: adds role="search" to the wrapper, rewrites the visually-hidden
  label to use a KSR span associated with the input via for/id, and moves
  @keydown.esc to the .search-box-row wrapper div so ESC is caught from any
  child (the text input, the clear icon button, and the search submit button).
- DeviceSettingsPage: replaces <label> with <span> for visual-only fieldset
  headings that are not associated with any input.
- SelectFacilityPage/SelectFacilityForm: replaces <label for="select-address-button">
  with <span> since the target is a button, not an input.
- ImportCsvPage/Init.vue: reorders label before input so the association is
  unambiguous, and wraps both in a proper <label> element.

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

Author: rtibblesbot

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/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/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/setup_wizard/frontend/views/SelectFacilityForm.vue

@@ -33,14 +33,10 @@
         :disabled="formDisabled"
       />
 
-      <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/user_auth/frontend/views/SignInPage/PictureSignIn/PicturePasswordOption.vue

@@ -6,6 +6,7 @@
       option region clickable/activatable while keeping a single focusable element.
     -->
     <label
+      :for="checkboxId"
       class="option-label"
       :class="[
         $computedClass(optionLabelStyles),
@@ -20,6 +21,7 @@
         `aria-disabled` communicates the disabled state to assistive technology.
       -->
       <input
+        :id="checkboxId"
         type="checkbox"
         class="visuallyhidden"
         :checked="isSelected"
@@ -79,6 +81,9 @@
       const $themeTokens = themeTokens();
       const $themePalette = themePalette();
 
+      // Unique per page because the parent (PicturePasswordGrid) renders each icon exactly once.
+      const checkboxId = `picture-password-option-${props.icon}`;
+
       const isSelected = computed(() => props.sequencePosition !== null);
 
       // Colorful icons have a fixed colour built into the icon itself, so applying
@@ -149,6 +154,7 @@
       };
 
       return {
+        checkboxId,
         isSelected,
         iconColor,
         optionLabelStyles,

packages/kolibri-common/components/SearchBox.vue

@@ -2,33 +2,37 @@
 
   <form
     class="search-box"
+    role="search"
     @submit.prevent="updateSearchQuery"
-    @keydown.esc.prevent="handleEscKey"
   >
     <div
       class="search-box-row"
+      role="presentation"
       :style="{
         backgroundColor: $themeTokens.surface,
         borderColor: $themePalette.grey.v_400,
         maxWidth: maxWidth,
         fontSize: '16px',
       }"
+      @keydown.esc.prevent="handleEscKey"
     >
       <label
-        class="visuallyhidden"
-        for="searchfield"
-      >{{ coreString('searchLabel') }}</label>
-      <input
-        :id="id"
-        ref="searchInput"
-        v-model.trim="newSearchTerm"
-        type="search"
-        :disabled="disabled"
-        class="search-input"
-        :class="$computedClass(searchInputStyle)"
-        dir="auto"
-        :placeholder="computedPlaceholder"
+        :for="id"
+        class="search-label"
       >
+        <span class="visuallyhidden">{{ coreString('searchLabel') }}</span>
+        <input
+          :id="id"
+          ref="searchInput"
+          v-model.trim="newSearchTerm"
+          type="search"
+          :disabled="disabled"
+          class="search-input"
+          :class="$computedClass(searchInputStyle)"
+          dir="auto"
+          :placeholder="computedPlaceholder"
+        >
+      </label>
       <div class="search-buttons-wrapper">
         <KIconButton
           icon="clear"
@@ -203,6 +207,10 @@
     border-radius: $radius;
   }
 
+  .search-label {
+    display: contents;
+  }
+
   .search-input {
     display: table-cell;
     width: 100%;