From 20dd7f1bbe61e6263476228d2225d68871849e25 Mon Sep 17 00:00:00 2001 From: Sander Philipse <94373878+sphilipse@users.noreply.github.com> Date: Wed, 13 Nov 2024 16:38:05 +0100 Subject: [PATCH] [Index Mgmt] Improve accessibility of templates table (#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)) --- .../components/template_content_indicator.tsx | 63 +++++++++++++------ .../translations/translations/fr-FR.json | 3 - .../translations/translations/ja-JP.json | 3 - .../translations/translations/zh-CN.json | 3 - 4 files changed, 44 insertions(+), 28 deletions(-) diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx index 7ccc4971ef97c..c2df923018a39 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx @@ -16,17 +16,7 @@ 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, @@ -34,28 +24,63 @@ export const TemplateContentIndicator = ({ 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 ( <> - + <> - M + + M +   - + <> - S + + S +   - - A + + + A + ); diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 5ccbe70bd8fe1..4339c2fb0310c 100644 --- 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 index 8aadc59451b36..b4c96ee85f3d1 100644 --- 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 index 6bb17f1a2bdaa..661a37969e6a5 100644 --- 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": "别名",