Improve a11y of form error state v2 #2090

MewenLeHo · 2023-06-19T09:14:12Z

Related issues

Closes #1918

Description

The goal of this PR is to improve focus to allow sufficient contrast between error field focused and non focused.

Before this PR

Once a form is on error: fields on error will gain a red border and black one when focused

The main problem here is in a11y we can't convey an information by color alone because it can be not noticeable for certain types of colorblindness.
This references WCAG criterion 1.4.1 Use of Color (Level A).

For someone suffering from achromatopsia for instance, the same example will look like:

All fields on error look almost identical, causing an a11y issue.

After this PR
The recent work on focus (see #1437) was applied to fields on error to add a visual cue so information does not rely exclusively on color anymore:

And for someone suffering from achromatopsia:

Motivation & Context

A11y improvement for people suffering for any form of colorblindness.

Types of change

New feature (non-breaking change which adds functionality)

Live previews

Checklist

Contribution

I have read the contributing guidelines

Accessibility

My change follows accessibility good practices; I have at least run axe

Design

My change respects the design guidelines defined in Orange Design System
My change is compatible with responsive display

Development

My change follows the developer guide
(NA) I have added JavaScript unit tests to cover my changes
(NA) I have added SCSS unit tests to cover my changes

Documentation

My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

My change introduces changes to the migration guide
(NA) My new component is added in Storybook
(NA) My new component is compatible with RTL
Manually run BrowserStack tests
Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
Code review
Design review
A11y review

After the merge

Manually launch Percy tests

netlify · 2023-06-19T09:16:17Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`0eb7c22`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64c3aaf6fbc03900089f8c59
😎 Deploy Preview	https://deploy-preview-2090--boosted.netlify.app/docs/5.3/migration
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

MewenLeHo · 2023-06-19T09:20:39Z

Will be a fresh start for #1949
Needed to debug old code and find a solution for at least one Firefox issue.

MewenLeHo · 2023-06-20T08:39:18Z

scss/_reboot.scss

@@ -96,13 +96,13 @@ body {
  @include focus-visible(); // 1
 }

-.js-focus-visible :focus:not([data-focus-visible-added]):not(.focus-ring),
-.js-focus-visible .focus:not([data-focus-visible-added]):not(.focus-ring) { // 2
+.js-focus-visible :focus:not([data-focus-visible-added]):not(.focus-ring):not(.form-select:invalid),


Needed by Chrome and Firefox.

MewenLeHo · 2023-06-20T08:39:21Z

scss/_reboot.scss

  outline: 0 !important;
  box-shadow: none;
 }

-:focus:not(:focus-visible):not(.focus-ring) { // 3
+:focus:not(:focus-visible):not(.focus-ring):not(.form-select:invalid) { // 3


Needed by Firefox.

louismaximepiton

LGTM! To me this solution seems more logical in terms of UX, so let's wait for the design review if they are fine with it.

scss/_reboot.scss

louismaximepiton

👌

Franco-Riccitelli · 2023-07-04T12:59:35Z

All looks good to me.

sonarqubecloud · 2023-07-05T08:24:14Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

julien-deramond · 2023-07-27T07:24:23Z

Not 100% sure but I'm wondering if adding something in the migration guide could be beneficial to end-users at least to know that something (transparent) for them when they use our components has been changed. I'm thinking about when they create their own components; they should follow the same principle. Thoughts?

julien-deramond · 2023-07-27T08:39:47Z

Form control file in https://deploy-preview-2090--boosted.netlify.app/docs/5.3/forms/validation/#supported-elements hasn't the outlines when focused with a mouse click.

Tried few things really quickly if it can help:

Modify the mixin to add after the .form-control rule:

.form-control[type="file"] {
      @include form-validation-state-selector($state) {
        border-color: $border-color;

        &:focus {
          @include focus-visible();
          border-color: $border-color !important; // stylelint-disable-line declaration-no-important
        }
        // End mod
      }
    }

Add the following 3 rules in reboot:

:not(.form-control[type="file"]:invalid)

Note: there's probably something overriding the .form-control rule because this use case should probably already be included and working 🤷

MewenLeHo · 2023-07-27T13:46:15Z

Form control file in https://deploy-preview-2090--boosted.netlify.app/docs/5.3/forms/validation/#supported-elements hasn't the outlines when focused with a mouse click.

Tried few things really quickly if it can help:

Modify the mixin to add after the .form-control rule:
.form-control[type="file"] {
      @include form-validation-state-selector($state) {
        border-color: $border-color;

        &:focus {
          @include focus-visible();
          border-color: $border-color !important; // stylelint-disable-line declaration-no-important
        }
        // End mod
      }
    }
Add the following 3 rules in reboot:
:not(.form-control[type="file"]:invalid)
Note: there's probably something overriding the .form-control rule because this use case should probably already be included and working 🤷

Yes it's really strange.
It should work without the need to add the mixin specifically for .form-control[type="file"] because I already added it for all .form-control 🤔
I pushed the changes to make more tests.

MewenLeHo · 2023-07-28T10:02:07Z

@julien-deramond: as discussed in today's daily meeting, the existing rule for .form-control was not working for .form-control[type="file"] because data-focus-visible-added attribute is not added on click for input file 😮

site/content/docs/5.3/migration.md

…ation guide

julien-deramond

Nice! LGTM! 🚀

Fresh start

1a75d63

MewenLeHo added accessibility docs Improvements or additions to documentation labels Jun 19, 2023

MewenLeHo marked this pull request as draft June 19, 2023 09:14

MewenLeHo self-assigned this Jun 19, 2023

Fix for select element

3817d0f

julien-deramond added css v5 labels Jun 20, 2023

MewenLeHo commented Jun 20, 2023

View reviewed changes

julien-deramond removed the docs Improvements or additions to documentation label Jun 20, 2023

Merge branch 'main' into main-mlh-a11y-form-error-state

53c7d01

MewenLeHo marked this pull request as ready for review June 20, 2023 13:44

MewenLeHo mentioned this pull request Jun 21, 2023

Fix quantity selector focus state #2099

Merged

11 tasks

MewenLeHo added upcoming a11y review upcoming design review labels Jun 21, 2023

louismaximepiton self-requested a review June 23, 2023 12:17

louismaximepiton approved these changes Jun 23, 2023

View reviewed changes

louismaximepiton reviewed Jun 23, 2023

View reviewed changes

scss/_reboot.scss Outdated Show resolved Hide resolved

Update documentation

9fdf994

MewenLeHo requested a review from louismaximepiton June 26, 2023 13:50

louismaximepiton approved these changes Jun 26, 2023

View reviewed changes

MewenLeHo added ready for a11y review and removed upcoming a11y review upcoming design review labels Jun 26, 2023

MewenLeHo added the passed a11y review label Jun 26, 2023

Merge branch 'main' into main-mlh-a11y-form-error-state

08591ee

MewenLeHo added passed design review and removed ready for design review labels Jul 4, 2023

Merge branch 'main' into main-mlh-a11y-form-error-state

55a492e

Merge branch 'main' into main-mlh-a11y-form-error-state

3cca914

Merge branch 'main' into main-mlh-a11y-form-error-state

3417b2c

Add support for input file edge case

ab90ee0

MewenLeHo and others added 7 commits July 27, 2023 16:04

Merge branch 'main' into main-mlh-a11y-form-error-state

9b1944e

Update migration guide

2f8dffc

Fix typo

51104cb

Fix bundlewatch

6d90b91

Improve migration guide

0f06423

Fix input file

5e41cdc

Fix comment

630cea8

Merge branch 'main' into main-mlh-a11y-form-error-state

705e96c

julien-deramond reviewed Jul 28, 2023

View reviewed changes

site/content/docs/5.3/migration.md Outdated Show resolved Hide resolved

julien-deramond added 2 commits July 28, 2023 13:39

Minore modification spotted while searching for a pattern in the migr…

29d16d9

…ation guide

Update site/content/docs/5.3/migration.md

0eb7c22

julien-deramond self-requested a review July 28, 2023 11:48

julien-deramond approved these changes Jul 28, 2023

View reviewed changes

julien-deramond merged commit 17f6f4d into main Jul 28, 2023

julien-deramond deleted the main-mlh-a11y-form-error-state branch July 28, 2023 11:51

julien-deramond mentioned this pull request Jul 28, 2023

v5.3.2 Ship List #2174

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve a11y of form error state v2 #2090

Improve a11y of form error state v2 #2090

MewenLeHo commented Jun 19, 2023 •

edited

Loading

netlify bot commented Jun 19, 2023 •

edited

Loading

MewenLeHo commented Jun 19, 2023

MewenLeHo Jun 20, 2023 •

edited

Loading

MewenLeHo Jun 20, 2023 •

edited

Loading

louismaximepiton left a comment

louismaximepiton left a comment

Franco-Riccitelli commented Jul 4, 2023

sonarqubecloud bot commented Jul 5, 2023

julien-deramond commented Jul 27, 2023

julien-deramond commented Jul 27, 2023

MewenLeHo commented Jul 27, 2023

MewenLeHo commented Jul 28, 2023 •

edited

Loading

julien-deramond left a comment

Improve a11y of form error state v2 #2090

Improve a11y of form error state v2 #2090

Conversation

MewenLeHo commented Jun 19, 2023 • edited Loading

Related issues

Description

Motivation & Context

Types of change

Live previews

Checklist

Contribution

Accessibility

Design

Development

Documentation

Checklist (for Core Team only)

After the merge

netlify bot commented Jun 19, 2023 • edited Loading

✅ Deploy Preview for boosted ready!

MewenLeHo commented Jun 19, 2023

MewenLeHo Jun 20, 2023 • edited Loading

Choose a reason for hiding this comment

MewenLeHo Jun 20, 2023 • edited Loading

Choose a reason for hiding this comment

louismaximepiton left a comment

Choose a reason for hiding this comment

louismaximepiton left a comment

Choose a reason for hiding this comment

Franco-Riccitelli commented Jul 4, 2023

sonarqubecloud bot commented Jul 5, 2023

julien-deramond commented Jul 27, 2023

julien-deramond commented Jul 27, 2023

MewenLeHo commented Jul 27, 2023

MewenLeHo commented Jul 28, 2023 • edited Loading

julien-deramond left a comment

Choose a reason for hiding this comment

MewenLeHo commented Jun 19, 2023 •

edited

Loading

netlify bot commented Jun 19, 2023 •

edited

Loading

MewenLeHo Jun 20, 2023 •

edited

Loading

MewenLeHo Jun 20, 2023 •

edited

Loading

MewenLeHo commented Jul 28, 2023 •

edited

Loading