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.

Improve client validation accessibility on success state in Account Settings page

See original GitHub issue

Describe the bug Somewhat related to issue #37373. When error state or warning state is triggered by client validation, it is displayed with label color change and an error or warning message. But on success state, there is only label color change without success message.

According to WCAG, only changing color is not friendly to color blind or partially color blind users. There should be change in color and shape to accommodate those users.

To Reproduce Steps to reproduce the behavior:

Go to http://localhost:8000/settings
Try to trigger success state in Email Settings (Your Internet Presence client validation is currently not working as described by related issue)
Refer to Describe the bug

Expected behavior Add success message in addition to color change on success state, or add common semantic icon such as green check icon beside the label.

Desktop (please complete the following information):

OS: Windows 10 1809 Build 17763.832
Browser Latest Chrome
Version 77.0.3865.120 (Official Build) (64-bit)

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

thecodingaviatorcommented, Oct 19, 2019

@laurameck please pick this up if @ojeytonwilliams hasn’t already done so

0reactions

ojeytonwilliamscommented, Oct 19, 2019

Nope, I haven’t had chance. Don’t hesitate on my account.

Top Results From Across the Web

Validating Input | Web Accessibility Initiative (WAI)

Custom validation needs to notify users in an accessible way as described in the User Notifications part of this tutorial. Client-side validation alone...

Accessible Client-side Form Validation with HTML5

In this three part blog series we'll learn to make accessible forms with HTML5, WAI-ARIA, and jQuery Validation.

Handling common accessibility problems - MDN Web Docs

Hopefully this article has given you a good grounding in the main accessibility problems you might encounter, and how to test and overcome ......

6-STEP MOBILE APP ACCESSIBILITY CHECKLIST

Components that are repeated across pages in a mobile application should be presented in a consistent layout. In responsive web design (in which ......

Creating Accessible Emails

These guidelines and recommendations will benefit everyone and help ensure your message comes through clearly to your audience. In this page: Designing an...