Abide incorrectly points form fields with aria-describedby to hidden form error messages

[ahukkanen]

What should happen?

When using abide with a pre-defined invisible form error element, the screen reader should not announce the hidden error message before it becomes visible on the screen.

What happens instead?

When using abide with a pre-defined invisible form error element, the screen reader will announce the error even before it is visible on the screen and when the field is perfectly valid. Generally these error messages state something along "this field has an error" which is confusing for the users of assistive technologies in case their input is perfectly valid (or when they enter the field for the first time).

Possible Solution

Remove the aria-describedby attribute automatically added by Abide or only add it once the error becomes visible on the screen.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://jsfiddle.net/f3g2rx1j/show

How to reproduce:

1. Make sure your screen reader is enabled
2. Focus on the visible field
3. Make sure you did not accidentally exit the field so the error is still visually hidden
4. Listen to the screen reader announce the error

Context

This issue was reported by accessibility experts testing a web service built on Foundation.

This behavior was added on PR #10699 by @ncoden in commit 88abca7.

It became part of v6.5.0 (first introduced in v6.5.0-rc.1).

In the current code, the behavior can be found from these lines:

foundation-sites/js/foundation.abide.js

Lines 298 to 308 in 8846fda

	// Set [aria-describedby] on the input toward the first form error if it is not set
	if (typeof $el.attr('aria-describedby') === 'undefined') {
	// Get the first error ID or create one
	let errorId = $error.attr('id');
	if (typeof errorId === 'undefined') {
	errorId = GetYoDigits(6, 'abide-error');
	$error.attr('id', errorId);
	}
	$el.attr('aria-describedby', errorId);
	}

Your Environment

• Foundation version(s) used: 6.7.4
• Browser(s) name and version(s): Chrome 98.0.4758.102 (or any other)
• Device, Operating System and version: Laptop (or any other), Ubuntu 20.04 (or any other) with Orca screen reader (or any other supporting aria-describedby)
• Link to your project: https://github.com/decidim/decidim

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.