Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ML] [aria-allowed-attr]: Ensures ARIA attributes are allowed for an element's role on ML notifications button #153592

Closed
bhavyarm opened this issue Mar 23, 2023 · 2 comments · Fixed by #153876
Closed

[ML] [aria-allowed-attr]: Ensures ARIA attributes are allowed for an element's role on ML notifications button #153592

bhavyarm opened this issue Mar 23, 2023 · 2 comments · Fixed by #153876
Assignees
@peteharverson
Labels
bug Fixes for quality problems that affect the customer experience :ml Project:Accessibility v8.8.0

Comments

@bhavyarm
Copy link
Contributor

Kibana version: Main

Browser version: chrome latest

Browser OS version: OS X

Describe the bug: ML notifications button is violating "Ensures ARIA attributes are allowed for an element's role" validation rule.

Screen Shot 2023-03-23 at 3 06 24 PM

a11y error trace:

ml Accessibility for user with full ML access with data loaded anomaly detection create advanced job open wizard

Failures in tracked branches: 0

Buildkite Job
https://buildkite.com/elastic/kibana-pull-request/builds/114819#01870b39-92e0-4b01-ad60-85338a068613

Error: a11y report:

VIOLATION
[aria-allowed-attr]: Ensures ARIA attributes are allowed for an element's role
Impact: serious
Help: https://dequeuniversity.com/rules/axe/4.6/aria-allowed-attr?application=axeAPI
Elements:
-


at AccessibilityService.assertValidAxeReport (a11y.ts:75:13)
at AccessibilityService.testAppSnapshot (a11y.ts:48:10)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at Context. (ml.ts:400:11)
at Object.apply (wrap_function.js:73:16)
@bhavyarm bhavyarm added bug Fixes for quality problems that affect the customer experience Project:Accessibility :ml labels Mar 23, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@elasticmachine
Copy link
Contributor

Pinging @elastic/ml-ui (:ml)

@bhavyarm bhavyarm mentioned this issue Mar 23, 2023
Merged
@peteharverson peteharverson changed the title [ML] VIOLATION │ [aria-allowed-attr]: Ensures ARIA attributes are allowed for an element's role on ML notifications button [ML] [aria-allowed-attr]: Ensures ARIA attributes are allowed for an element's role on ML notifications button Mar 24, 2023
@1Copenut 1Copenut mentioned this issue Mar 27, 2023
Open
77 tasks
@peteharverson peteharverson self-assigned this Mar 28, 2023
@peteharverson peteharverson mentioned this issue Mar 28, 2023
Merged
1 task
peteharverson added a commit that referenced this issue Mar 28, 2023
@peteharverson @kibanamachine
[ML] Fix accessibility warnings in notifications and memory usage cha…
67a5d06 
…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]>
@bhavyarm bhavyarm mentioned this issue Mar 29, 2023
Closed
@bhavyarm bhavyarm mentioned this issue Jun 21, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@peteharverson peteharverson

Labels
bug Fixes for quality problems that affect the customer experience :ml Project:Accessibility v8.8.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[ML] Fix accessibility warnings in notifications and memory usage chart peteharverson/kibana
3 participants
@bhavyarm @peteharverson @elasticmachine