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: Add keyboard support to CardHorizontalBarChart and InfoTooltip #4165

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

  1. Navigate to the CardHorizontalBarChart component using a keyboard
  2. Verify that you can focus on individual language bars using the Tab key
  3. Press Enter or Space on a focused bar to change the description text
  4. Navigate to a page containing the InfoTooltip component
  5. Verify that you can open and close the tooltip using both mouse and keyboard interactions

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 Oct 13, 2024

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

Name Link
🔨 Latest commit b249de8
🔍 Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/672642e27324a400083a3dc7

Copy link

netlify bot commented Oct 13, 2024

Deploy Preview for design-insights ready!

Name Link
🔨 Latest commit b249de8
🔍 Latest deploy log https://app.netlify.com/sites/design-insights/deploys/672642e2ae0a670008e4906f
😎 Deploy Preview https://deploy-preview-4165--design-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

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 Passed!

Copy link
Member

@nickytonline nickytonline left a comment

Choose a reason for hiding this comment

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

This is looking great @Firdous2307. Just a couple other things to remove and this is good to go. Thanks for your patience!

components/shared/InfoTooltip.tsx Outdated Show resolved Hide resolved
@nickytonline nickytonline mentioned this pull request Oct 21, 2024
4 tasks
@nickytonline
Copy link
Member

Hi @Firdous2307, just seeing if you're blocked on anything. No rush on this, just checking in.

@mohammedfirdouss
Copy link
Author

Hi @Firdous2307, just seeing if you're blocked on anything. No rush on this, just checking in.

@nickytonline Everything is good, I just took a little break, thanks for checking in.

.github/workflows/issue.yml Outdated Show resolved Hide resolved
.gitpod.yml Outdated Show resolved Hide resolved
@mohammedfirdouss mohammedfirdouss closed this by deleting the head repository Nov 12, 2024
@mohammedfirdouss
Copy link
Author

mohammedfirdouss commented Nov 12, 2024

@nickytonline I mistakenly closed the main repository, thinking the changes were already merged. Apologies for the inconvenience. I'll redo the necessary steps, which should be fewer now since we’ve already addressed the main point.

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.

enhancement: a11y rule "mouse-events-have-key-events" fails with a warning.
3 participants