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(FileUploaderButton): refactor to button to remove a11y violation #13061

Merged

Conversation

tw15egan
Copy link
Member

Closes #12725

Refactors the FileUploaderButton to use a button instead of utilizing the label to handle click/keyboard interactions

Changelog

New

  • button is rendered adjacent to the label element in FileUploaderButton

Changed

  • Moved most props from the label element to the new button element. All functionality should remain the same.
  • Updated tests to utilize the button for onClick tests

Removed

  • Removed role="button" wherever it was being set, as it is now rendering a button by default
  • Removed the tabIndex as this is handled automatically when using a button

Testing / Reviewing

Ensure all of the following:

  • All tests pass (especially a11y checker)
  • Component renders as expected
  • Existing props work as expected
  • Functionality remains the same (onClick, onChange can be passed down)

@netlify
Copy link

netlify bot commented Jan 31, 2023

Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 8c72391
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/63e270ac8377e800090cb4cc
😎 Deploy Preview https://deploy-preview-13061--carbon-components-react.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 settings.

@netlify
Copy link

netlify bot commented Jan 31, 2023

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 8c72391
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/63e270ac17d1870008c9ba79
😎 Deploy Preview https://deploy-preview-13061--carbon-elements.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 settings.

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

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

Looks good! One question below

@tw15egan tw15egan requested a review from a team as a code owner February 7, 2023 15:18
@kodiakhq kodiakhq bot merged commit 816f822 into carbon-design-system:main Feb 7, 2023
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.

[a11y]: FileUploader has critical violation "The tabbable element's role 'none' is not a widget role"
3 participants