mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[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:
parent
fe4bf85f5a
commit
8cf8c7efa9
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