Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validation feedback/tooltips lack association with their form control

See original GitHub issue

the feedback and tooltip containers need to be programmatically associated with their respective form controls, e.g. using aria-describedby="...", e.g.

<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" ... required>
<div class="invalid-tooltip">
   Please provide a valid city.
</div>

<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" aria-descriebedby="validationTooltip03-tip" ... required>
<div class="invalid-tooltip" id="validationTooltip03-tip">
   Please provide a valid city.
</div>

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:10 (10 by maintainers)

Top GitHub Comments

1reaction

patrickhlaukecommented, Jul 7, 2019

dropping this here for reference as well https://developer.paciellogroup.com/blog/2015/05/short-note-on-aria-labelledby-and-aria-describedby/

0reactions

patrickhlaukecommented, Dec 16, 2020

sorry, late reply to say yes, it’s still a problem we need to tackle…

Top Results From Across the Web

Validation · Bootstrap v5.0

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Bootstrap 4 invalid feedback with input group not displaying

Adding the following CSS works as a workaround, but it seems odd. .form-group.is-invalid { .invalid-feedback { display: block; } }.

Web Form Validation: Best Practices and Tutorials

If the validation fails, the response is then sent back to the client, page that contains the web form is refreshed and a...

Tooltips in the time of WCAG 2.1 | Sarah Higley

Focus and hover ... The first step is to ensure that the visual display can be controlled by either a keyboard or a...

Bootstrap 5 Validation Tooltips - GeeksforGeeks

valid|invalid-feedback: This class is used to tell the user about what things are necessary for the form to be submitted. · valid|invalid-tooltip ......