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

fix: improve accessibility in CardHorizontalBarChart and InfoTooltip … #4191

Open
wants to merge 2 commits into
base: beta
Choose a base branch
from

Conversation

mohammedfirdouss
Copy link

Description

This PR fixes accessibility issues in the CardHorizontalBarChart and InfoTooltip components. It addresses the jsx-a11y/mouse-events-have-key-events warnings and improves keyboard navigation support.

Related Tickets & Documents

Fixes #4133

Mobile & Desktop Screenshots/Recordings

N/A (No visual changes, only accessibility improvements)

Steps to QA

Testing CardHorizontalBarChart Accessibility

  • Check Screen Reader Compatibility:

    • Verify that each language bar includes the sr-only span for screen reader descriptions.
  • Keyboard Navigation:

    • Use Tab to focus on each language bar and ensure it announces the language and percentage information.

Testing InfoTooltip Accessibility

  • Mouse and Keyboard Accessibility:
    • Hover over the icon (or trigger button) and ensure the tooltip displays as expected.

Tier (staff will fill in)

  • Tier 1
  • Tier 2
  • Tier 3
  • Tier 4

[optional] What gif best describes this PR or how it makes you feel?

Accessibility

Copy link

netlify bot commented Nov 12, 2024

👷 Deploy request for oss-insights pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit bcce98d

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

  • npm-shrinkwrap.json
  • package.json

Copy link

netlify bot commented Nov 12, 2024

Deploy Preview for design-insights failed. Why did it fail? →

Name Link
🔨 Latest commit bcce98d
🔍 Latest deploy log https://app.netlify.com/sites/design-insights/deploys/6733de82ddd6c600082ff950

@mohammedfirdouss
Copy link
Author

@nickytonline Here is the updated PR with the requested adjustments and fewer changes as discussed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

enhancement: a11y rule "mouse-events-have-key-events" fails with a warning.
1 participant