From 2694f8a4bfd81ead603ff27ce63bf2e836253f87 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Apr 2026 08:30:45 +0000
Subject: [PATCH 1/6] Initial plan


From c7db846a831b8fd41cf0645751865ae9abf470cb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Apr 2026 08:35:20 +0000
Subject: [PATCH 2/6] Add aria-label to switch buttons and font size field on
 Console Config page

Add aria-label attributes to all EuiSwitch components and the EuiFieldNumber
on the Console settings page so that screen readers announce the setting names
along with the control state.

Fixes accessibility issue where switches were announced as "On, on, switch"
without the corresponding setting name, and the font size field was announced
without its label.

WCAG 4.1.2: Name, Role, Value (Level A)

Agent-Logs-Url: https://github.com/elastic/kibana/sessions/588ad37a-5f2c-46c7-bca2-c43f74d5ac17

Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
---
 .../components/settings/settings_editor.tsx   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
index 29af8cc11135e..35890dbd637b9 100644
--- a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
+++ b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
@@ -248,6 +248,9 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           checked={isHistoryEnabled}
           label={isHistoryEnabled ? ON_LABEL : OFF_LABEL}
+          aria-label={i18n.translate('console.settingsPage.saveRequestsToHistoryAriaLabel', {
+            defaultMessage: 'Save requests to history',
+          })}
           onChange={(e) => toggleSavingToHistory(e.target.checked)}
         />
       </SettingsFormRow>
@@ -259,6 +262,9 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="enableKeyboardShortcuts"
           label={isKeyboardShortcutsEnabled ? ON_LABEL : OFF_LABEL}
+          aria-label={i18n.translate('console.settingsPage.enableKeyboardShortcutsAriaLabel', {
+            defaultMessage: 'Keyboard shortcuts',
+          })}
           checked={isKeyboardShortcutsEnabled}
           onChange={(e) => toggleKeyboardShortcuts(e.target.checked)}
         />
@@ -271,6 +277,9 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="enableA11yOverlay"
           label={isAccessibilityOverlayEnabled ? ON_LABEL : OFF_LABEL}
+          aria-label={i18n.translate('console.settingsPage.enableAccessibilityOverlayAriaLabel', {
+            defaultMessage: 'Accessibility overlay',
+          })}
           checked={isAccessibilityOverlayEnabled}
           onChange={(e) => toggleAccessibilityOverlay(e.target.checked)}
         />
@@ -311,6 +320,9 @@ export const SettingsEditor = (props: Props) => {
           css={styles.minWidthControl}
           compressed
           data-test-subj="setting-font-size-input"
+          aria-label={i18n.translate('console.settingsPage.fontSizeAriaLabel', {
+            defaultMessage: 'Font size',
+          })}
           value={fontSize}
           min={6}
           max={50}
@@ -329,6 +341,9 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="settingsWrapLines"
           label={wrapMode ? ON_LABEL : OFF_LABEL}
+          aria-label={i18n.translate('console.settingsPage.wrapLongLinesAriaLabel', {
+            defaultMessage: 'Wrap long lines',
+          })}
           checked={wrapMode}
           onChange={(e) => setWrapMode(e.target.checked)}
           id="wrapLines"
@@ -342,6 +357,9 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="tripleQuotes"
           label={tripleQuotes ? ON_LABEL : OFF_LABEL}
+          aria-label={i18n.translate('console.settingsPage.tripleQuotesAriaLabel', {
+            defaultMessage: 'Triple quotes in output',
+          })}
           checked={tripleQuotes}
           onChange={(e) => setTripleQuotes(e.target.checked)}
           id="tripleQuotes"
@@ -359,6 +377,7 @@ export const SettingsEditor = (props: Props) => {
           <EuiSwitch
             data-test-subj={`autocomplete-settings-${opts.id}`}
             label={opts.checked ? ON_LABEL : OFF_LABEL}
+            aria-label={opts.label}
             checked={opts.checked}
             onChange={(e) => opts.stateSetter(e.target.checked)}
           />

From 74a5be5fdcb5504f7887bcb0a289dfd755ed7644 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Apr 2026 08:48:46 +0000
Subject: [PATCH 3/6] Use aria-labelledby and showLabel={false} on switches
 instead of aria-label

Per review feedback: add id to SettingsFormRow labels and use
aria-labelledby on EuiSwitch/EuiFieldNumber to reference the visible
label. Set showLabel={false} and remove label prop on all switches.
Remove unused ON_LABEL/OFF_LABEL constants.

Agent-Logs-Url: https://github.com/elastic/kibana/sessions/15cf4601-88f1-4dde-b0ad-143613bdc7ed

Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
---
 .../components/settings/settings_editor.tsx   | 54 +++++++++----------
 .../components/settings/settings_form_row.tsx |  7 ++-
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
index 35890dbd637b9..d3ee51cfcd75a 100644
--- a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
+++ b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
@@ -36,8 +36,6 @@ const styles = {
 };
 
 const DEBOUNCE_DELAY = 500;
-const ON_LABEL = i18n.translate('console.settingsPage.onLabel', { defaultMessage: 'On' });
-const OFF_LABEL = i18n.translate('console.settingsPage.offLabel', { defaultMessage: 'Off' });
 
 const onceTimeInterval = () =>
   i18n.translate('console.settingsPage.refreshInterval.onceTimeInterval', {
@@ -241,45 +239,45 @@ export const SettingsEditor = (props: Props) => {
         })}
       />
       <SettingsFormRow
+        id="saveRequestsToHistory-label"
         label={i18n.translate('console.settingsPage.saveRequestsToHistoryLabel', {
           defaultMessage: 'Save requests to history',
         })}
       >
         <EuiSwitch
           checked={isHistoryEnabled}
-          label={isHistoryEnabled ? ON_LABEL : OFF_LABEL}
-          aria-label={i18n.translate('console.settingsPage.saveRequestsToHistoryAriaLabel', {
-            defaultMessage: 'Save requests to history',
-          })}
+          showLabel={false}
+          label=""
+          aria-labelledby="saveRequestsToHistory-label"
           onChange={(e) => toggleSavingToHistory(e.target.checked)}
         />
       </SettingsFormRow>
       <SettingsFormRow
+        id="keyboardShortcuts-label"
         label={i18n.translate('console.settingsPage.enableKeyboardShortcutsLabel', {
           defaultMessage: 'Keyboard shortcuts',
         })}
       >
         <EuiSwitch
           data-test-subj="enableKeyboardShortcuts"
-          label={isKeyboardShortcutsEnabled ? ON_LABEL : OFF_LABEL}
-          aria-label={i18n.translate('console.settingsPage.enableKeyboardShortcutsAriaLabel', {
-            defaultMessage: 'Keyboard shortcuts',
-          })}
+          showLabel={false}
+          label=""
+          aria-labelledby="keyboardShortcuts-label"
           checked={isKeyboardShortcutsEnabled}
           onChange={(e) => toggleKeyboardShortcuts(e.target.checked)}
         />
       </SettingsFormRow>
       <SettingsFormRow
+        id="accessibilityOverlay-label"
         label={i18n.translate('console.settingsPage.enableAccessibilityOverlayLabel', {
           defaultMessage: 'Accessibility overlay',
         })}
       >
         <EuiSwitch
           data-test-subj="enableA11yOverlay"
-          label={isAccessibilityOverlayEnabled ? ON_LABEL : OFF_LABEL}
-          aria-label={i18n.translate('console.settingsPage.enableAccessibilityOverlayAriaLabel', {
-            defaultMessage: 'Accessibility overlay',
-          })}
+          showLabel={false}
+          label=""
+          aria-labelledby="accessibilityOverlay-label"
           checked={isAccessibilityOverlayEnabled}
           onChange={(e) => toggleAccessibilityOverlay(e.target.checked)}
         />
@@ -312,6 +310,7 @@ export const SettingsEditor = (props: Props) => {
         })}
       />
       <SettingsFormRow
+        id="fontSize-label"
         label={i18n.translate('console.settingsPage.fontSizeLabel', {
           defaultMessage: 'Font size',
         })}
@@ -320,9 +319,7 @@ export const SettingsEditor = (props: Props) => {
           css={styles.minWidthControl}
           compressed
           data-test-subj="setting-font-size-input"
-          aria-label={i18n.translate('console.settingsPage.fontSizeAriaLabel', {
-            defaultMessage: 'Font size',
-          })}
+          aria-labelledby="fontSize-label"
           value={fontSize}
           min={6}
           max={50}
@@ -334,32 +331,32 @@ export const SettingsEditor = (props: Props) => {
         />
       </SettingsFormRow>
       <SettingsFormRow
+        id="wrapLongLines-label"
         label={i18n.translate('console.settingsPage.wrapLongLinesLabel', {
           defaultMessage: 'Wrap long lines',
         })}
       >
         <EuiSwitch
           data-test-subj="settingsWrapLines"
-          label={wrapMode ? ON_LABEL : OFF_LABEL}
-          aria-label={i18n.translate('console.settingsPage.wrapLongLinesAriaLabel', {
-            defaultMessage: 'Wrap long lines',
-          })}
+          showLabel={false}
+          label=""
+          aria-labelledby="wrapLongLines-label"
           checked={wrapMode}
           onChange={(e) => setWrapMode(e.target.checked)}
           id="wrapLines"
         />
       </SettingsFormRow>
       <SettingsFormRow
+        id="tripleQuotes-label"
         label={i18n.translate('console.settingsPage.tripleQuotesMessage', {
           defaultMessage: 'Triple quotes in output',
         })}
       >
         <EuiSwitch
           data-test-subj="tripleQuotes"
-          label={tripleQuotes ? ON_LABEL : OFF_LABEL}
-          aria-label={i18n.translate('console.settingsPage.tripleQuotesAriaLabel', {
-            defaultMessage: 'Triple quotes in output',
-          })}
+          showLabel={false}
+          label=""
+          aria-labelledby="tripleQuotes-label"
           checked={tripleQuotes}
           onChange={(e) => setTripleQuotes(e.target.checked)}
           id="tripleQuotes"
@@ -373,11 +370,12 @@ export const SettingsEditor = (props: Props) => {
         })}
       />
       {autoCompleteCheckboxes.map((opts) => (
-        <SettingsFormRow key={opts.id} label={opts.label}>
+        <SettingsFormRow key={opts.id} id={`autocomplete-${opts.id}-label`} label={opts.label}>
           <EuiSwitch
             data-test-subj={`autocomplete-settings-${opts.id}`}
-            label={opts.checked ? ON_LABEL : OFF_LABEL}
-            aria-label={opts.label}
+            showLabel={false}
+            label=""
+            aria-labelledby={`autocomplete-${opts.id}-label`}
             checked={opts.checked}
             onChange={(e) => opts.stateSetter(e.target.checked)}
           />
diff --git a/src/platform/plugins/shared/console/public/application/components/settings/settings_form_row.tsx b/src/platform/plugins/shared/console/public/application/components/settings/settings_form_row.tsx
index 383eabfb93bd2..0ee3937aada12 100644
--- a/src/platform/plugins/shared/console/public/application/components/settings/settings_form_row.tsx
+++ b/src/platform/plugins/shared/console/public/application/components/settings/settings_form_row.tsx
@@ -12,17 +12,20 @@ import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
 export interface DevToolsSettingsModalProps {
+  id?: string;
   label: string;
   children: React.ReactNode;
 }
 
-export const SettingsFormRow = ({ label, children }: DevToolsSettingsModalProps) => {
+export const SettingsFormRow = ({ id, label, children }: DevToolsSettingsModalProps) => {
   return (
     <EuiFormRow fullWidth>
       <EuiFlexGroup alignItems="center" responsive={false}>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
-            <EuiFlexItem grow={false}>{label}</EuiFlexItem>
+            <EuiFlexItem id={id} grow={false}>
+              {label}
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
 

From 4c8b5b1247427f879bcc50e9a579d0677e82a7b5 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Fri, 24 Apr 2026 12:31:40 +0300
Subject: [PATCH 4/6] cleanup

---
 .../application/components/settings/settings_editor.tsx     | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
index d3ee51cfcd75a..d640d626ed004 100644
--- a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
+++ b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
@@ -247,7 +247,6 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           checked={isHistoryEnabled}
           showLabel={false}
-          label=""
           aria-labelledby="saveRequestsToHistory-label"
           onChange={(e) => toggleSavingToHistory(e.target.checked)}
         />
@@ -261,7 +260,6 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="enableKeyboardShortcuts"
           showLabel={false}
-          label=""
           aria-labelledby="keyboardShortcuts-label"
           checked={isKeyboardShortcutsEnabled}
           onChange={(e) => toggleKeyboardShortcuts(e.target.checked)}
@@ -276,7 +274,6 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="enableA11yOverlay"
           showLabel={false}
-          label=""
           aria-labelledby="accessibilityOverlay-label"
           checked={isAccessibilityOverlayEnabled}
           onChange={(e) => toggleAccessibilityOverlay(e.target.checked)}
@@ -339,7 +336,6 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="settingsWrapLines"
           showLabel={false}
-          label=""
           aria-labelledby="wrapLongLines-label"
           checked={wrapMode}
           onChange={(e) => setWrapMode(e.target.checked)}
@@ -355,7 +351,6 @@ export const SettingsEditor = (props: Props) => {
         <EuiSwitch
           data-test-subj="tripleQuotes"
           showLabel={false}
-          label=""
           aria-labelledby="tripleQuotes-label"
           checked={tripleQuotes}
           onChange={(e) => setTripleQuotes(e.target.checked)}
@@ -374,7 +369,6 @@ export const SettingsEditor = (props: Props) => {
           <EuiSwitch
             data-test-subj={`autocomplete-settings-${opts.id}`}
             showLabel={false}
-            label=""
             aria-labelledby={`autocomplete-${opts.id}-label`}
             checked={opts.checked}
             onChange={(e) => opts.stateSetter(e.target.checked)}

From c4c8e01bd86ab8d320a343885e9b6c88b954fd96 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Fri, 24 Apr 2026 13:41:05 +0300
Subject: [PATCH 5/6] cleanup translations

---
 .../plugins/private/translations/translations/de-DE.json        | 2 --
 .../plugins/private/translations/translations/fr-FR.json        | 2 --
 .../plugins/private/translations/translations/ja-JP.json        | 2 --
 .../plugins/private/translations/translations/zh-CN.json        | 2 --
 4 files changed, 8 deletions(-)

diff --git a/x-pack/platform/plugins/private/translations/translations/de-DE.json b/x-pack/platform/plugins/private/translations/translations/de-DE.json
index 6eea3a7ef2503..6f9f9e3dc182a 100644
--- a/x-pack/platform/plugins/private/translations/translations/de-DE.json
+++ b/x-pack/platform/plugins/private/translations/translations/de-DE.json
@@ -516,8 +516,6 @@
     "console.settingsPage.generalSettingsLabel": "Allgemeine Einstellungen",
     "console.settingsPage.indicesAndAliasesLabelText": "Indizes und Aliasse",
     "console.settingsPage.manualRefreshLabel": "Vorschläge zur Autovervollständigung manuell aktualisieren",
-    "console.settingsPage.offLabel": "Aus",
-    "console.settingsPage.onLabel": "An",
     "console.settingsPage.pageDescription": "Passen Sie die Konsole an Ihren Workflow an.",
     "console.settingsPage.pageTitle": "Konsoleinstellungen",
     "console.settingsPage.refreshButtonLabel": "Aktualisieren",
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
index 651c8d393ac43..386b91ebb930a 100644
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -514,8 +514,6 @@
     "console.settingsPage.generalSettingsLabel": "Paramètres généraux",
     "console.settingsPage.indicesAndAliasesLabelText": "Index et alias",
     "console.settingsPage.manualRefreshLabel": "Actualiser manuellement les suggestions de saisie semi-automatique",
-    "console.settingsPage.offLabel": "Désactivé",
-    "console.settingsPage.onLabel": "Activé",
     "console.settingsPage.pageDescription": "Personnalisez la console en fonction de votre workflow.",
     "console.settingsPage.pageTitle": "Paramètres de la console",
     "console.settingsPage.refreshButtonLabel": "Actualiser",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
index 62e5cc00287d0..563dc417f8f80 100644
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -516,8 +516,6 @@
     "console.settingsPage.generalSettingsLabel": "一般設定",
     "console.settingsPage.indicesAndAliasesLabelText": "インデックスとエイリアス",
     "console.settingsPage.manualRefreshLabel": "自動入力候補を手動で更新",
-    "console.settingsPage.offLabel": "オフ",
-    "console.settingsPage.onLabel": "オン",
     "console.settingsPage.pageDescription": "ワークフローに合わせてコンソールをカスタマイズします。",
     "console.settingsPage.pageTitle": "コンソール設定",
     "console.settingsPage.refreshButtonLabel": "更新",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
index f5b8a22eb0048..0f41727da4ff1 100644
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -516,8 +516,6 @@
     "console.settingsPage.generalSettingsLabel": "常规设置",
     "console.settingsPage.indicesAndAliasesLabelText": "索引和别名",
     "console.settingsPage.manualRefreshLabel": "手动刷新自动完成建议",
-    "console.settingsPage.offLabel": "关闭",
-    "console.settingsPage.onLabel": "开启",
     "console.settingsPage.pageDescription": "定制 Console 以适合您的工作流。",
     "console.settingsPage.pageTitle": "控制台设置",
     "console.settingsPage.refreshButtonLabel": "刷新",

From a5bf785ea243d4eedb6ae9be2614cff7c3de1908 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Fri, 24 Apr 2026 13:45:35 +0300
Subject: [PATCH 6/6] clenaup

---
 .../application/components/settings/settings_editor.tsx     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
index d640d626ed004..5befa40c34334 100644
--- a/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
+++ b/src/platform/plugins/shared/console/public/application/components/settings/settings_editor.tsx
@@ -246,6 +246,7 @@ export const SettingsEditor = (props: Props) => {
       >
         <EuiSwitch
           checked={isHistoryEnabled}
+          label=""
           showLabel={false}
           aria-labelledby="saveRequestsToHistory-label"
           onChange={(e) => toggleSavingToHistory(e.target.checked)}
@@ -259,6 +260,7 @@ export const SettingsEditor = (props: Props) => {
       >
         <EuiSwitch
           data-test-subj="enableKeyboardShortcuts"
+          label=""
           showLabel={false}
           aria-labelledby="keyboardShortcuts-label"
           checked={isKeyboardShortcutsEnabled}
@@ -273,6 +275,7 @@ export const SettingsEditor = (props: Props) => {
       >
         <EuiSwitch
           data-test-subj="enableA11yOverlay"
+          label=""
           showLabel={false}
           aria-labelledby="accessibilityOverlay-label"
           checked={isAccessibilityOverlayEnabled}
@@ -335,6 +338,7 @@ export const SettingsEditor = (props: Props) => {
       >
         <EuiSwitch
           data-test-subj="settingsWrapLines"
+          label=""
           showLabel={false}
           aria-labelledby="wrapLongLines-label"
           checked={wrapMode}
@@ -350,6 +354,7 @@ export const SettingsEditor = (props: Props) => {
       >
         <EuiSwitch
           data-test-subj="tripleQuotes"
+          label=""
           showLabel={false}
           aria-labelledby="tripleQuotes-label"
           checked={tripleQuotes}
@@ -367,6 +372,7 @@ export const SettingsEditor = (props: Props) => {
       {autoCompleteCheckboxes.map((opts) => (
         <SettingsFormRow key={opts.id} id={`autocomplete-${opts.id}-label`} label={opts.label}>
           <EuiSwitch
+            label=""
             data-test-subj={`autocomplete-settings-${opts.id}`}
             showLabel={false}
             aria-labelledby={`autocomplete-${opts.id}-label`}