Add aria-labelledby to Console Config settings controls

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,36 +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}
+          label=""
+          showLabel={false}
+          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}
+          label=""
+          showLabel={false}
+          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}
+          label=""
+          showLabel={false}
+          aria-labelledby="accessibilityOverlay-label"
           checked={isAccessibilityOverlayEnabled}
           onChange={(e) => toggleAccessibilityOverlay(e.target.checked)}
         />
@@ -303,6 +310,7 @@ export const SettingsEditor = (props: Props) => {
         })}
       />
       <SettingsFormRow
+        id="fontSize-label"
         label={i18n.translate('console.settingsPage.fontSizeLabel', {
           defaultMessage: 'Font size',
         })}
@@ -311,6 +319,7 @@ export const SettingsEditor = (props: Props) => {
           css={styles.minWidthControl}
           compressed
           data-test-subj="setting-font-size-input"
+          aria-labelledby="fontSize-label"
           value={fontSize}
           min={6}
           max={50}
@@ -322,26 +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}
+          label=""
+          showLabel={false}
+          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}
+          label=""
+          showLabel={false}
+          aria-labelledby="tripleQuotes-label"
           checked={tripleQuotes}
           onChange={(e) => setTripleQuotes(e.target.checked)}
           id="tripleQuotes"
@@ -355,10 +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
+            label=""
             data-test-subj={`autocomplete-settings-${opts.id}`}
-            label={opts.checked ? ON_LABEL : OFF_LABEL}
+            showLabel={false}
+            aria-labelledby={`autocomplete-${opts.id}-label`}
             checked={opts.checked}
             onChange={(e) => opts.stateSetter(e.target.checked)}
           />

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>
 

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",

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",

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": "更新",

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": "刷新",