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