Add aria-describedby attributes

rocklobster-in#1464

admin/includes/js/src/config-errors.js

@@ -1,6 +1,9 @@
 import apiFetch from '@wordpress/api-fetch';
 
-import { iconInCircle } from './utils';
+import {
+	iconInCircle,
+ 	canonicalizeName,
+} from './utils';
 
 
 const init = () => {
@@ -40,6 +43,10 @@ const update = () => {
 				section,
 				errors,
 			} ) );
+
+			field.setAttribute( 'aria-describedby',
+				canonicalizeName( `wpcf7-config-error-for-${ section }` )
+			);
 		} else { // Valid field
 			field.removeAttribute( 'aria-invalid' );
 		}
@@ -64,8 +71,12 @@ const createErrorsList = args => {
 	}
 
 	const ul = document.createElement( 'ul' );
-	ul.setAttribute( 'id', `wpcf7-config-error-for-${ section }` );
-	ul.setAttribute( 'class', 'config-error' );
+
+	ul.setAttribute( 'id',
+		canonicalizeName( `wpcf7-config-error-for-${ section }` )
+	);
+
+	ul.classList.add( 'config-error' );
 
 	errors.forEach( err => {
 		if ( ! err.message ) {

admin/includes/js/src/utils.js

@@ -9,6 +9,10 @@ const iconInCircle = icon => {
 };
 
 
+const canonicalizeName = orig => orig.replace( /[^0-9a-z]+/gi, '-' );
+
+
 export {
 	iconInCircle,
+	canonicalizeName,
 };