mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
# Backport This will backport the following commits from `main` to `9.0`: - [[ObsUx][A11y] Improve abbreviations spell for screen readers (#216954)](https://github.com/elastic/kibana/pull/216954) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Miriam","email":"31922082+MiriamAparicio@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-03T12:59:55Z","message":"[ObsUx][A11y] Improve abbreviations spell for screen readers (#216954)\n\nCloses https://github.com/elastic/kibana/issues/194983 \nCloses https://github.com/elastic/kibana/issues/194982\n\n### What was done\n- Add aria-label for elements in the table (links, buttons)\n- Improve the spelling of some abbreviations for screen readers\n\n#### How to test\n- Use any screen reader in Infrastructure inventory table view, and\nhosts tables, navigate through the tables columns titles\n\n\nfbd27a0b-c052-45e6-bc98-e2446b97d4ea","sha":"8cf8c7efa93c2f089421dd9ec3775842bc817339","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-infra_services","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[ObsUx][A11y] Improve abbreviations spell for screen readers","number":216954,"url":"https://github.com/elastic/kibana/pull/216954","mergeCommit":{"message":"[ObsUx][A11y] Improve abbreviations spell for screen readers (#216954)\n\nCloses https://github.com/elastic/kibana/issues/194983 \nCloses https://github.com/elastic/kibana/issues/194982\n\n### What was done\n- Add aria-label for elements in the table (links, buttons)\n- Improve the spelling of some abbreviations for screen readers\n\n#### How to test\n- Use any screen reader in Infrastructure inventory table view, and\nhosts tables, navigate through the tables columns titles\n\n\nfbd27a0b-c052-45e6-bc98-e2446b97d4ea","sha":"8cf8c7efa93c2f089421dd9ec3775842bc817339"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216954","number":216954,"mergeCommit":{"message":"[ObsUx][A11y] Improve abbreviations spell for screen readers (#216954)\n\nCloses https://github.com/elastic/kibana/issues/194983 \nCloses https://github.com/elastic/kibana/issues/194982\n\n### What was done\n- Add aria-label for elements in the table (links, buttons)\n- Improve the spelling of some abbreviations for screen readers\n\n#### How to test\n- Use any screen reader in Infrastructure inventory table view, and\nhosts tables, navigate through the tables columns titles\n\n\nfbd27a0b-c052-45e6-bc98-e2446b97d4ea","sha":"8cf8c7efa93c2f089421dd9ec3775842bc817339"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
This commit is contained in:
Kibana Machine
GitHub
parent
7ce4926655
commit
599fe49bd4
3 changed files with 61 additions and 15 deletions
|
|
@ -45,7 +45,17 @@ export const EntryTitle = ({ onClick, title }: EntryTitleProps) => {
|
|||
},
|
||||
})}
|
||||
>
|
||||
<EuiLink data-test-subj="hostsViewTableEntryTitleLink" {...link}>
|
||||
<EuiLink
|
||||
data-test-subj="hostsViewTableEntryTitleLink"
|
||||
aria-label={i18n.translate(
|
||||
'xpack.infra.hostsViewPage.table.openHostDetailsLink.ariaLabel',
|
||||
{
|
||||
defaultMessage: 'Open host details {hostName}',
|
||||
values: { hostName: name },
|
||||
}
|
||||
)}
|
||||
{...link}
|
||||
>
|
||||
<EuiFlexGroup
|
||||
className="eui-textTruncate"
|
||||
alignItems="center"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import type {
|
|||
CriteriaWithPagination,
|
||||
EuiTableSelectionType,
|
||||
} from '@elastic/eui';
|
||||
import { EuiText, EuiLink } from '@elastic/eui';
|
||||
import { EuiText, EuiLink, EuiScreenReaderOnly } from '@elastic/eui';
|
||||
import createContainer from 'constate';
|
||||
import useAsync from 'react-use/lib/useAsync';
|
||||
import { isEqual } from 'lodash';
|
||||
|
|
@ -21,6 +21,7 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
|
|||
import { EuiToolTip } from '@elastic/eui';
|
||||
import { EuiBadge } from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { APM_HOST_TROUBLESHOOTING_LINK } from '../../../../components/asset_details/constants';
|
||||
import { Popover } from '../../../../components/asset_details/tabs/common/popover';
|
||||
import { HOST_NAME_FIELD } from '../../../../../common/constants';
|
||||
|
|
@ -446,11 +447,20 @@ export const useHostsTable = () => {
|
|||
},
|
||||
{
|
||||
name: (
|
||||
<ColumnHeader
|
||||
label={TABLE_COLUMN_LABEL.rx}
|
||||
toolTip={METRICS_TOOLTIP.rx}
|
||||
formula={formulas?.rx.value}
|
||||
/>
|
||||
<>
|
||||
<EuiScreenReaderOnly>
|
||||
<span>
|
||||
{i18n.translate('xpack.infra.hostsViewPage.table.rx.screenReaderOnlyLabel', {
|
||||
defaultMessage: 'Network Inbound',
|
||||
})}
|
||||
</span>
|
||||
</EuiScreenReaderOnly>
|
||||
<ColumnHeader
|
||||
label={TABLE_COLUMN_LABEL.rx}
|
||||
toolTip={METRICS_TOOLTIP.rx}
|
||||
formula={formulas?.rx.value}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
width: '12%',
|
||||
field: 'rxV2',
|
||||
|
|
@ -462,11 +472,20 @@ export const useHostsTable = () => {
|
|||
},
|
||||
{
|
||||
name: (
|
||||
<ColumnHeader
|
||||
label={TABLE_COLUMN_LABEL.tx}
|
||||
toolTip={METRICS_TOOLTIP.tx}
|
||||
formula={formulas?.tx.value}
|
||||
/>
|
||||
<>
|
||||
<EuiScreenReaderOnly>
|
||||
<span>
|
||||
{i18n.translate('xpack.infra.hostsViewPage.table.tx.screenReaderOnlyLabel', {
|
||||
defaultMessage: 'Network Outbound',
|
||||
})}
|
||||
</span>
|
||||
</EuiScreenReaderOnly>
|
||||
<ColumnHeader
|
||||
label={TABLE_COLUMN_LABEL.tx}
|
||||
toolTip={METRICS_TOOLTIP.tx}
|
||||
formula={formulas?.tx.value}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
width: '12%',
|
||||
field: 'txV2',
|
||||
|
|
|
|||
|
|
@ -80,6 +80,13 @@ export const TableView = (props: Props) => {
|
|||
const button = (
|
||||
<EuiToolTip content={tooltipText}>
|
||||
<EuiButtonEmpty
|
||||
aria-label={i18n.translate(
|
||||
'xpack.infra.tableView.columnName.openNodeDetailsButton.ariaLabel',
|
||||
{
|
||||
defaultMessage: 'Open host details {nodeName}',
|
||||
values: { nodeName: value },
|
||||
}
|
||||
)}
|
||||
data-test-subj="infraColumnsButton"
|
||||
onClick={() => toggleAssetPopover(uniqueID, item.node.id)}
|
||||
>
|
||||
|
|
@ -118,7 +125,17 @@ export const TableView = (props: Props) => {
|
|||
const handleClick = () => props.onFilter(`${grouping.field}:"${value}"`);
|
||||
return (
|
||||
<EuiToolTip content="Set Filter">
|
||||
<EuiButtonEmpty data-test-subj="infraColumnsButton" onClick={handleClick}>
|
||||
<EuiButtonEmpty
|
||||
aria-label={i18n.translate(
|
||||
'xpack.infra.tableView.groupByColumn.setFilterButton.ariaLabel',
|
||||
{
|
||||
defaultMessage: 'Set Filter {groupByName} to {value}',
|
||||
values: { groupByName: fieldToName((grouping && grouping.field) || ''), value },
|
||||
}
|
||||
)}
|
||||
data-test-subj="infraColumnsButton"
|
||||
onClick={handleClick}
|
||||
>
|
||||
{value}
|
||||
</EuiButtonEmpty>
|
||||
</EuiToolTip>
|
||||
|
|
@ -128,7 +145,7 @@ export const TableView = (props: Props) => {
|
|||
{
|
||||
field: 'value',
|
||||
name: i18n.translate('xpack.infra.tableView.columnName.last1m', {
|
||||
defaultMessage: 'Last 1m',
|
||||
defaultMessage: 'Last 1 min.',
|
||||
}),
|
||||
sortable: true,
|
||||
truncateText: true,
|
||||
|
|
@ -137,7 +154,7 @@ export const TableView = (props: Props) => {
|
|||
},
|
||||
{
|
||||
field: 'avg',
|
||||
name: i18n.translate('xpack.infra.tableView.columnName.avg', { defaultMessage: 'Avg' }),
|
||||
name: i18n.translate('xpack.infra.tableView.columnName.avg', { defaultMessage: 'Avg.' }),
|
||||
sortable: true,
|
||||
truncateText: true,
|
||||
dataType: 'number',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue