Skip to content

Commit

Permalink
[8.x] [Index Mgmt] Improve accessibility of templates table (elastic#…
Browse files Browse the repository at this point in the history
…199980) (elastic#200031)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Index Mgmt] Improve accessibility of templates table
(elastic#199980)](elastic#199980)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Sander
Philipse","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-13T15:38:05Z","message":"[Index
Mgmt] Improve accessibility of templates table (elastic#199980)\n\n##
Summary\r\n\r\nThis improves the accessibility and understandability of
the content\r\ncolumn in the index templates page by:\r\n1) Improving
the tooltip text to be explicit about whether something is\r\npresent or
not\r\n2) Adding an aria-label with the same content, as tooltips are
not\r\nkeyboard accessible\r\n\r\n\r\n### Checklist\r\n\r\nDelete any
items that are not applicable to this PR.\r\n\r\n- [x] Any text added
follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))","sha":"20dd7f1bbe61e6263476228d2225d68871849e25","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Index
Management","release_note:skip","v9.0.0","v8.16.0","backport:version","v8.17.0","v8.18.0"],"title":"[Index
Mgmt] Improve accessibility of templates
table","number":199980,"url":"https://github.com/elastic/kibana/pull/199980","mergeCommit":{"message":"[Index
Mgmt] Improve accessibility of templates table (elastic#199980)\n\n##
Summary\r\n\r\nThis improves the accessibility and understandability of
the content\r\ncolumn in the index templates page by:\r\n1) Improving
the tooltip text to be explicit about whether something is\r\npresent or
not\r\n2) Adding an aria-label with the same content, as tooltips are
not\r\nkeyboard accessible\r\n\r\n\r\n### Checklist\r\n\r\nDelete any
items that are not applicable to this PR.\r\n\r\n- [x] Any text added
follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))","sha":"20dd7f1bbe61e6263476228d2225d68871849e25"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x","8.18"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199980","number":199980,"mergeCommit":{"message":"[Index
Mgmt] Improve accessibility of templates table (elastic#199980)\n\n##
Summary\r\n\r\nThis improves the accessibility and understandability of
the content\r\ncolumn in the index templates page by:\r\n1) Improving
the tooltip text to be explicit about whether something is\r\npresent or
not\r\n2) Adding an aria-label with the same content, as tooltips are
not\r\nkeyboard accessible\r\n\r\n\r\n### Checklist\r\n\r\nDelete any
items that are not applicable to this PR.\r\n\r\n- [x] Any text added
follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))","sha":"20dd7f1bbe61e6263476228d2225d68871849e25"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Sander Philipse <[email protected]>
  • Loading branch information
kibanamachine and sphilipse authored Nov 13, 2024
1 parent b1137a0 commit ecae27e
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down
3 changes: 0 additions & 3 deletions x-pack/plugins/translations/translations/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -23539,9 +23539,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",
Expand Down
3 changes: 0 additions & 3 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -23510,9 +23510,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": "エイリアス",
Expand Down
3 changes: 0 additions & 3 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -23563,9 +23563,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": "别名",
Expand Down

0 comments on commit ecae27e

Please sign in to comment.