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.

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

Ensures ARIA attributes are allowed for an element's role violation on global loading indicator #153597

Closed
bhavyarm opened this issue Mar 23, 2023 · 5 comments · Fixed by #166391
Assignees
Labels
bug Fixes for quality problems that affect the customer experience Project:Accessibility Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)

Comments

@bhavyarm
Copy link
Contributor

Kibana version: main

Browser version: chrome latest

Browser OS version: OS X

Describe the bug: Dashboard full screen a11y test is failing because of the way we are using globalLoadingIndicator is violating the rule "Ensures ARIA attributes are allowed for an element's role"

Accessibility Tests
test/accessibility/apps/dashboard.ts

Buildkite Job
https://buildkite.com/elastic/kibana-pull-request/builds/115148#01870fc1-8e11-4537-b8c8-2456c4c14caf

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. (dashboard.ts:112:7)
at Object.apply (wrap_function.js:73:16)

\

dashboard

@bhavyarm bhavyarm added bug Fixes for quality problems that affect the customer experience Project:Accessibility Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas labels Mar 23, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@elasticmachine
Copy link
Contributor

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

@Heenawter
Copy link
Contributor

Tagging @elastic/appex-sharedux, since they own the LoadingIndicator component - looking into it, and it seems like the EuiProgress bar doesn't expect to have an aria-label attribute. Tested this on the EUI docs by adding an aria-label to the top example here and ran an Axe scan - before adding it, there were zero Axe failures; after, there was one:

image

@Heenawter Heenawter added Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) and removed Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas labels Mar 23, 2023
@1Copenut
Copy link
Contributor

@Heenawter Thank you for testing this and following up with a screenshot. Adding an aria-label to the indeterminate progress bar throws because of the DIV generic role.

For the moment, you could remove the aria-label and aria-hidden="false" declarations to pass the validation, or if you have a max and value data you could pass in as props, treat it as a progress with values.

I think there's an opportunity to improve our default experience for assistive technology, but will take some research into the history and UX thinking.

@bhavyarm
Copy link
Contributor Author

Thanks for the investigation Hannah <3 @Heenawter

@rshen91 rshen91 self-assigned this Sep 13, 2023
rshen91 added a commit that referenced this issue Sep 28, 2023
## Summary

Closes #153597
In full screen, the loading indicator fails a11y tests. By removing the
aria-label and aria-hidden attributes, this allows the validation to
pass.
#153597 (comment)

This PR also introduces optional props for max and value props on the
`EuiProgress` component to provide consumers of the component greater
ability to define how the component is being used.
[Information](https://eui.elastic.co/#/display/progress#progress-with-values)
on the max and value props can be found in the [EUI
docs](https://eui.elastic.co/#/display/progress#progress-with-values).

---------

Co-authored-by: kibanamachine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Project:Accessibility Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants