[ObsUx][A11y] Improve abbreviations spell for screen readers (#216954)

Closes https://github.com/elastic/kibana/issues/194983 
Closes https://github.com/elastic/kibana/issues/194982

### What was done
- Add aria-label for elements in the table (links, buttons)
- Improve the spelling of some abbreviations for screen readers

#### How to test
- Use any screen reader in Infrastructure inventory table view, and
hosts tables, navigate through the tables columns titles


https://github.com/user-attachments/assets/db800e7f-c062-43df-9dfc-87601beee487



https://github.com/user-attachments/assets/fbd27a0b-c052-45e6-bc98-e2446b97d4ea
This commit is contained in:
Miriam 2025-04-03 13:59:55 +01:00 committed by GitHub
parent fe4bf85f5a
commit 8cf8c7efa9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 61 additions and 15 deletions

View file

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

View file

@ -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',

View file

@ -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',