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

change: [M3-9198] - Accessibility Issues with LKE Kubeconfig Buttons #11648

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

bill-akamai
Copy link
Contributor

@bill-akamai bill-akamai commented Feb 11, 2025

Description 📝

This PR replaces <Box> elements with <StyledLinkButton> for better accessibility and adds aria-labels in the KubeConfigDisplay.

Changes 🔄

  • Replaced <Box> elements with <StyledLinkButton> components to improve accessibility.
  • Added aria-labels to buttons for better screen reader support.
  • Ensured buttons are focusable and can be triggered via keyboard navigation.

Preview 📷

Before After
M3-9198.Before.mp4
M3-9198.After.mov

How to test 🧪

  • In the Kubernetes dashboard, click into the body of the page.
  • Hit the tab key on your keyboard and tab through the page.
  • Confirm that the Kubeconfig controls are being recognized as a tab-able item.
  • Confirm the presence of each item's aria-label in Dev Tools.
Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support


  • I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

  • All unit tests are passing
  • TypeScript compilation succeeded without errors
  • Code passes all linting rules

@bill-akamai bill-akamai requested a review from a team as a code owner February 11, 2025 21:36
@bill-akamai bill-akamai requested review from dwiley-akamai and harsh-akamai and removed request for a team February 11, 2025 21:36
Copy link

github-actions bot commented Feb 11, 2025

Coverage Report:
Base Coverage: 80.13%
Current Coverage: 80.13%

Copy link
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

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

Thanks for the fix - confirmed markup is properly adjusted to improve accessibility on the CTAs ✅

Copy link
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

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

Ability to tab to each Kubeconfig button ✅
aria-label present for each Kubeconfig button ✅

@mjac0bs mjac0bs added the Approved Multiple approvals and ready to merge! label Feb 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants