Suppress vuejs-accessibility/no-autofocus: intentional accessibility focus management

Every autofocus use in Kolibri is deliberate: the first field in a
modal or wizard step receives focus so keyboard and screen reader users
land in the right place without having to navigate into the dialog.

Add eslint-disable-next-line comments with "intentional: a11y autofocus"
explanation at each autofocus site across 38 components. This is the
approved pattern from the plan for intentional autofocus (as opposed
to the follow-up-issue pattern used for violations requiring
architectural redesign).

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

Author: rtibblesbot

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/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')"

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

@@ -20,6 +20,7 @@
         >
           {{ coreString('invalidCredentialsError') }}
         </p>
+        <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
         <KTextbox
           ref="usernameTextbox"
           v-model.trim="username"
@@ -31,6 +32,7 @@
           :invalidText="invalidText"
           @blur="shouldValidate = true"
         />
+        <!-- eslint-enable vuejs-accessibility/no-autofocus -->
         <PasswordTextbox
           v-if="!facility.learner_can_login_with_no_password"
           ref="passwordTextbox"
@@ -74,6 +76,7 @@
           >
             {{ coreString('invalidCredentialsError') }}
           </p>
+          <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
           <KTextbox
             ref="adminUsernameTextbox"
             v-model.trim="adminUsername"
@@ -83,6 +86,7 @@
             :invalidText="invalidText"
             @blur="shouldValidate = true"
           />
+          <!-- eslint-enable vuejs-accessibility/no-autofocus -->
           <PasswordTextbox
             ref="adminPasswordTextbox"
             :value.sync="adminPassword"

kolibri/plugins/facility/frontend/views/FacilityConfigPage/EditFacilityNameModal.vue

@@ -9,6 +9,7 @@
   >
     <div>
       <p>{{ $tr('renameFacilityExplanation') }}</p>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KTextbox
         ref="name"
         v-model="name"
@@ -21,6 +22,7 @@
         @blur="nameBlurred = true"
         @input="handleInput"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </div>
   </KModal>
 

kolibri/plugins/facility/frontend/views/ManageClassPage/ClassCreateModal.vue

@@ -9,6 +9,7 @@
     @submit="createNewClass"
     @cancel="$emit('cancel')"
   >
+    <!-- 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/facility/frontend/views/UserEditPage.vue

@@ -17,6 +17,7 @@
             {{ $tr('editUserDetailsHeader') }}
           </h1>
 
+          <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
           <FullNameTextbox
             ref="fullNameTextbox"
             :autofocus="true"
@@ -25,6 +26,7 @@
             :isValid.sync="fullNameValid"
             :shouldValidate="formSubmitted"
           />
+          <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
           <UsernameTextbox
             ref="usernameTextbox"