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.

Sign up for GitHub

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

Jump to bottom

[a11y]: FileUploaderDropContainer component has critical violation "The tabbable element's role 'none' is not a widget role" #12498

Closed
2 tasks done
kenneth-nguyen1 opened this issue Nov 3, 2022 · 7 comments · Fixed by #13323
Closed
2 tasks done

[a11y]: FileUploaderDropContainer component has critical violation "The tabbable element's role 'none' is not a widget role" #12498

kenneth-nguyen1 opened this issue Nov 3, 2022 · 7 comments · Fixed by #13323
Assignees
@tw15egan
Labels
adopter: product Work-stream that directly helps a Product team. component: file-uploader severity: 2 https://ibm.biz/carbon-severity status: waiting for maintainer response 💬 type: a11y ♿
Milestone
2023 Q1

Comments

@kenneth-nguyen1
Copy link

Package

carbon-components-react

Browser

Chrome

Operating System

MacOS

Package version

7.56.0

React version

17.0.2

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - Latest Deployment

Assistive technology

No response

Description

The FileUploaderDropContainer component has a critical a11y violation "The tabbable element's role 'none' is not a widget role" that was found in our product using the IBM Accessibility Checker tool and is re-producible on the v10 and v11 storybook as well.

v10 storybook
FileUploader-v10

v11 storybook
FileUploader-v11

WCAG 2.1 Violation

No response

Reproduction/example

Carbon v10 storybook - https://v7-react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application and/or Carbon v11 storybook - https://react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application

Steps to reproduce

On the storybook link (either v10 or v11) for the FileUploader -> FileUploaderDropContainer story, run the IBM Accessibility Checker scan. The scan should report the critical violation mentioned above (scroll to the bottom of the violations list).

Code of Conduct
@kenneth-nguyen1
Copy link
Author

From looking at the component code, maybe the fix is to move the tabIndex property from the <label> element to it's nested child <div> element? This potential fix would be the same for the v10 branch.

@kenneth-nguyen1
Copy link
Author

Also, can the fix for this issue be backported to carbon v10 alongside v11? Thanks

@sstrubberg sstrubberg added severity: 2 https://ibm.biz/carbon-severity component: file-uploader adopter: product Work-stream that directly helps a Product team. and removed status: needs triage 🕵️‍♀️ labels Dec 7, 2022
@sstrubberg sstrubberg moved this to ⏱ Backlog in Design System Dec 7, 2022
@adarsh-ibm
Copy link

hi, am also facing this issue in one of our applications. Any update on this?

@tw15egan tw15egan self-assigned this Mar 9, 2023
@tw15egan tw15egan moved this from ⏱ Backlog to 🏗 In Progress in Design System Mar 9, 2023
@tay1orjones tay1orjones added this to the 2023 Q1 milestone Mar 9, 2023
@tw15egan tw15egan mentioned this issue Mar 9, 2023
Merged
@tay1orjones tay1orjones moved this from 🏗 In Progress to 🚦 In Review in Design System Mar 13, 2023
@kodiakhq kodiakhq bot closed this as completed in #13323 Mar 16, 2023
@github-project-automation github-project-automation bot moved this from 🚦 In Review to ✅ Done in Design System Mar 16, 2023
@nkn2022
Copy link

nkn2022 commented Apr 17, 2023

will this fix be available on v10?

@tw15egan
Copy link
Collaborator

We need to port this back to v10

@tw15egan tw15egan reopened this May 23, 2023
@github-project-automation github-project-automation bot moved this from ✅ Done to ⏱ Backlog in Design System May 23, 2023
@francinelucca francinelucca mentioned this issue May 24, 2023
Closed
2 tasks
@tw15egan tw15egan removed their assignment May 24, 2023
@tw15egan tw15egan mentioned this issue Jun 26, 2023
Merged
@renato-souzaf
Copy link

Hi,
I'm facing this same issue when using FileUploaderButton component. Could you fix for FileUploaderButton component as well?

@tw15egan tw15egan self-assigned this Aug 23, 2023
@tw15egan tw15egan mentioned this issue Aug 25, 2023
Merged
@tw15egan
Copy link
Collaborator

Closed via #14517, will be included in the next release of V10

@github-project-automation github-project-automation bot moved this from ⏱ Backlog to ✅ Done in Design System Aug 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tw15egan tw15egan

Labels
adopter: product Work-stream that directly helps a Product team. component: file-uploader severity: 2 https://ibm.biz/carbon-severity status: waiting for maintainer response 💬 type: a11y ♿
Projects
Design System
Archived in project
Milestone
2023 Q1
Development

Successfully merging a pull request may close this issue.

fix(FileUploaderDropContainer): fix a11y violations, update tests tw15egan/carbon
7 participants
@tay1orjones @tw15egan @sstrubberg @renato-souzaf @nkn2022 @kenneth-nguyen1 @adarsh-ibm