Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Valid feedback in form validation are not accessible for assistive technologies #1599

Open
2 tasks done
MewenLeHo opened this issue Nov 8, 2022 · 0 comments · May be fixed by #1917
Open
2 tasks done

Valid feedback in form validation are not accessible for assistive technologies #1599

MewenLeHo opened this issue Nov 8, 2022 · 0 comments · May be fixed by #1917

Comments

@MewenLeHo
Copy link
Contributor

MewenLeHo commented Nov 8, 2022

Prerequisites

Proposal

In form validation, when using:

<div class="valid-feedback">Looks good!</div>

The feedback is visually hidden but still accessible to ATs users thanks to:

.valid-feedback, .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}

But there is also a

.valid-feedback {
    display: none;
}

rule coming from:

  @if $state == "valid" {
    .#{$state}-feedback {
      display: none;
      @extend .visually-hidden; // Boosted mod: Do not visually display .valid-feedback
    }

in scss\mixins\_forms.scss

The problem is that using display: none; will also prevent it to be rendered by the ATs.

When a field is valid, we only have:
screenshot-boosted orange com-2022 11 08-10_51_31

So we have a visual feedback but it's not accessible for ATs.
It means actually when using Boosted, ATs can't explicitly stated that a field is valid.

Motivation and context

The good part is that, if we apply some actions spotted during the DevTestDays preparation and especially In Docs / Forms / Validation, No programmatic link between error messages dans input fields #37405, a valid field can be implicytly stated as valid because of not being explicitly stated as invalid.

=> for a valid preview, see https://deploy-preview-1559--boosted.netlify.app/docs/5.2/examples/form/ in Add form example in boosted doc #1559

The question is what should we do while waiting the opinion of Boostrap regarding the issue opened by @Aniort?

Some options:
Made the changes only in Boosted?
Remove the display: none; rule?
Start using aria-invalid="<true | false>" in Boosted forms to provide a feedback?

@julien-deramond julien-deramond added this to Triage in 🟣 Sprint 19 - Mar 2023 via automation Feb 27, 2023
@julien-deramond julien-deramond moved this from Triage to To do in 🟣 Sprint 19 - Mar 2023 Feb 27, 2023
@MewenLeHo MewenLeHo self-assigned this Mar 6, 2023
@MewenLeHo MewenLeHo moved this from To do to In progress in 🟣 Sprint 19 - Mar 2023 Mar 6, 2023
@MewenLeHo MewenLeHo linked a pull request Mar 22, 2023 that will close this issue
8 tasks
@julien-deramond julien-deramond added this to Triage in 🟣 Sprint 20 - April/May 2023 via automation Apr 6, 2023
@julien-deramond julien-deramond moved this from Triage to In progress in 🟣 Sprint 20 - April/May 2023 Apr 6, 2023
@julien-deramond julien-deramond added this to Triage in 🟣 Sprint 21 - June 2023 via automation Jun 5, 2023
@julien-deramond julien-deramond moved this from Triage to In progress in 🟣 Sprint 21 - June 2023 Jun 5, 2023
@julien-deramond julien-deramond added this to Triage in 🟣 Sprint 22 - Jul-Aug 2023 via automation Sep 4, 2023
@julien-deramond julien-deramond moved this from Triage to In progress in 🟣 Sprint 22 - Jul-Aug 2023 Sep 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

1 participant