From 7825c505902b69173d7ad0e1401ce95c4ba0b5b3 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:20:31 -0700
Subject: [PATCH 1/8] Add eslint-plugin-vuejs-accessibility dependency to
 kolibri-format

Adds eslint-plugin-vuejs-accessibility v2.5.0 as a dependency of
kolibri-format, spreads flat/recommended into eslint.config.mjs
(after pluginJestDom, before eslintConfigPrettier), and bumps the
kolibri-format version from 2.2.0 to 2.3.0.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/kolibri-format/eslint.config.mjs | 15 ++++++++++++++
 packages/kolibri-format/package.json      |  1 +
 pnpm-lock.yaml                            | 25 ++++++++++++++++++++---
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/kolibri-format/eslint.config.mjs b/packages/kolibri-format/eslint.config.mjs
index af6d568a408..55c70cc1b76 100644
--- a/packages/kolibri-format/eslint.config.mjs
+++ b/packages/kolibri-format/eslint.config.mjs
@@ -7,6 +7,7 @@ import pluginKolibri from 'eslint-plugin-kolibri';
 import pluginN from 'eslint-plugin-n';
 import pluginSmallImport from 'eslint-plugin-small-import';
 import pluginVue from 'eslint-plugin-vue';
+import pluginVueA11y from 'eslint-plugin-vuejs-accessibility';
 import globals from 'globals';
 
 const OFF = 0;
@@ -18,6 +19,20 @@ export default [
   pluginImportX.flatConfigs.errors,
   pluginImportX.flatConfigs.warnings,
   pluginJestDom.configs['flat/recommended'],
+  ...pluginVueA11y.configs['flat/recommended'],
+  {
+    rules: {
+      // Kolibri design-system components that always render accessible text content
+      // (e.g. via :text prop). The rule cannot see through component boundaries, so
+      // we declare them here to prevent false positives on headings that wrap these.
+      'vuejs-accessibility/heading-has-content': [
+        'error',
+        {
+          accessibleChildren: ['KButton', 'KLabeledIcon', 'KRouterLink', 'KTextTruncator'],
+        },
+      ],
+    },
+  },
   eslintConfigPrettier,
   {
     plugins: {
diff --git a/packages/kolibri-format/package.json b/packages/kolibri-format/package.json
index 67bfa00b37e..e239992406f 100644
--- a/packages/kolibri-format/package.json
+++ b/packages/kolibri-format/package.json
@@ -27,6 +27,7 @@
     "eslint-plugin-n": "^17.24.0",
     "eslint-plugin-small-import": "^1.0.0",
     "eslint-plugin-vue": "^9.33.0",
+    "eslint-plugin-vuejs-accessibility": "^2.5.0",
     "fast-glob": "3.3.3",
     "globals": "^16.0.0",
     "kolibri-glob": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 525826ba67f..6e52e72bd02 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1394,6 +1394,9 @@ importers:
       eslint-plugin-vue:
         specifier: ^9.33.0
         version: 9.33.0(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-vuejs-accessibility:
+        specifier: ^2.5.0
+        version: 2.5.0(eslint@9.39.4(jiti@2.6.1))(globals@16.5.0)
       fast-glob:
         specifier: 3.3.3
         version: 3.3.3
@@ -5491,6 +5494,13 @@ packages:
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
 
+  eslint-plugin-vuejs-accessibility@2.5.0:
+    resolution: {integrity: sha512-oZ2fL4tS91Cm/ezH3BueNP+FtpbbeS627OSqqgp9/lsN//glmoPcLBT6D53xwGocLtyBybaT99tX4ThBh8+ytA==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+      globals: '>= 13.12.1'
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -11750,16 +11760,16 @@ snapshots:
 
   '@types/babel__generator@7.27.0':
     dependencies:
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
 
   '@types/babel__template@7.4.4':
     dependencies:
       '@babel/parser': 7.28.6
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
 
   '@types/babel__traverse@7.28.0':
     dependencies:
-      '@babel/types': 7.28.6
+      '@babel/types': 7.29.0
 
   '@types/body-parser@1.19.6':
     dependencies:
@@ -13915,6 +13925,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-vuejs-accessibility@2.5.0(eslint@9.39.4(jiti@2.6.1))(globals@16.5.0):
+    dependencies:
+      aria-query: 5.3.2
+      eslint: 9.39.4(jiti@2.6.1)
+      globals: 16.5.0
+      vue-eslint-parser: 9.4.3(eslint@9.39.4(jiti@2.6.1))
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0

From b7d9fe4fcb65e7c856533bc442594df63f09b57d Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:20:38 -0700
Subject: [PATCH 2/8] Apply pre-existing kolibri-format auto-fixes in
 kolibri-build

Running kolibri-format --write during the a11y remediation pass also
fixed pre-existing formatting violations in three kolibri-build files.
Committed separately so the a11y diff stays uncluttered.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../__tests__/webpack.config.plugin.spec.js   |  2 +-
 .../src/__tests__/webpackRtlPlugin.spec.js    | 51 +++++++++++--------
 packages/kolibri-build/src/createCssInsert.js |  2 +-
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js b/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js
index 6e1847b0de6..e883542a735 100644
--- a/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js
+++ b/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const _ = require('lodash');
 const webpackConfigPlugin = require('../webpack.config.plugin');
 
diff --git a/packages/kolibri-build/src/__tests__/webpackRtlPlugin.spec.js b/packages/kolibri-build/src/__tests__/webpackRtlPlugin.spec.js
index ae860a43ec7..e671e86d218 100644
--- a/packages/kolibri-build/src/__tests__/webpackRtlPlugin.spec.js
+++ b/packages/kolibri-build/src/__tests__/webpackRtlPlugin.spec.js
@@ -1,15 +1,15 @@
-const path = require('path');
+const path = require('node:path');
+const fs = require('node:fs');
+const os = require('node:os');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WebpackRTLPlugin = require('../webpackRtlPlugin');
 const { createCssInsert } = require('../createCssInsert');
-const fs = require('fs');
-const os = require('os');
 
 // Polyfill setImmediate for Jest environment (webpack requires it)
 if (typeof setImmediate === 'undefined') {
   global.setImmediate = (fn, ...args) => setTimeout(fn, 0, ...args);
-  global.clearImmediate = (id) => clearTimeout(id);
+  global.clearImmediate = id => clearTimeout(id);
 }
 
 /**
@@ -70,7 +70,9 @@ describe('WebpackRTLPlugin', () => {
         entry: entryFile,
         output: { path: outputDir, filename: 'bundle.js' },
         module: {
-          rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] }],
+          rules: [
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] },
+          ],
         },
         plugins: [
           new MiniCssExtractPlugin({ filename: '[name].css' }),
@@ -79,8 +81,8 @@ describe('WebpackRTLPlugin', () => {
       });
 
       const files = fs.readdirSync(outputDir);
-      const cssFiles = files.filter((f) => f.endsWith('.css') && !f.endsWith('.rtl.css'));
-      const rtlCssFiles = files.filter((f) => f.endsWith('.rtl.css'));
+      const cssFiles = files.filter(f => f.endsWith('.css') && !f.endsWith('.rtl.css'));
+      const rtlCssFiles = files.filter(f => f.endsWith('.rtl.css'));
 
       expect(cssFiles.length).toBeGreaterThan(0);
       expect(rtlCssFiles.length).toBeGreaterThan(0);
@@ -107,7 +109,9 @@ describe('WebpackRTLPlugin', () => {
         entry: entryFile,
         output: { path: outputDir, filename: 'bundle.js' },
         module: {
-          rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] }],
+          rules: [
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] },
+          ],
         },
         plugins: [
           new MiniCssExtractPlugin({ filename: '[name].css' }),
@@ -115,7 +119,7 @@ describe('WebpackRTLPlugin', () => {
         ],
       });
 
-      compiler.hooks.compilation.tap('TestPlugin', (compilation) => {
+      compiler.hooks.compilation.tap('TestPlugin', compilation => {
         compilation.hooks.afterProcessAssets.tap('TestPlugin', () => {
           for (const chunk of compilation.chunks) {
             const runtimeModules = [...compilation.chunkGraph.getChunkRuntimeModulesInOrder(chunk)];
@@ -164,7 +168,9 @@ describe('WebpackRTLPlugin', () => {
         entry: entryFile,
         output: { path: outputDir, filename: 'bundle.js' },
         module: {
-          rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] }],
+          rules: [
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] },
+          ],
         },
         plugins: [
           new MiniCssExtractPlugin({ filename: '[name].css' }),
@@ -216,7 +222,9 @@ describe('WebpackRTLPlugin', () => {
         entry: entryFile,
         output: { path: outputDir, filename: 'bundle.js' },
         module: {
-          rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] }],
+          rules: [
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] },
+          ],
         },
         plugins: [
           new MiniCssExtractPlugin({ filename: '[name].css' }),
@@ -255,7 +263,7 @@ describe('WebpackRTLPlugin', () => {
       fs.writeFileSync(entryFile, `import('./asyncModule.js');`);
     });
 
-    it('should generate RTL CSS files', (done) => {
+    it('should generate RTL CSS files', done => {
       const outputDir = path.join(tempDir, 'dist2');
 
       const compiler = webpack({
@@ -294,16 +302,16 @@ describe('WebpackRTLPlugin', () => {
         // Verify that both LTR and RTL CSS files were generated
         const files = fs.readdirSync(outputDir);
         // With dynamic imports, CSS ends up in a chunk file not main.css
-        const cssFiles = files.filter((f) => f.endsWith('.css'));
-        const rtlCssFiles = cssFiles.filter((f) => f.endsWith('.rtl.css'));
-        const ltrCssFiles = cssFiles.filter((f) => !f.endsWith('.rtl.css'));
+        const cssFiles = files.filter(f => f.endsWith('.css'));
+        const rtlCssFiles = cssFiles.filter(f => f.endsWith('.rtl.css'));
+        const ltrCssFiles = cssFiles.filter(f => !f.endsWith('.rtl.css'));
         expect(ltrCssFiles.length).toBeGreaterThan(0);
         expect(rtlCssFiles.length).toBeGreaterThan(0);
         done();
       });
     });
 
-    it('should have miniCssF intercept code in the generated bundle', (done) => {
+    it('should have miniCssF intercept code in the generated bundle', done => {
       const outputDir = path.join(tempDir, 'dist3');
 
       const compiler = webpack({
@@ -340,10 +348,7 @@ describe('WebpackRTLPlugin', () => {
         }
 
         // Read the generated bundle and verify the intercept pattern
-        const bundleContent = fs.readFileSync(
-          path.join(outputDir, 'bundle.js'),
-          'utf-8'
-        );
+        const bundleContent = fs.readFileSync(path.join(outputDir, 'bundle.js'), 'utf-8');
 
         // The bundle should contain the miniCssF definition (from MiniCssExtractPlugin)
         expect(bundleContent).toContain('miniCssF');
@@ -387,7 +392,7 @@ describe('WebpackRTLPlugin', () => {
 
       insert(linkElement);
 
-      expect(linkElement.getAttribute('data-webpack-bundle')).toBe('my-bundle-id');
+      expect(linkElement).toHaveAttribute('data-webpack-bundle', 'my-bundle-id');
       expect(document.head.contains(linkElement)).toBe(true);
 
       // Clean up
@@ -408,7 +413,9 @@ describe('WebpackRTLPlugin', () => {
         entry: entryFile,
         output: { path: outputDir, filename: 'bundle.js' },
         module: {
-          rules: [{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] }],
+          rules: [
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')] },
+          ],
         },
         plugins: [
           new MiniCssExtractPlugin({
diff --git a/packages/kolibri-build/src/createCssInsert.js b/packages/kolibri-build/src/createCssInsert.js
index ada12059673..1338f3dd903 100644
--- a/packages/kolibri-build/src/createCssInsert.js
+++ b/packages/kolibri-build/src/createCssInsert.js
@@ -11,7 +11,7 @@ function createCssInsert(bundleId) {
   return new Function(
     'linkTag',
     `linkTag.setAttribute("data-webpack-bundle", ${JSON.stringify(bundleId)});
-    document.head.appendChild(linkTag);`
+    document.head.appendChild(linkTag);`,
   );
 }
 

From 0e7bc31b1087377488a9c43dde4d17ecdb6a9f21 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:20:44 -0700
Subject: [PATCH 3/8] Fix vuejs-accessibility/alt-text violations: add alt
 attributes to img elements

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/views/CoachPrompts/index.vue     | 91 ++++++++++++++++---
 .../ChannelPanel/ChannelDetails.vue           |  1 +
 .../ChannelContentsSummary.vue                |  1 +
 .../views/TopicsPage/TopicsMobileHeader.vue   |  1 +
 .../views/SlideshowRendererComponent.vue      |  1 +
 .../kolibri/components/error/AppError.vue     |  5 +-
 6 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/kolibri/plugins/coach/frontend/views/CoachPrompts/index.vue b/kolibri/plugins/coach/frontend/views/CoachPrompts/index.vue
index 18e143ee77f..e1513102c29 100644
--- a/kolibri/plugins/coach/frontend/views/CoachPrompts/index.vue
+++ b/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>
diff --git a/kolibri/plugins/device/frontend/views/ManageContentPage/ChannelPanel/ChannelDetails.vue b/kolibri/plugins/device/frontend/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
index b9cdea7a650..ab19cabae49 100644
--- a/kolibri/plugins/device/frontend/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
+++ b/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
diff --git a/kolibri/plugins/device/frontend/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/frontend/views/SelectContentPage/ChannelContentsSummary.vue
index 4f238803999..73beef1df82 100644
--- a/kolibri/plugins/device/frontend/views/SelectContentPage/ChannelContentsSummary.vue
+++ b/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">
diff --git a/kolibri/plugins/learn/frontend/views/TopicsPage/TopicsMobileHeader.vue b/kolibri/plugins/learn/frontend/views/TopicsPage/TopicsMobileHeader.vue
index 9370384d69b..2731637e1de 100644
--- a/kolibri/plugins/learn/frontend/views/TopicsPage/TopicsMobileHeader.vue
+++ b/kolibri/plugins/learn/frontend/views/TopicsPage/TopicsMobileHeader.vue
@@ -19,6 +19,7 @@
     <KGridItem :layout4="{ span: 1 }">
       <img
         :src="topic.thumbnail"
+        alt=""
         class="channel-logo"
         loading="lazy"
       >
diff --git a/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue b/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue
index 3c57ba9d7df..d0a3ea31b67 100644
--- a/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue
+++ b/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue
@@ -45,6 +45,7 @@
         >
           <img
             :src="slide.storage_url"
+            alt=""
             :aria-labelledby="slideTextId(slide.id)"
             class="slideshow-slide-image"
           >
diff --git a/packages/kolibri/components/error/AppError.vue b/packages/kolibri/components/error/AppError.vue
index ecb0377a1d5..468d0d9ccb5 100644
--- a/packages/kolibri/components/error/AppError.vue
+++ b/packages/kolibri/components/error/AppError.vue
@@ -4,7 +4,10 @@
     role="alert"
     class="app-error"
   >
-    <img src="./app-error-bird.png" >
+    <img
+      src="./app-error-bird.png"
+      alt=""
+    >
 
     <h1>
       {{ headerText }}

From a7ee691bbc70b9da6f8c33b7acffa40337415e20 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:21:01 -0700
Subject: [PATCH 4/8] Fix SafeHtmlImage and Lightbox accessibility: keyboard
 navigation and focus management

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/SafeHTML/Lightbox.vue          | 120 +++++++++---------
 .../components/SafeHTML/SafeHtmlImage.vue     |  24 +++-
 .../SafeHTML/__tests__/Lightbox.spec.js       |  10 +-
 3 files changed, 84 insertions(+), 70 deletions(-)

diff --git a/packages/kolibri-common/components/SafeHTML/Lightbox.vue b/packages/kolibri-common/components/SafeHTML/Lightbox.vue
index 99def36dc80..018ae7c0e30 100644
--- a/packages/kolibri-common/components/SafeHTML/Lightbox.vue
+++ b/packages/kolibri-common/components/SafeHTML/Lightbox.vue
@@ -8,65 +8,70 @@
     class="lightbox-dialog"
     data-testid="lightbox-dialog"
     @close="closeLightbox"
-    @keydown="onKeyDown"
   >
-    <KFocusTrap
-      @shouldFocusFirstEl="focusFirstEl"
-      @shouldFocusLastEl="focusLastEl"
+    <div
+      role="presentation"
+      class="lightbox-inner"
+      @keydown="onKeyDown"
     >
-      <div
-        class="action-bar"
-        :style="{ backgroundColor: $themePalette.grey.v_900 }"
+      <KFocusTrap
+        @shouldFocusFirstEl="focusFirstEl"
+        @shouldFocusLastEl="focusLastEl"
       >
-        <div :class="scale !== minScale ? $computedClass(btnHoverStyle) : ''">
-          <KIconButton
-            icon="remove"
-            :color="$themeTokens.surface"
-            size="small"
-            :aria-label="coreString('zoomOut')"
-            :tooltip="coreString('zoomOut')"
-            :disabled="scale === minScale"
-            @click="zoomImage('out')"
-          />
+        <div
+          class="action-bar"
+          :style="{ backgroundColor: $themePalette.grey.v_900 }"
+        >
+          <div :class="scale !== minScale ? $computedClass(btnHoverStyle) : ''">
+            <KIconButton
+              icon="remove"
+              :color="$themeTokens.surface"
+              size="small"
+              :aria-label="coreString('zoomOut')"
+              :tooltip="coreString('zoomOut')"
+              :disabled="scale === minScale"
+              @click="zoomImage('out')"
+            />
+          </div>
+          <div :class="scale !== maxScale ? $computedClass(btnHoverStyle) : ''">
+            <KIconButton
+              icon="add"
+              :color="$themeTokens.surface"
+              size="small"
+              :aria-label="coreString('zoomIn')"
+              :tooltip="coreString('zoomIn')"
+              :disabled="scale === maxScale"
+              @click="zoomImage('in')"
+            />
+          </div>
+          <div :class="$computedClass(btnHoverStyle)">
+            <KIconButton
+              ref="closeButton"
+              icon="close"
+              :color="$themeTokens.surface"
+              size="small"
+              :aria-label="coreString('closeAction')"
+              :tooltip="coreString('closeAction')"
+              @click="closeLightbox"
+            />
+          </div>
         </div>
-        <div :class="scale !== maxScale ? $computedClass(btnHoverStyle) : ''">
-          <KIconButton
-            icon="add"
-            :color="$themeTokens.surface"
-            size="small"
-            :aria-label="coreString('zoomIn')"
-            :tooltip="coreString('zoomIn')"
-            :disabled="scale === maxScale"
-            autofocus
-            @click="zoomImage('in')"
-          />
-        </div>
-        <div :class="$computedClass(btnHoverStyle)">
-          <KIconButton
-            ref="closeButton"
-            icon="close"
-            :color="$themeTokens.surface"
-            size="small"
-            :aria-label="coreString('closeAction')"
-            :tooltip="coreString('closeAction')"
-            @click="closeLightbox"
-          />
-        </div>
-      </div>
-
-      <img
-        ref="imageRef"
-        :src="src"
-        :alt="alt"
-        tabindex="-1"
-        class="expanded-image"
-        :style="imgStyle"
-        @load="calculateSize"
-        @mousedown="onMouseDown"
-        @wheel="onWheel"
-        @dragstart.prevent
-      >
-    </KFocusTrap>
+
+        <img
+          ref="imageRef"
+          :src="src"
+          alt=""
+          role="presentation"
+          tabindex="-1"
+          class="expanded-image"
+          :style="imgStyle"
+          @load="calculateSize"
+          @mousedown="onMouseDown"
+          @wheel="onWheel"
+          @dragstart.prevent
+        >
+      </KFocusTrap>
+    </div>
   </dialog>
 
 </template>
@@ -109,10 +114,6 @@
         type: String,
         required: true,
       },
-      alt: {
-        type: String,
-        default: '',
-      },
     },
     data() {
       return {
@@ -161,6 +162,7 @@
             dialogPolyfill.registerDialog(dlg);
 
             dlg.showModal();
+            this.focusFirstEl();
 
             if (!supportsDialogClosedBy()) {
               dlg.addEventListener('mousedown', this.onBackdropMouseDown);
diff --git a/packages/kolibri-common/components/SafeHTML/SafeHtmlImage.vue b/packages/kolibri-common/components/SafeHTML/SafeHtmlImage.vue
index e12cbe5592f..a3eeb8967c2 100644
--- a/packages/kolibri-common/components/SafeHTML/SafeHtmlImage.vue
+++ b/packages/kolibri-common/components/SafeHTML/SafeHtmlImage.vue
@@ -5,13 +5,18 @@
     data-testid="image-container"
   >
     <div class="img-wrapper">
-      <img
-        :src="src"
-        :alt="alt"
-        :style="imageStyle"
-        v-bind="$attrs"
+      <button
+        class="img-button"
+        :aria-label="alt || $tr('expandImage')"
         @click="openLightbox"
       >
+        <img
+          :src="src"
+          :alt="alt"
+          :style="imageStyle"
+          v-bind="$attrs"
+        >
+      </button>
       <KIconButton
         class="expand-btn expand-btn-transition"
         icon="expand"
@@ -25,7 +30,6 @@
     <Lightbox
       :open="lightboxOpen"
       :src="src"
-      :alt="alt"
       @closeLightbox="closeLightbox"
     />
   </div>
@@ -90,4 +94,12 @@
     max-height: 584px;
   }
 
+  .img-button {
+    display: block;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/SafeHTML/__tests__/Lightbox.spec.js b/packages/kolibri-common/components/SafeHTML/__tests__/Lightbox.spec.js
index c32ce8cc19d..01a7f391e28 100644
--- a/packages/kolibri-common/components/SafeHTML/__tests__/Lightbox.spec.js
+++ b/packages/kolibri-common/components/SafeHTML/__tests__/Lightbox.spec.js
@@ -7,14 +7,12 @@ const { zoomOut$, zoomIn$, closeAction$ } = coreStrings;
 
 const sampleOpen = true;
 const sampleSrc = 'test_img.jpg';
-const sampleAlt = 'Test img alt text';
 
 const renderComponent = () => {
   return render(Lightbox, {
     props: {
       open: sampleOpen,
       src: sampleSrc,
-      alt: sampleAlt,
     },
   });
 };
@@ -31,13 +29,15 @@ async function clickBtnNTimes(user, btn, times) {
 }
 
 describe('Lightbox', () => {
-  let user, lightboxDialog, img, zoomOut, zoomIn, close, emitted;
+  let user, lightboxDialog, img, zoomOut, zoomIn, close, emitted, container;
   beforeEach(async () => {
     user = userEvent.setup();
-    emitted = renderComponent().emitted;
+    const result = renderComponent();
+    emitted = result.emitted;
+    container = result.container;
 
     lightboxDialog = screen.getByTestId('lightbox-dialog');
-    img = screen.getByAltText(sampleAlt);
+    img = container.querySelector('.expanded-image');
     zoomOut = screen.getByLabelText(zoomOut$());
     zoomIn = screen.getByLabelText(zoomIn$());
     close = screen.getByLabelText(closeAction$());

From a5ee94cae5547f0601bafab1580ab85e673b9f59 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:21:18 -0700
Subject: [PATCH 5/8] Fix click, keyboard, and interactive element violations
 across components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/views/EpubRendererIndex.vue      |  1 +
 .../frontend/views/CompletionModal/index.vue  |  1 +
 .../frontend/views/SideBar/index.vue          |  8 +++++--
 .../frontend/views/PerseusRendererIndex.vue   |  1 +
 .../frontend/components/QTISandboxPage.vue    | 21 +++++++++++++++++++
 .../frontend/views/OnboardingStepBase.vue     |  1 +
 .../components/SidePanelModal/index.vue       |  3 ++-
 .../courses/sidePanel/SidePanelModal.vue      |  5 ++++-
 .../quizzes/QuizReport/AttemptLogList.vue     | 16 +++++++++-----
 .../sortable/DragSortWidget/index.vue         |  1 +
 .../FacilityAdminCredentialsForm.vue          |  6 ++++--
 packages/kolibri/components/Backdrop.vue      |  1 +
 .../kolibri/components/CoreMenu/index.vue     |  5 ++++-
 .../GlobalSnackbar/internal/CoreSnackbar.vue  |  5 ++++-
 .../pages/AppBarPage/internal/SideNav.vue     |  1 +
 15 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue b/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
index f04ef6c9778..55ff069e5f2 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
+++ b/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"
diff --git a/kolibri/plugins/learn/frontend/views/CompletionModal/index.vue b/kolibri/plugins/learn/frontend/views/CompletionModal/index.vue
index 8860790849a..2a37d0bfb1e 100644
--- a/kolibri/plugins/learn/frontend/views/CompletionModal/index.vue
+++ b/kolibri/plugins/learn/frontend/views/CompletionModal/index.vue
@@ -6,6 +6,7 @@
   >
     <div
       class="modal-overlay"
+      role="presentation"
       @keyup.esc.stop="emitCloseEvent"
       @keyup.enter="goToNextContentNode"
     >
diff --git a/kolibri/plugins/pdf_viewer/frontend/views/SideBar/index.vue b/kolibri/plugins/pdf_viewer/frontend/views/SideBar/index.vue
index 9b0c943f891..eff2505db1c 100644
--- a/kolibri/plugins/pdf_viewer/frontend/views/SideBar/index.vue
+++ b/kolibri/plugins/pdf_viewer/frontend/views/SideBar/index.vue
@@ -31,8 +31,9 @@
         >
           <div
             class="tab"
-            :tabindex="tab.disabled ? -1 : 0"
+            tabindex="0"
             :aria-label="tab.label"
+            :aria-disabled="tab.disabled"
             role="button"
             @click="selectTab(tab.name)"
             @keydown.enter="selectTab(tab.name)"
@@ -134,7 +135,10 @@
     },
     methods: {
       selectTab(tabName) {
-        this.selectedTab = tabName;
+        const tab = this.tabs.find(t => t.name === tabName);
+        if (tab && !tab.disabled) {
+          this.selectedTab = tabName;
+        }
       },
     },
   };
diff --git a/kolibri/plugins/perseus_viewer/frontend/views/PerseusRendererIndex.vue b/kolibri/plugins/perseus_viewer/frontend/views/PerseusRendererIndex.vue
index d85b4a0e2ac..a9d46d14ead 100644
--- a/kolibri/plugins/perseus_viewer/frontend/views/PerseusRendererIndex.vue
+++ b/kolibri/plugins/perseus_viewer/frontend/views/PerseusRendererIndex.vue
@@ -4,6 +4,7 @@
     v-if="itemId || itemData"
     class="bibliotron-exercise perseus-root"
     :class="{ 'perseus-mobile': isMobile }"
+    role="presentation"
     @keydown.enter.prevent="answerGiven"
   >
     <div
diff --git a/kolibri/plugins/qti_viewer/frontend/components/QTISandboxPage.vue b/kolibri/plugins/qti_viewer/frontend/components/QTISandboxPage.vue
index fccaf845ccb..12431264e75 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/QTISandboxPage.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/QTISandboxPage.vue
@@ -19,6 +19,7 @@
         <textarea
           v-model="selectedXml"
           class="qti-xml-editor"
+          :aria-label="qtiXmlEditorLabel"
           placeholder="Select a QTI item from the side panel or paste XML here..."
         >
         </textarea>
@@ -111,7 +112,11 @@
                     <div
                       v-if="item.identifier"
                       class="qti-item"
+                      role="button"
+                      tabindex="0"
                       @click="selectItem(item)"
+                      @keydown.enter="selectItem(item)"
+                      @keydown.space.prevent="selectItem(item)"
                     >
                       <h4>{{ item.title }}</h4>
                     </div>
@@ -125,7 +130,11 @@
                           v-for="nestedItem in item.items"
                           :key="nestedItem.identifier"
                           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>
@@ -146,12 +155,21 @@
 
 <script>
 
+  import { createTranslator } from 'kolibri/utils/i18n';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
   import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
   import items from './__fixtures__/items';
   import structure from './__fixtures__/structure';
 
+  const strings = createTranslator('QTISandboxPage', {
+    qtiXmlEditorLabel: {
+      message: 'QTI XML editor',
+      context:
+        'Accessible label for the QTI XML code editor textarea in the QTI sandbox developer tool',
+    },
+  });
+
   export default {
     name: 'QTISandboxPage',
 
@@ -173,6 +191,9 @@
     },
 
     computed: {
+      qtiXmlEditorLabel() {
+        return strings.qtiXmlEditorLabel$();
+      },
       itemId() {
         return this.$route.params.itemId || null;
       },
diff --git a/kolibri/plugins/setup_wizard/frontend/views/OnboardingStepBase.vue b/kolibri/plugins/setup_wizard/frontend/views/OnboardingStepBase.vue
index 98405ac3efd..51c36fad049 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/OnboardingStepBase.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/OnboardingStepBase.vue
@@ -4,6 +4,7 @@
   <div
     :class="{ 'base-container': true, 'window-is-small': windowIsSmall }"
     :style="{ 'background-color': windowIsSmall ? $themeTokens.surface : '' }"
+    role="presentation"
     @keyup.enter="handleEnterKey"
   >
     <div class="logo-lang-container">
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index 895b2b5ad6f..22e68ac662f 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -3,6 +3,7 @@
   <div
     ref="sidePanel"
     :tabindex="0"
+    role="presentation"
     :class="{ 'is-rtl': isRtl, 'is-mobile': isMobile }"
     @keyup.esc="closePanel"
   >
@@ -11,9 +12,9 @@
         @shouldFocusFirstEl="focusFirstEl"
         @shouldFocusLastEl="focusLastEl"
       >
+        <!-- <section> + aria-label has implicit role="region" (ARIA); explicit was redundant. -->
         <section
           class="side-panel"
-          role="region"
           :style="sidePanelStyles"
           :aria-label="ariaLabel"
         >
diff --git a/packages/kolibri-common/components/courses/sidePanel/SidePanelModal.vue b/packages/kolibri-common/components/courses/sidePanel/SidePanelModal.vue
index f146771ed9b..7b4a1a95c4d 100644
--- a/packages/kolibri-common/components/courses/sidePanel/SidePanelModal.vue
+++ b/packages/kolibri-common/components/courses/sidePanel/SidePanelModal.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div @keyup.esc="closePanel">
+  <div
+    role="presentation"
+    @keyup.esc="closePanel"
+  >
     <KFocusTrap
       @shouldFocusFirstEl="focusFirstEl"
       @shouldFocusLastEl="focusLastEl"
diff --git a/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue b/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue
index d1b7aaf04ee..a8735d351df 100644
--- a/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue
+++ b/packages/kolibri-common/components/quizzes/QuizReport/AttemptLogList.vue
@@ -102,6 +102,8 @@
               ref="attemptList"
               class="history-list"
               role="listbox"
+              tabindex="0"
+              aria-labelledby="answer-history-label"
               @keydown.home="setSelectedAttemptLog(0)"
               @keydown.end="setSelectedAttemptLog(attemptLogs.length - 1)"
               @keydown.up.prevent="setSelectedAttemptLog(previousQuestion(selectedQuestionNumber))"
@@ -121,13 +123,14 @@
                     : '',
                 }"
               >
-                <a
+                <div
                   ref="attemptListOption"
                   role="option"
                   class="attempt-item-anchor"
                   :aria-selected="isSelected(section.startQuestionNumber + qIndex).toString()"
-                  :tabindex="isSelected(section.startQuestionNumber + qIndex) ? 0 : -1"
-                  @click.prevent="setSelectedAttemptLog(section.startQuestionNumber + qIndex)"
+                  :aria-label="questionNumberLabel$({ questionNumber: qIndex + 1 })"
+                  tabindex="-1"
+                  @click="setSelectedAttemptLog(section.startQuestionNumber + qIndex)"
                   @keydown.enter="setSelectedAttemptLog(section.startQuestionNumber + qIndex)"
                   @keydown.space.prevent="
                     setSelectedAttemptLog(section.startQuestionNumber + qIndex)
@@ -140,7 +143,7 @@
                     :questionNumber="qIndex + 1"
                     displayTag="p"
                   />
-                </a>
+                </div>
               </li>
             </ul>
           </div>
@@ -256,6 +259,7 @@
         displaySectionTitle,
         quizSectionsLabel$,
         questionsLabel$,
+        questionNumberLabel$,
         expand,
         isExpanded,
         toggle,
@@ -310,7 +314,9 @@
     methods: {
       setSelectedAttemptLog(questionNumber) {
         const listOption = this.$refs.attemptListOption[questionNumber];
-        listOption.focus();
+        if (listOption) {
+          listOption.focus();
+        }
 
         this.$emit('select', questionNumber);
         this.scrollToSelectedAttemptLog(questionNumber);
diff --git a/packages/kolibri-common/components/sortable/DragSortWidget/index.vue b/packages/kolibri-common/components/sortable/DragSortWidget/index.vue
index a17ba35b88b..a318a711648 100644
--- a/packages/kolibri-common/components/sortable/DragSortWidget/index.vue
+++ b/packages/kolibri-common/components/sortable/DragSortWidget/index.vue
@@ -2,6 +2,7 @@
 
   <div
     class="sort-widget"
+    role="presentation"
     :class="{ focused: hasFocus, 'not-focused': !hasFocus }"
     @mousedown="e => $emit('mousedown', e)"
   >
diff --git a/packages/kolibri-common/components/syncComponentSet/FacilityAdminCredentialsForm.vue b/packages/kolibri-common/components/syncComponentSet/FacilityAdminCredentialsForm.vue
index b619614f10b..b9a87d0ebd3 100644
--- a/packages/kolibri-common/components/syncComponentSet/FacilityAdminCredentialsForm.vue
+++ b/packages/kolibri-common/components/syncComponentSet/FacilityAdminCredentialsForm.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <form @keydown.enter="submitForm">
+  <form @submit.prevent="submitForm">
     <p
       v-if="singleFacility && facility.name"
       class="facility-name"
@@ -26,7 +26,6 @@
       :value.sync="username"
       :isValid.sync="usernameValid"
       :shouldValidate="shouldValidate"
-      :autofocus="true"
       :disabled="$attrs.disabled"
     />
     <PasswordTextbox
@@ -119,6 +118,9 @@
         return this.passwordValid && this.usernameValid;
       },
     },
+    mounted() {
+      this.$refs.username.focus();
+    },
     methods: {
       /**
        * @public
diff --git a/packages/kolibri/components/Backdrop.vue b/packages/kolibri/components/Backdrop.vue
index af8d2b99e1a..a88ed2a141a 100644
--- a/packages/kolibri/components/Backdrop.vue
+++ b/packages/kolibri/components/Backdrop.vue
@@ -6,6 +6,7 @@
   >
     <div
       class="backdrop"
+      role="presentation"
       :class="{ 'has-transitions': transitions }"
       @click="$emit('click')"
     >
diff --git a/packages/kolibri/components/CoreMenu/index.vue b/packages/kolibri/components/CoreMenu/index.vue
index c0f6a8986f1..f072c53cab4 100644
--- a/packages/kolibri/components/CoreMenu/index.vue
+++ b/packages/kolibri/components/CoreMenu/index.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div @keyup.esc="$emit('close')">
+  <div
+    role="presentation"
+    @keyup.esc="$emit('close')"
+  >
     <ul
       role="menu"
       class="ui-menu"
diff --git a/packages/kolibri/components/GlobalSnackbar/internal/CoreSnackbar.vue b/packages/kolibri/components/GlobalSnackbar/internal/CoreSnackbar.vue
index b8d5a576724..d09b72e8609 100644
--- a/packages/kolibri/components/GlobalSnackbar/internal/CoreSnackbar.vue
+++ b/packages/kolibri/components/GlobalSnackbar/internal/CoreSnackbar.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div @keydown.esc="hideSnackbar">
+  <div
+    role="presentation"
+    @keydown.esc="hideSnackbar"
+  >
     <template v-if="backdrop">
       <Backdrop class="snackbar-backdrop" />
       <!-- Prevent focus from leaving the this container -->
diff --git a/packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue b/packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue
index 4204578f50c..f67e046c9b0 100644
--- a/packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue
+++ b/packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue
@@ -3,6 +3,7 @@
   <div
     ref="sideNav"
     class="side-nav-wrapper"
+    role="presentation"
     tabindex="0"
     @keyup.esc="toggleNav"
   >

From 4027acbf8de1d7f8e7365af884b73c1ca8aecf13 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:21:45 -0700
Subject: [PATCH 6/8] Fix vuejs-accessibility violations: iframe titles, mouse
 events, and media captions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/views/BloomPubRendererIndex.vue  |  5 ++
 .../frontend/views/Html5AppRendererIndex.vue  |  5 ++
 .../ChannelRenderer/CustomContentRenderer.vue |  7 ++
 .../frontend/views/MediaPlayerIndex.vue       | 64 +++++++++----------
 .../views/MediaPlayerTranscript/index.vue     |  2 +
 .../components/SearchFiltersPanel/index.vue   |  1 -
 6 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue b/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
index 4e5c7cf9927..76c173abb29 100644
--- a/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
+++ b/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',
+      },
     },
   };
 
diff --git a/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue b/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue
index fef908f81af..de92d724084 100644
--- a/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue
+++ b/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',
+      },
     },
   };
 
diff --git a/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue b/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue
index dc9584cfaaa..bd655124c12 100644
--- a/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue
+++ b/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue
@@ -8,6 +8,7 @@
       :style="{ backgroundColor: $themePalette.grey.v_200 }"
       frameBorder="0"
       :src="rooturl"
+      :title="$tr('contentFrameTitle')"
     >
     </iframe>
     <ContentModal
@@ -376,6 +377,12 @@
           });
       },
     },
+    $trs: {
+      contentFrameTitle: {
+        message: 'Content viewer',
+        context: 'Accessible title for the iframe that displays the content',
+      },
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue
index 9f4e9d9be22..e94d70e47cf 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue
@@ -37,23 +37,21 @@
         ref="player"
         class="custom-skin video-js vjs-big-play-centered vjs-show-big-play-button-on-pause"
       >
-        <template v-for="video in videoSources">
-          <source
-            :key="video.storage_url"
-            :src="video.storage_url"
-            :type="`video/${video.extension}`"
-          >
-        </template>
-        <template v-for="track in trackSources">
-          <track
-            :key="track.storage_url"
-            kind="captions"
-            :src="track.storage_url"
-            :srclang="track.lang.id"
-            :label="track.lang.lang_name"
-            :default="isDefaultTrack(track.lang.id)"
-          >
-        </template>
+        <source
+          v-for="video in videoSources"
+          :key="video.storage_url"
+          :src="video.storage_url"
+          :type="`video/${video.extension}`"
+        >
+        <track
+          v-for="track in trackSources"
+          :key="track.storage_url"
+          kind="captions"
+          :src="track.storage_url"
+          :srclang="track.lang.id"
+          :label="track.lang.lang_name"
+          :default="isDefaultTrack(track.lang.id)"
+        >
       </video>
 
       <audio
@@ -61,23 +59,21 @@
         ref="player"
         class="custom-skin video-js"
       >
-        <template v-for="audio in audioSources">
-          <source
-            :key="audio.storage_url"
-            :src="audio.storage_url"
-            :type="audioSourceType(audio.extension)"
-          >
-        </template>
-        <template v-for="track in trackSources">
-          <track
-            :key="track.storage_url"
-            kind="captions"
-            :src="track.storage_url"
-            :srclang="track.lang.id"
-            :label="track.lang.lang_name"
-            :default="isDefaultTrack(track.lang.id)"
-          >
-        </template>
+        <source
+          v-for="audio in audioSources"
+          :key="audio.storage_url"
+          :src="audio.storage_url"
+          :type="audioSourceType(audio.extension)"
+        >
+        <track
+          v-for="track in trackSources"
+          :key="track.storage_url"
+          kind="captions"
+          :src="track.storage_url"
+          :srclang="track.lang.id"
+          :label="track.lang.lang_name"
+          :default="isDefaultTrack(track.lang.id)"
+        >
       </audio>
 
       <MediaPlayerTranscript
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue
index 97b62243475..fd2d7853839 100755
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue
@@ -8,6 +8,8 @@
     :aria-label="coreString('transcript')"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false"
+    @focus="hovering = true"
+    @blur="hovering = false"
   >
     <div
       v-show="!cues.length"
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 1644675e46d..b32e6a869b1 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -1,7 +1,6 @@
 <template>
 
   <section
-    role="region"
     :closeButtonIconType="closeButtonIcon"
     :aria-label="filterAndSearchLabel$()"
     :ariaLabel="filterAndSearchLabel$()"

From 292394c34b68bcbe9bb68b5612d92cf47d1ea576 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:22:08 -0700
Subject: [PATCH 7/8] Fix vuejs-accessibility/label-has-for violations:
 associate labels with form controls

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../common/QuestionDetailLearnerList.vue      | 33 +++++++++++++----
 .../views/DeviceSettingsPage/index.vue        |  8 ++---
 .../importUser/SelectFacilityPage.vue         |  8 ++---
 .../frontend/views/ImportCsvPage/Init.vue     | 22 ++++++------
 .../frontend/views/SelectFacilityForm.vue     |  8 ++---
 .../PictureSignIn/PicturePasswordOption.vue   |  6 ++++
 .../kolibri-common/components/SearchBox.vue   | 35 +++++++++++--------
 7 files changed, 73 insertions(+), 47 deletions(-)

diff --git a/kolibri/plugins/coach/frontend/views/common/QuestionDetailLearnerList.vue b/kolibri/plugins/coach/frontend/views/common/QuestionDetailLearnerList.vue
index 083e4dd8272..e1c2a9ca5e0 100644
--- a/kolibri/plugins/coach/frontend/views/common/QuestionDetailLearnerList.vue
+++ b/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;
         }
       },
     },
diff --git a/kolibri/plugins/device/frontend/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/frontend/views/DeviceSettingsPage/index.vue
index 6b79bd2e287..d502b1a1b35 100644
--- a/kolibri/plugins/device/frontend/views/DeviceSettingsPage/index.vue
+++ b/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')"
diff --git a/kolibri/plugins/device/frontend/views/lodUsers/importUser/SelectFacilityPage.vue b/kolibri/plugins/device/frontend/views/lodUsers/importUser/SelectFacilityPage.vue
index 3a8be4c86a0..b64356be972 100644
--- a/kolibri/plugins/device/frontend/views/lodUsers/importUser/SelectFacilityPage.vue
+++ b/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"
diff --git a/kolibri/plugins/facility/frontend/views/ImportCsvPage/Init.vue b/kolibri/plugins/facility/frontend/views/ImportCsvPage/Init.vue
index d3f76dbdd61..99a13914ffd 100644
--- a/kolibri/plugins/facility/frontend/views/ImportCsvPage/Init.vue
+++ b/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">
diff --git a/kolibri/plugins/setup_wizard/frontend/views/SelectFacilityForm.vue b/kolibri/plugins/setup_wizard/frontend/views/SelectFacilityForm.vue
index c58412b3db2..c6e688c2bcb 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/SelectFacilityForm.vue
+++ b/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"
diff --git a/kolibri/plugins/user_auth/frontend/views/SignInPage/PictureSignIn/PicturePasswordOption.vue b/kolibri/plugins/user_auth/frontend/views/SignInPage/PictureSignIn/PicturePasswordOption.vue
index ebfc4301620..878b31a90a9 100644
--- a/kolibri/plugins/user_auth/frontend/views/SignInPage/PictureSignIn/PicturePasswordOption.vue
+++ b/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,
diff --git a/packages/kolibri-common/components/SearchBox.vue b/packages/kolibri-common/components/SearchBox.vue
index 4118869b46c..87a78a4cf61 100644
--- a/packages/kolibri-common/components/SearchBox.vue
+++ b/packages/kolibri-common/components/SearchBox.vue
@@ -2,8 +2,8 @@
 
   <form
     class="search-box"
+    role="search"
     @submit.prevent="updateSearchQuery"
-    @keydown.esc.prevent="handleEscKey"
   >
     <div
       class="search-box-row"
@@ -15,20 +15,23 @@
       }"
     >
       <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"
+          @keydown.esc.prevent="handleEscKey"
+        >
+      </label>
       <div class="search-buttons-wrapper">
         <KIconButton
           icon="clear"
@@ -203,6 +206,10 @@
     border-radius: $radius;
   }
 
+  .search-label {
+    display: contents;
+  }
+
   .search-input {
     display: table-cell;
     width: 100%;

From a417a0911f63f1f1e6a602ef19e9f24281c75090 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 21 May 2026 14:22:37 -0700
Subject: [PATCH 8/8] Suppress vuejs-accessibility/no-autofocus: intentional
 accessibility focus management

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../views/common/assignments/AssignmentDetailsModal.vue       | 2 ++
 .../frontend/views/groups/GroupsRootPage/CreateGroupModal.vue | 2 ++
 .../frontend/views/groups/GroupsRootPage/RenameGroupModal.vue | 2 ++
 .../views/AvailableChannelsPage/ChannelTokenModal.vue         | 2 ++
 kolibri/plugins/device/frontend/views/DeviceNameModal.vue     | 2 ++
 .../SelectTransferSourceModal/SelectImportSourceModal.vue     | 2 ++
 .../lodUsers/importUser/ImportUserWithCredentialsPage.vue     | 4 ++++
 .../views/FacilityConfigPage/EditFacilityNameModal.vue        | 2 ++
 .../frontend/views/ManageClassPage/ClassCreateModal.vue       | 2 ++
 kolibri/plugins/facility/frontend/views/UserEditPage.vue      | 2 ++
 .../plugins/facility/frontend/views/common/ClassCopyModal.vue | 2 ++
 .../facility/frontend/views/common/ClassRenameModal.vue       | 2 ++
 .../frontend/views/users/common/ResetUserPasswordModal.vue    | 2 ++
 .../frontend/views/users/sidePanels/UserCreate/index.vue      | 2 ++
 .../setup_wizard/frontend/views/ImportIndividualUserForm.vue  | 4 ++++
 kolibri/plugins/setup_wizard/frontend/views/JoinOrNewLOD.vue  | 2 ++
 .../views/onboarding-forms/CreateLearnerAccountForm.vue       | 2 ++
 .../frontend/views/onboarding-forms/DeviceNameForm.vue        | 2 ++
 .../views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue      | 2 ++
 .../frontend/views/onboarding-forms/GuestAccessForm.vue       | 2 ++
 .../frontend/views/onboarding-forms/HowAreYouUsingKolibri.vue | 2 ++
 .../views/onboarding-forms/RequirePasswordForLearnersForm.vue | 2 ++
 .../views/onboarding-forms/SetUpLearningFacilityForm.vue      | 2 ++
 .../frontend/views/onboarding-forms/UserCredentialsForm.vue   | 2 ++
 .../user_auth/frontend/views/SignInPage/NewPasswordPage.vue   | 2 ++
 kolibri/plugins/user_auth/frontend/views/SignInPage/index.vue | 4 ++++
 kolibri/plugins/user_auth/frontend/views/SignUpPage.vue       | 2 ++
 .../frontend/views/ChangeFacility/CreateAccount/index.vue     | 2 ++
 .../views/ChangeFacility/MergeAccountDialog/index.vue         | 4 ++++
 .../views/ChangeFacility/MergeDifferentAccounts/index.vue     | 2 ++
 .../plugins/user_profile/frontend/views/ProfileEditPage.vue   | 2 ++
 .../frontend/views/ProfilePage/ChangeUserPasswordModal.vue    | 2 ++
 .../components/syncComponentSet/RegisterFacilityModal.vue     | 2 ++
 .../syncComponentSet/SelectDeviceModalGroup/AddDeviceForm.vue | 2 ++
 .../components/syncComponentSet/SelectSyncSourceModal.vue     | 2 ++
 .../components/userAccounts/FullNameTextbox.vue               | 2 ++
 .../components/userAccounts/UsernameTextbox.vue               | 2 ++
 packages/kolibri/components/FilterTextbox.vue                 | 2 ++
 38 files changed, 84 insertions(+)

diff --git a/kolibri/plugins/coach/frontend/views/common/assignments/AssignmentDetailsModal.vue b/kolibri/plugins/coach/frontend/views/common/assignments/AssignmentDetailsModal.vue
index e5ee3f6f4bb..78c22547f5b 100644
--- a/kolibri/plugins/coach/frontend/views/common/assignments/AssignmentDetailsModal.vue
+++ b/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
diff --git a/kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/CreateGroupModal.vue b/kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/CreateGroupModal.vue
index aedfcd50165..84b2bfc396d 100644
--- a/kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/CreateGroupModal.vue
+++ b/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>
diff --git a/kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/RenameGroupModal.vue b/kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/RenameGroupModal.vue
index 1b9fdd406d1..30b607f0199 100644
--- a/kolibri/plugins/coach/frontend/views/groups/GroupsRootPage/RenameGroupModal.vue
+++ b/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>
diff --git a/kolibri/plugins/device/frontend/views/AvailableChannelsPage/ChannelTokenModal.vue b/kolibri/plugins/device/frontend/views/AvailableChannelsPage/ChannelTokenModal.vue
index 33f301f7569..3f7f88dab7c 100644
--- a/kolibri/plugins/device/frontend/views/AvailableChannelsPage/ChannelTokenModal.vue
+++ b/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>
diff --git a/kolibri/plugins/device/frontend/views/DeviceNameModal.vue b/kolibri/plugins/device/frontend/views/DeviceNameModal.vue
index 1aed701800e..dee38cef0c0 100644
--- a/kolibri/plugins/device/frontend/views/DeviceNameModal.vue
+++ b/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>
diff --git a/kolibri/plugins/device/frontend/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue b/kolibri/plugins/device/frontend/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue
index 5da815db8a3..1251b878e39 100644
--- a/kolibri/plugins/device/frontend/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue
+++ b/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')"
diff --git a/kolibri/plugins/device/frontend/views/lodUsers/importUser/ImportUserWithCredentialsPage.vue b/kolibri/plugins/device/frontend/views/lodUsers/importUser/ImportUserWithCredentialsPage.vue
index b1a203d38f0..2d48ab5070e 100644
--- a/kolibri/plugins/device/frontend/views/lodUsers/importUser/ImportUserWithCredentialsPage.vue
+++ b/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"
diff --git a/kolibri/plugins/facility/frontend/views/FacilityConfigPage/EditFacilityNameModal.vue b/kolibri/plugins/facility/frontend/views/FacilityConfigPage/EditFacilityNameModal.vue
index e0f6019170d..a54cbc18730 100644
--- a/kolibri/plugins/facility/frontend/views/FacilityConfigPage/EditFacilityNameModal.vue
+++ b/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>
 
diff --git a/kolibri/plugins/facility/frontend/views/ManageClassPage/ClassCreateModal.vue b/kolibri/plugins/facility/frontend/views/ManageClassPage/ClassCreateModal.vue
index 7e044152cde..31978cad096 100644
--- a/kolibri/plugins/facility/frontend/views/ManageClassPage/ClassCreateModal.vue
+++ b/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>
diff --git a/kolibri/plugins/facility/frontend/views/UserEditPage.vue b/kolibri/plugins/facility/frontend/views/UserEditPage.vue
index 40dadd0e96d..c2318a85310 100644
--- a/kolibri/plugins/facility/frontend/views/UserEditPage.vue
+++ b/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"
diff --git a/kolibri/plugins/facility/frontend/views/common/ClassCopyModal.vue b/kolibri/plugins/facility/frontend/views/common/ClassCopyModal.vue
index 6430e1d1de8..096cd648388 100644
--- a/kolibri/plugins/facility/frontend/views/common/ClassCopyModal.vue
+++ b/kolibri/plugins/facility/frontend/views/common/ClassCopyModal.vue
@@ -3,6 +3,7 @@
   <KModal :title="copyClass$()">
     <KCircularLoader v-if="loading" />
     <div v-else>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KTextbox
         v-model="copiedClassName"
         type="text"
@@ -13,6 +14,7 @@
         :invalid="Boolean(classNameInvalidText)"
         :invalidText="classNameInvalidText"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
       <div class="checkbox-container">
         <KCheckbox
           v-if="classLearnerIds.length"
diff --git a/kolibri/plugins/facility/frontend/views/common/ClassRenameModal.vue b/kolibri/plugins/facility/frontend/views/common/ClassRenameModal.vue
index cb6e42217a5..c3cd9028b0b 100644
--- a/kolibri/plugins/facility/frontend/views/common/ClassRenameModal.vue
+++ b/kolibri/plugins/facility/frontend/views/common/ClassRenameModal.vue
@@ -9,6 +9,7 @@
     @submit="updateName"
     @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>
diff --git a/kolibri/plugins/facility/frontend/views/users/common/ResetUserPasswordModal.vue b/kolibri/plugins/facility/frontend/views/users/common/ResetUserPasswordModal.vue
index f29ff742759..a9ebbb57407 100644
--- a/kolibri/plugins/facility/frontend/views/users/common/ResetUserPasswordModal.vue
+++ b/kolibri/plugins/facility/frontend/views/users/common/ResetUserPasswordModal.vue
@@ -13,6 +13,7 @@
       {{ $tr('username') }}<strong>{{ username }}</strong>
     </p>
 
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <PasswordTextbox
       ref="passwordTextbox"
       :autofocus="true"
@@ -21,6 +22,7 @@
       :isValid.sync="passwordValid"
       :shouldValidate="formSubmitted"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
   </KModal>
 
 </template>
diff --git a/kolibri/plugins/facility/frontend/views/users/sidePanels/UserCreate/index.vue b/kolibri/plugins/facility/frontend/views/users/sidePanels/UserCreate/index.vue
index bdc12be4cd8..76f85b25c74 100644
--- a/kolibri/plugins/facility/frontend/views/users/sidePanels/UserCreate/index.vue
+++ b/kolibri/plugins/facility/frontend/views/users/sidePanels/UserCreate/index.vue
@@ -33,6 +33,7 @@
         class="form"
       >
         <section>
+          <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
           <FullNameTextbox
             ref="fullNameTextbox"
             :autofocus="true"
@@ -41,6 +42,7 @@
             :isValid.sync="fullNameValid"
             :shouldValidate="formSubmitted"
           />
+          <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
           <UsernameTextbox
             ref="usernameTextbox"
diff --git a/kolibri/plugins/setup_wizard/frontend/views/ImportIndividualUserForm.vue b/kolibri/plugins/setup_wizard/frontend/views/ImportIndividualUserForm.vue
index 9c27d102c74..1f2fa03c8ed 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/ImportIndividualUserForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/ImportIndividualUserForm.vue
@@ -29,6 +29,7 @@
       >
         {{ coreString('invalidCredentialsError') }}
       </p>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KTextbox
         ref="usernameTextbox"
         v-model.trim="username"
@@ -39,6 +40,7 @@
         :invalidText="invalidText"
         @blur="shouldValidate = true"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
       <PasswordTextbox
         v-if="!facility.learner_can_login_with_no_password"
         ref="passwordTextbox"
@@ -82,6 +84,7 @@
         >
           {{ coreString('invalidCredentialsError') }}
         </p>
+        <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
         <KTextbox
           ref="adminUsernameTextbox"
           v-model.trim="adminUsername"
@@ -91,6 +94,7 @@
           :invalidText="invalidText"
           @blur="shouldValidate = true"
         />
+        <!-- eslint-enable vuejs-accessibility/no-autofocus -->
         <PasswordTextbox
           ref="adminPasswordTextbox"
           :value.sync="adminPassword"
diff --git a/kolibri/plugins/setup_wizard/frontend/views/JoinOrNewLOD.vue b/kolibri/plugins/setup_wizard/frontend/views/JoinOrNewLOD.vue
index c3006629296..81c1860c29e 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/JoinOrNewLOD.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/JoinOrNewLOD.vue
@@ -6,6 +6,7 @@
     @continue="handleContinue"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         v-model="selected"
         :label="$tr('joinFacilityLabel')"
@@ -20,6 +21,7 @@
         class="radio-button"
         :autofocus="isImportSetup"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </KRadioButtonGroup>
     <SelectDeviceModalGroup
       v-if="showSelectAddressModal"
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/CreateLearnerAccountForm.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/CreateLearnerAccountForm.vue
index 21ed1104f4a..19d41b526f1 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/CreateLearnerAccountForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/CreateLearnerAccountForm.vue
@@ -9,6 +9,7 @@
     @continue="handleContinue"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         ref="yesRadio"
         v-model="setting"
@@ -25,6 +26,7 @@
         :buttonValue="false"
         :autofocus="!setting"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </KRadioButtonGroup>
     <p class="description">
       {{ getCommonSyncString('changeLater') }}
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/DeviceNameForm.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/DeviceNameForm.vue
index b21626a07f7..95164c68ddb 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/DeviceNameForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/DeviceNameForm.vue
@@ -5,6 +5,7 @@
     :description="$tr('deviceNameDescription')"
     @continue="handleContinue"
   >
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       ref="textbox"
       v-model="value"
@@ -15,6 +16,7 @@
       :invalidText="invalidText"
       @blur="shouldValidate = true"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
   </OnboardingStepBase>
 
 </template>
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue
index 2bfb9af40df..d507d867730 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue
@@ -5,6 +5,7 @@
     @continue="handleContinue"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         v-model="selected"
         :label="$tr('fullDeviceLabel')"
@@ -19,6 +20,7 @@
         :description="$tr('learnOnlyDeviceDescription')"
         :autofocus="isLODSetup"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </KRadioButtonGroup>
   </OnboardingStepBase>
 
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/GuestAccessForm.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/GuestAccessForm.vue
index 0cf441064c3..000a146761a 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/GuestAccessForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/GuestAccessForm.vue
@@ -10,6 +10,7 @@
     @continue="handleContinue"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         ref="yesRadio"
         v-model="setting"
@@ -24,6 +25,7 @@
         :buttonValue="false"
         :autofocus="!setting"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </KRadioButtonGroup>
     <p class="form">
       {{ $tr('changeLater') }}
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/HowAreYouUsingKolibri.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/HowAreYouUsingKolibri.vue
index 9a7d22dd98b..667bfc6af37 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/HowAreYouUsingKolibri.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/HowAreYouUsingKolibri.vue
@@ -7,6 +7,7 @@
     @continue="handleContinue"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         v-model="selected"
         style="margin-bottom: 1em"
@@ -22,6 +23,7 @@
         :description="$tr('groupLearningDescription')"
         :autofocus="selected === UsePresets.GROUP"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </KRadioButtonGroup>
   </OnboardingStepBase>
 
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/RequirePasswordForLearnersForm.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/RequirePasswordForLearnersForm.vue
index 98648eede11..1753406cf1a 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/RequirePasswordForLearnersForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/RequirePasswordForLearnersForm.vue
@@ -9,6 +9,7 @@
     @continue="handleContinue"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         ref="yesRadio"
         v-model="setting"
@@ -25,6 +26,7 @@
         :buttonValue="false"
         :autofocus="!setting"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </KRadioButtonGroup>
     <p class="description">
       {{ getCommonSyncString('changeLater') }}
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/SetUpLearningFacilityForm.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/SetUpLearningFacilityForm.vue
index a42dc3e233c..182e21f2085 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/SetUpLearningFacilityForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/SetUpLearningFacilityForm.vue
@@ -6,6 +6,7 @@
     @continue="handleContinue"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         v-model="selected"
         :label="$tr('createFacilityLabel')"
@@ -20,6 +21,7 @@
         class="radio-button"
         :autofocus="isImportFacilitySetup"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </KRadioButtonGroup>
     <SelectDeviceModalGroup
       v-if="showSelectAddressModal"
diff --git a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/UserCredentialsForm.vue b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/UserCredentialsForm.vue
index a57d1f4ba24..7169d0c9149 100644
--- a/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/UserCredentialsForm.vue
+++ b/kolibri/plugins/setup_wizard/frontend/views/onboarding-forms/UserCredentialsForm.vue
@@ -20,6 +20,7 @@
            valid if we're given the user that we're taking credentials for (ie, just entering
            password for admin)
       -->
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <FullNameTextbox
         v-show="!selectedUser"
         ref="fullNameTextbox"
@@ -30,6 +31,7 @@
         :autofocus="true"
         autocomplete="name"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
       <UsernameTextbox
         v-show="!selectedUser"
diff --git a/kolibri/plugins/user_auth/frontend/views/SignInPage/NewPasswordPage.vue b/kolibri/plugins/user_auth/frontend/views/SignInPage/NewPasswordPage.vue
index a67c612532c..b0b6cd67077 100644
--- a/kolibri/plugins/user_auth/frontend/views/SignInPage/NewPasswordPage.vue
+++ b/kolibri/plugins/user_auth/frontend/views/SignInPage/NewPasswordPage.vue
@@ -10,6 +10,7 @@
 
       <p>{{ $tr('needToMakeNewPasswordLabel', { user: username }) }}</p>
 
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <PasswordTextbox
         ref="createPassword"
         :autofocus="true"
@@ -19,6 +20,7 @@
         :shouldValidate="busy"
         @submitNewPassword="updatePassword"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
       <KButton
         appearance="raised-button"
         :primary="true"
diff --git a/kolibri/plugins/user_auth/frontend/views/SignInPage/index.vue b/kolibri/plugins/user_auth/frontend/views/SignInPage/index.vue
index 105146912e5..59d8e5f3555 100644
--- a/kolibri/plugins/user_auth/frontend/views/SignInPage/index.vue
+++ b/kolibri/plugins/user_auth/frontend/views/SignInPage/index.vue
@@ -36,6 +36,7 @@
       >
         <div v-show="showUsernameForm">
           <transition name="textbox">
+            <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
             <KTextbox
               id="username"
               ref="username"
@@ -50,6 +51,7 @@
               @input="handleUsernameInput"
               @keydown="handleUsernameKeydown"
             />
+            <!-- eslint-enable vuejs-accessibility/no-autofocus -->
           </transition>
           <transition name="list">
             <div class="suggestions-wrapper">
@@ -88,6 +90,7 @@
             {{ $tr('incorrectPasswordError') }}
           </UiAlert>
           <transition name="textbox">
+            <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
             <KTextbox
               id="password"
               ref="password"
@@ -101,6 +104,7 @@
               :floatingLabel="false"
               @blur="handlePasswordBlur"
             />
+            <!-- eslint-enable vuejs-accessibility/no-autofocus -->
           </transition>
           <div>
             <KButton
diff --git a/kolibri/plugins/user_auth/frontend/views/SignUpPage.vue b/kolibri/plugins/user_auth/frontend/views/SignUpPage.vue
index 37b1eab4bcd..7c9ac593150 100644
--- a/kolibri/plugins/user_auth/frontend/views/SignUpPage.vue
+++ b/kolibri/plugins/user_auth/frontend/views/SignUpPage.vue
@@ -10,6 +10,7 @@
         <h1>{{ $tr('createAccount') }}</h1>
 
         <div v-show="atFirstStep">
+          <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
           <FullNameTextbox
             ref="fullNameTextbox"
             autocomplete="name"
@@ -19,6 +20,7 @@
             :shouldValidate="formSubmitted"
             :disabled="busy"
           />
+          <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
           <UsernameTextbox
             ref="usernameTextbox"
diff --git a/kolibri/plugins/user_profile/frontend/views/ChangeFacility/CreateAccount/index.vue b/kolibri/plugins/user_profile/frontend/views/ChangeFacility/CreateAccount/index.vue
index 9c031c919f1..e1c57296573 100644
--- a/kolibri/plugins/user_profile/frontend/views/ChangeFacility/CreateAccount/index.vue
+++ b/kolibri/plugins/user_profile/frontend/views/ChangeFacility/CreateAccount/index.vue
@@ -4,6 +4,7 @@
     <h1>{{ profileString('createAccount') }}</h1>
     <p>{{ description }}</p>
 
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <UsernameTextbox
       ref="usernameTextbox"
       data-testid="usernameTextbox"
@@ -12,6 +13,7 @@
       :isValid.sync="isUsernameValid"
       :shouldValidate="isFormSubmitted"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     <PasswordTextbox
       v-if="showPasswordTextbox"
       ref="passwordTextbox"
diff --git a/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeAccountDialog/index.vue b/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeAccountDialog/index.vue
index d6b7e2d9ddb..e15fcdbd894 100644
--- a/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeAccountDialog/index.vue
+++ b/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeAccountDialog/index.vue
@@ -18,16 +18,19 @@
     <span v-if="usingAdminPasswordState">
       <p>{{ mergeAccountUsingAdminAccount }}</p>
 
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KTextbox
         v-model="formData.username"
         data-testid="usernameTextbox"
         :autofocus="true"
         :label="coreString('usernameLabel')"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </span>
     <p v-else>
       {{ mergeAccountUserInfo }}
     </p>
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       v-if="showPasswordTextbox"
       ref="passwordTextbox"
@@ -41,6 +44,7 @@
       :floatingLabel="false"
       @keydown.enter="handleContinue"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     <div v-if="!usingAdminPasswordState">
       {{ $tr('doNotKnowPassword') }}
       <KButton
diff --git a/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeDifferentAccounts/index.vue b/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeDifferentAccounts/index.vue
index 67fd159e34c..619fb84ca8e 100644
--- a/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeDifferentAccounts/index.vue
+++ b/kolibri/plugins/user_profile/frontend/views/ChangeFacility/MergeDifferentAccounts/index.vue
@@ -17,6 +17,7 @@
     </p>
     {{ $tr('mergeAccountUserInfo') }}
 
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       v-model="formData.username"
       data-testid="usernameTextbox"
@@ -29,6 +30,7 @@
       @input="userDoesNotExist = false"
       @keydown.enter="handleContinue"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
     <BottomAppBar>
       <slot name="buttons">
diff --git a/kolibri/plugins/user_profile/frontend/views/ProfileEditPage.vue b/kolibri/plugins/user_profile/frontend/views/ProfileEditPage.vue
index 2a1d95e3fb9..1760cc590f2 100644
--- a/kolibri/plugins/user_profile/frontend/views/ProfileEditPage.vue
+++ b/kolibri/plugins/user_profile/frontend/views/ProfileEditPage.vue
@@ -18,6 +18,7 @@
       >
         <h1>{{ $tr('editProfileHeader') }}</h1>
 
+        <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
         <FullNameTextbox
           ref="fullNameTextbox"
           :autofocus="true"
@@ -26,6 +27,7 @@
           :isValid.sync="fullNameValid"
           :shouldValidate="formSubmitted"
         />
+        <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
         <UsernameTextbox
           ref="usernameTextbox"
diff --git a/kolibri/plugins/user_profile/frontend/views/ProfilePage/ChangeUserPasswordModal.vue b/kolibri/plugins/user_profile/frontend/views/ProfilePage/ChangeUserPasswordModal.vue
index e50935f4dcd..dfeb1299fc5 100644
--- a/kolibri/plugins/user_profile/frontend/views/ProfilePage/ChangeUserPasswordModal.vue
+++ b/kolibri/plugins/user_profile/frontend/views/ProfilePage/ChangeUserPasswordModal.vue
@@ -10,6 +10,7 @@
     @submit="submitForm"
     @cancel="$emit('cancel')"
   >
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <PasswordTextbox
       ref="passwordTextbox"
       :autofocus="true"
@@ -18,6 +19,7 @@
       :isValid.sync="passwordValid"
       :shouldValidate="formSubmitted"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
   </KModal>
 
 </template>
diff --git a/packages/kolibri-common/components/syncComponentSet/RegisterFacilityModal.vue b/packages/kolibri-common/components/syncComponentSet/RegisterFacilityModal.vue
index 74f30616308..7e9b32a7fcc 100644
--- a/packages/kolibri-common/components/syncComponentSet/RegisterFacilityModal.vue
+++ b/packages/kolibri-common/components/syncComponentSet/RegisterFacilityModal.vue
@@ -2,6 +2,7 @@
 
   <KModal :title="registerFacility.$tr('registerFacility')">
     <p>{{ $tr('enterToken') }}</p>
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <KTextbox
       v-model="token"
       type="text"
@@ -11,6 +12,7 @@
       :invalidText="$tr('invalidToken')"
       @input="invalid = false"
     />
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     <template #actions>
       <KButton
         :text="coreString('cancelAction')"
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/AddDeviceForm.vue b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/AddDeviceForm.vue
index 4eb66baca08..5fcdfda81d5 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/AddDeviceForm.vue
+++ b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/AddDeviceForm.vue
@@ -11,6 +11,7 @@
   >
     <p>{{ $tr('addressDesc') }}</p>
     <div>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KTextbox
         ref="address"
         v-model="address"
@@ -22,6 +23,7 @@
         :disabled="attemptingToConnect"
         @blur="addressBlurred = true"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
     </div>
     <p>{{ $tr('nameDesc') }}</p>
     <div>
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue b/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue
index f5f59ca3f8f..78ebf6b3af0 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue
+++ b/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue
@@ -7,6 +7,7 @@
     @cancel="handleCancel"
   >
     <KRadioButtonGroup>
+      <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
       <KRadioButton
         v-model="source"
         :label="$tr('dataPortalLabel')"
@@ -15,6 +16,7 @@
         :autofocus="!portalIsOffline"
         :description="$tr('dataPortalDescription')"
       />
+      <!-- eslint-enable vuejs-accessibility/no-autofocus -->
       <KRadioButton
         v-model="source"
         :label="$tr('localNetworkLabel')"
diff --git a/packages/kolibri-common/components/userAccounts/FullNameTextbox.vue b/packages/kolibri-common/components/userAccounts/FullNameTextbox.vue
index e69e784c599..b546bf09139 100644
--- a/packages/kolibri-common/components/userAccounts/FullNameTextbox.vue
+++ b/packages/kolibri-common/components/userAccounts/FullNameTextbox.vue
@@ -1,5 +1,6 @@
 <template>
 
+  <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
   <KTextbox
     ref="textbox"
     :value="value"
@@ -13,6 +14,7 @@
     @blur="blurred = true"
     @input="$emit('update:value', $event)"
   />
+  <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
 </template>
 
diff --git a/packages/kolibri-common/components/userAccounts/UsernameTextbox.vue b/packages/kolibri-common/components/userAccounts/UsernameTextbox.vue
index a05d7247844..21f5830c3f0 100644
--- a/packages/kolibri-common/components/userAccounts/UsernameTextbox.vue
+++ b/packages/kolibri-common/components/userAccounts/UsernameTextbox.vue
@@ -1,5 +1,6 @@
 <template>
 
+  <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
   <KTextbox
     ref="textbox"
     :value="value"
@@ -13,6 +14,7 @@
     @blur="blurred = true"
     @input="handleInput"
   />
+  <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
 </template>
 
diff --git a/packages/kolibri/components/FilterTextbox.vue b/packages/kolibri/components/FilterTextbox.vue
index 92ce685c74c..19147f6be82 100644
--- a/packages/kolibri/components/FilterTextbox.vue
+++ b/packages/kolibri/components/FilterTextbox.vue
@@ -8,6 +8,7 @@
       <KIcon icon="search" />
     </UiIcon>
 
+    <!-- eslint-disable vuejs-accessibility/no-autofocus -- intentional: a11y autofocus -->
     <input
       ref="searchinput"
       v-model.trim="model"
@@ -23,6 +24,7 @@
       :aria-controls="ariaControls"
       @keyup="throttledEmitInput($event.target.value)"
     >
+    <!-- eslint-enable vuejs-accessibility/no-autofocus -->
 
     <KIconButton
       size="small"