search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.04k stars 1.13k forks source link

ColorField to get de-focused on submit (post enter key press) #2596

Closed rohijai closed 2 years ago

rohijai commented 2 years ago

🙋 Feature Request

When user is done modifying value in ColorField and enter is pressed to submit it then highlighting (blue border) of ColorFiled should be turned off but keyboard focus should be on it only, i.e. when TAB is pressed then focus should move to next element.

🤔 Expected Behavior

Blue color border should be turned off when enter is pressed i.e. onSubmit

😯 Current Behavior

Blue color border is not turned off when enter is pressed i.e. onSubmit

💁 Possible Solution

🔦 Context

As part of Adobe Color we are providing Color-Picker component which is integrated in CC Web Canvas (https://stage.creativecloud.adobe.com/cc/canvas), for all elements as on canvas this behaviour can be observed.

We want to provide consistency in behaviour.

💻 Examples

Expected SS

Expected

Current SS

Current

🧢 Your Company/Team

Adobe Color

🎁 Tracking Ticket (optional)

snowystinger commented 2 years ago

Hey! Thanks for the issue! Unfortunately, I believe your example is an accessibility violation. Focus must be visible at all times for keyboard users. See https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

rohijai commented 2 years ago

Hey. This has been discussed with Adobe Color PM/design and they want this feature.

majornista commented 2 years ago

Hey. This has been discussed with Adobe Color PM/design and they want this feature.

We should not implement a behavior that violates a WCAG accessibility requirement. When the user is interacting using the keyboard, the focus ring must be visible. It sounds like design is looking for some visual confirmation that a the value has been submitted. ColorField and NumberField support validationState, could we use that to confirm valid input, without removing the focus ring from a field that still has focus.

Also, if the behavior you describe has been implemented for any other fields, it will be flagged in any accessibility review of the product, and you will have to change it.