[a11y]: Form react examples may have some challenges

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-form--default

React version

No response

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

The Form code examples are a little odd. There are a couple of considerations to capture:

1. On the main form example, the focus indicator for a failure state on an input -- in this example, the password input -- will fail WCAG 2.2 (as proposed) since the red error outline is just turned blue to show focus. Nothing like 3:1 between the red and blue. I don't hate it. It just fails the requirement. Could be solved by thicker line on error focus, or a number of other ways.
   

2. I'm not entirely sure fieldset is used properly on the Formgroup code example.

3. The label with tooltip is a little odd in its implementation, though maybe I wouldn't call it a failure. Space toggles the appearance off and on, unusual. It's also not requiring activation to show the tooltip, which I'm pretty sure is the implementation Toggletip ended up with

WCAG 2.1 Violation

As above Focus Appearance (from 2.2) and possibly 4.1.2 Parsing

Reproduction/example

Links provided in description

Steps to reproduce

For 1 above, press tab to reach password input in error, and note how only the color changes to indicator focus.

For 2, inspect element

For 3, open https://react.carbondesignsystem.com/?path=/story/components-formlabel--with-tooltip and press tab to reach the i information icon. Text will appear without the user activating the i icon.

Code of Conduct

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

[tay1orjones]

the focus indicator for a failure state on an input ... Could be solved by thicker line on error focus, or a number of other ways.

@carbon-design-system/design what do you think we could do here for this case?

[aagonzales]

This is a fail in WCAG 2.2 which is not released yet (we currently only need to pass 2.1). We will do work for 2.2 updates in a future sprint/quarter. Not an immediate concern.

FYI @sstrubberg @tay1orjones @mbgower

[mbgower]

@sstrubberg I don't think this warrants sev 2 at this point. Once WCAG 2.2 comes into force it will. It is on design radar.