[a11y]: Toggle has 2 violations, arial-abel and landmark role

[hyungskim]

Package

@carbon/react

Browser

No response

Operating System

No response

Package version

v10.58.10 (carbon-component) 7.59.14 (carbon-component-react)

React version

16.14

Automated testing tool and ruleset

IBM Equal Accessibility Checker (latest one)

Assistive technology

No response

Description

There are 2 violations from the carbon Toggle component:

1 issue from the Toggle switch itself and the other was from the checker component that the Toggle switch uses internally.

Violation 1:

Violation 2:

WCAG 2.1 Violation

No response

Reproduction/example

Reproducible using the

Steps to reproduce

1. Use in the UI page.
2. Run Accessibility checker against the page.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[hyungskim]

Hi, @guidari
I'm from Catalog UI IBM Knowledge Catalog. We've noticed 2 violations in the Toggle switch component.

[tw15egan]

@hyungskim for the first one, simply remove the aria-label prop from the component. If there is none and it is being auto-generated, then try updating to the latest version of V10. I am unable to reproduce this violation in the storybook.

As far as the landmark violation, this is due to your app not having a valid landmark element. Usually, you can set the main wrapper of your app from a div to a main element. More information can be found here: https://developer.mozilla.org/en-US/blog/aria-accessibility-html-landmark-roles/

Hope that helps!