Skip to content

Commit

Permalink
[ML] Fix accessibility warnings in notifications and memory usage cha…
Browse files Browse the repository at this point in the history
…rt (#153876)

## Summary

Fixes a couple of accessibility warnings - one for the unread
notifications indicator in the sidebar nav, and one on the indicator for
the maximum memory for ML native process on the memory usage chart.

#### Unread notifications indicator
Fix adds a `role` attribute which is needed when `aria-label` is used on
a `<div>`.
<img width="194" alt="image"
src="https://user-images.githubusercontent.com/7405507/228281236-0aeebb3c-8726-42ed-895f-88f2d614dc7b.png">

#### Memory usage chart
Fix adds an `aria-label` attribute to the max memory `EuiIcon` which is
rendered as a `button`.
<img width="437" alt="image"
src="https://user-images.githubusercontent.com/7405507/228281304-b42e7dcf-ecc2-45e3-8b08-a8ab43ff5f02.png">


### Checklist

- [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))

Fixes #153592
Fixes #153596

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
peteharverson and kibanamachine authored Mar 28, 2023
1 parent 6907882 commit 67a5d06
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export const NotificationsIndicator: FC = () => {
<EuiHealth
css={{ display: 'block' }}
color="primary"
role="img"
aria-label={i18n.translate('xpack.ml.notificationsIndicator.unreadIcon', {
defaultMessage: 'Unread notifications indicator.',
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,15 @@ export const MemoryPreviewChart: FC<MemoryPreviewChartProps> = ({ memoryOverview
}),
},
]}
marker={<EuiIcon type="arrowDown" />}
marker={
<EuiIcon
type="arrowDown"
aria-label={i18n.translate('xpack.ml.trainedModels.nodesList.mlMaxMemoryAriaLabel', {
defaultMessage: 'Maximum memory permitted for ML native processes {bytes}',
values: { bytes: bytesFormatter(memoryOverview.ml_max_in_bytes) },
})}
/>
}
markerPosition={Position.Top}
/>

Expand Down

0 comments on commit 67a5d06

Please sign in to comment.