[Index Mgmt] Improve accessibility of templates table (elastic#199980)

## Summary This improves the accessibility and understandability of the content column in the index templates page by: 1) Improving the tooltip text to be explicit about whether something is present or not 2) Adding an aria-label with the same content, as tooltips are not keyboard accessible ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
tsullivan · Nov 13, 2024 · 20dd7f1 · 20dd7f1
1 parent 4ba25f2
commit 20dd7f1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 28 deletions.
diff --git a/...management/public/application/components/shared/components/template_content_indicator.tsx b/...management/public/application/components/shared/components/template_content_indicator.tsx
@@ -16,46 +16,71 @@ interface Props {
   contentWhenEmpty?: JSX.Element | null;
 }
 
-const texts = {
-  settings: i18n.translate('xpack.idxMgmt.templateContentIndicator.indexSettingsTooltipLabel', {
-    defaultMessage: 'Index settings',
-  }),
-  mappings: i18n.translate('xpack.idxMgmt.templateContentIndicator.mappingsTooltipLabel', {
-    defaultMessage: 'Mappings',
-  }),
-  aliases: i18n.translate('xpack.idxMgmt.templateContentIndicator.aliasesTooltipLabel', {
-    defaultMessage: 'Aliases',
-  }),
-};
+const getColor = (flag: boolean) => (flag ? 'primary' : 'hollow');
 
 export const TemplateContentIndicator = ({
   mappings,
   settings,
   aliases,
   contentWhenEmpty = null,
 }: Props) => {
-  const getColor = (flag: boolean) => (flag ? 'primary' : 'hollow');
-
   if (!mappings && !settings && !aliases) {
     return contentWhenEmpty;
   }
 
+  const texts = {
+    settingsTrue: i18n.translate('xpack.idxMgmt.templateContentIndicator.indexSettingsTrueLabel', {
+      defaultMessage: 'This template contains index settings',
+    }),
+    settingsFalse: i18n.translate(
+      'xpack.idxMgmt.templateContentIndicator.indexSettingsFalseLabel',
+      {
+        defaultMessage: 'This template does not contain index settings',
+      }
+    ),
+    mappingsTrue: i18n.translate('xpack.idxMgmt.templateContentIndicator.indexMappingsTrueLabel', {
+      defaultMessage: 'This template contains index mappings',
+    }),
+    mappingsFalse: i18n.translate(
+      'xpack.idxMgmt.templateContentIndicator.indexMappingsFalseLabel',
+      {
+        defaultMessage: 'This template does not contain index mappings',
+      }
+    ),
+    aliasesTrue: i18n.translate('xpack.idxMgmt.templateContentIndicator.indexAliasesTrueLabel', {
+      defaultMessage: 'This template contains index aliases',
+    }),
+    aliasesFalse: i18n.translate('xpack.idxMgmt.templateContentIndicator.indexAliasesFalseLabel', {
+      defaultMessage: 'This template does not contain index aliases',
+    }),
+  };
+
+  const mappingsText = mappings ? texts.mappingsTrue : texts.mappingsFalse;
+  const settingsText = settings ? texts.settingsTrue : texts.settingsFalse;
+  const aliasesText = aliases ? texts.aliasesTrue : texts.aliasesFalse;
+
   return (
     <>
-      <EuiToolTip content={texts.mappings}>
+      <EuiToolTip content={mappingsText}>
         <>
-          <EuiBadge color={getColor(mappings)}>M</EuiBadge>
+          <EuiBadge color={getColor(mappings)} aria-label={mappingsText}>
+            M
+          </EuiBadge>
           &nbsp;
         </>
       </EuiToolTip>
-      <EuiToolTip content={texts.settings}>
+      <EuiToolTip content={settingsText}>
         <>
-          <EuiBadge color={getColor(settings)}>S</EuiBadge>
+          <EuiBadge color={getColor(settings)} aria-label={settingsText}>
+            S
+          </EuiBadge>
           &nbsp;
         </>
       </EuiToolTip>
-      <EuiToolTip content={texts.aliases}>
-        <EuiBadge color={getColor(aliases)}>A</EuiBadge>
+      <EuiToolTip content={aliasesText}>
+        <EuiBadge color={getColor(aliases)} aria-label={aliasesText}>
+          A
+        </EuiBadge>
       </EuiToolTip>
     </>
   );

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -23492,9 +23492,6 @@
     "xpack.idxMgmt.templateBadgeType.cloudManaged": "Géré dans le cloud",
     "xpack.idxMgmt.templateBadgeType.managed": "Géré",
     "xpack.idxMgmt.templateBadgeType.system": "Système",
-    "xpack.idxMgmt.templateContentIndicator.aliasesTooltipLabel": "Alias",
-    "xpack.idxMgmt.templateContentIndicator.indexSettingsTooltipLabel": "Paramètres des index",
-    "xpack.idxMgmt.templateContentIndicator.mappingsTooltipLabel": "Mappings",
     "xpack.idxMgmt.templateCreate.loadingTemplateToCloneDescription": "Chargement du modèle à cloner en cours…",
     "xpack.idxMgmt.templateCreate.loadingTemplateToCloneErrorMessage": "Erreur lors du chargement du modèle à cloner",
     "xpack.idxMgmt.templateDetails.aliasesTabTitle": "Alias",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -23464,9 +23464,6 @@
     "xpack.idxMgmt.templateBadgeType.cloudManaged": "クラウド管理",
     "xpack.idxMgmt.templateBadgeType.managed": "管理中",
     "xpack.idxMgmt.templateBadgeType.system": "システム",
-    "xpack.idxMgmt.templateContentIndicator.aliasesTooltipLabel": "エイリアス",
-    "xpack.idxMgmt.templateContentIndicator.indexSettingsTooltipLabel": "インデックス設定",
-    "xpack.idxMgmt.templateContentIndicator.mappingsTooltipLabel": "マッピング",
     "xpack.idxMgmt.templateCreate.loadingTemplateToCloneDescription": "クローンを作成するテンプレートを読み込み中…",
     "xpack.idxMgmt.templateCreate.loadingTemplateToCloneErrorMessage": "クローンを作成するテンプレートを読み込み中にエラーが発生",
     "xpack.idxMgmt.templateDetails.aliasesTabTitle": "エイリアス",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -23063,9 +23063,6 @@
     "xpack.idxMgmt.templateBadgeType.cloudManaged": "云托管",
     "xpack.idxMgmt.templateBadgeType.managed": "托管",
     "xpack.idxMgmt.templateBadgeType.system": "系统",
-    "xpack.idxMgmt.templateContentIndicator.aliasesTooltipLabel": "别名",
-    "xpack.idxMgmt.templateContentIndicator.indexSettingsTooltipLabel": "索引设置",
-    "xpack.idxMgmt.templateContentIndicator.mappingsTooltipLabel": "映射",
     "xpack.idxMgmt.templateCreate.loadingTemplateToCloneDescription": "正在加载要克隆的模板……",
     "xpack.idxMgmt.templateCreate.loadingTemplateToCloneErrorMessage": "加载要克隆的模板时出错",
     "xpack.idxMgmt.templateDetails.aliasesTabTitle": "别名",