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

feat(aria): add role="img" to chart container element #20050

Merged
merged 3 commits into from
Jun 24, 2024

Conversation

ViniciusCestarii
Copy link
Contributor

@ViniciusCestarii ViniciusCestarii commented Jun 19, 2024

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

Add role="region" on div tag when aria option is true to allow the aria-label property on the div

Fixed issues

#20034

Details

Before: What was the problem?

When aria option was true it would add aria-label to a div tag without a role. aria-label should only be added to interactive elements so it would fail Accessibility tests like Lighthouse's.

image

After: How does it behave after the fixing?

Now with role="region" the aria-label is allowed on the element.

image

Document Info

One of the following should be checked.

  • This PR doesn't relate to document changes
  • The document should be updated later
  • The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

  • This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

  • Please squash the commits into a single one when merging.

Other information

Copy link

echarts-bot bot commented Jun 19, 2024

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

Copy link
Contributor

@Ovilia Ovilia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think 'img' should be a better value for role due to the definition.

The ARIA img role can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.

@ViniciusCestarii
Copy link
Contributor Author

I think 'img' should be a better value for role due to the definition.

I agree. I will review it.

@@ -154,6 +154,7 @@ export default function ariaVisual(ecModel: GlobalModel, api: ExtensionAPI) {
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move the code here before checking description, so that it doesn't need to be set in two different situations?

@Ovilia Ovilia added this to the 5.5.2 milestone Jun 24, 2024
Copy link
Contributor

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20050@64539fe

@Ovilia Ovilia merged commit 32eeb07 into apache:master Jun 24, 2024
2 checks passed
Copy link

echarts-bot bot commented Jun 24, 2024

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

@plainheart plainheart changed the title feat: add role region to div tag when aria: true feat(aria): add role="img" to chart container element Jun 25, 2024
@echarts-bot echarts-bot bot added PR: doc unchanged and removed PR: awaiting doc Document changes is required for this PR. labels Jun 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] aria: { show: true} generates invalid ARIA attribute on div
2 participants