FileUploaderDropContainer has nested interactive controls (WCAG "MUST")

[dcwarwick]

This issue relates to an accessibility violation flagged up by the axe-core automated testing tools which Carbon uses in its integrated testing. This violation may not have shown up in that testing yet, for two reasons:

• Carbon is using an old version of axe-core, v4.1.1. The violation is shown by any version from v4.2.0 onwards (published six weeks ago).
• The test suite for FileUploaderDropContainer unfortunately omits the axe test. This is an oversight that should probably be remedied!

However, users of Carbon may already be seeing this violation any time they use the FileUploaderDropContainer. For example, the @carbon/ibm-cloud-cognitive team has seen this violation in our ImportModal component which uses FileUploaderDropContainer.

Environment

Operating system

OSX (this is not relevant to the issue as far as I know)

Browser

n/A

Automated testing tool and ruleset

axe-core, using jest tests (see steps to reproduce below)

Assistive technology used to verify

n/A

Detailed description

What version of the Carbon Design System are you using?

carbon-components-react v7.36.0 (but there has not been a recent change relevant to this issue)

What did you expect to happen?

Expected generated DOM to pass automated accessibility tests.

What happened instead?

Generated DOM includes the following fragment:

<div class="bx--file__drop-container" role="button">Add file<input type="file" id="id1" class="bx--file-input" tabindex="-1" accept=""></div>

This encloses an <input> within a <div> with role "button". This causes accessibility test failure.

What WCAG 2.1 checkpoint does the issue violate?

4.1.2
See https://dequeuniversity.com/rules/axe/4.2/nested-interactive

Steps to reproduce the issue

1. Clone the carbon-design-system/carbon repo
2. Add automated accessibility test for FileUploaderDropContainer

So unfortunately there currently is not an automated accessibility test included in the jest tests for FileUploaderDropContainer. It might be a good idea to add this test in! It can be done quickly to reproduce this issue by inserting the following lines into packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js somewhere inside the main describe() block, for example at about line 17:

  it('should have no axe violations', async () => {
    const { container } = render(<FileUploaderDropContainer />);
    await expect(container).toHaveNoAxeViolations();
  });

This picture shows the completed edit in place:

3. Lift the version of axe-core to 4.2.0 or later.

The testing for this violation was introduced in axe-core v4.2.0, published on April 26 2021. The latest version of axe-core is v4.2.2, published on June 3 2021. The file config/jest-config-carbon/package.json currently requests v4.1.1 or up ("^4.1.1"), but versions prior to 4.2.0 will not show the violation.

This picture shows the above file edited to require at least v4.2.0:

4. Run yarn to ensure all dependencies are fetched.
5. Run the tests, eg with yarn test.

Actually, for speed, it's quicker just to run yarn jest fileuploaderdrop. The following picture shows the output from this run if the steps above have been followed:

[joshblack]

Thanks for the report @dcwarwick! We'll add this to next sprint 👍