diff --git a/assets/js/public/form-field-unique.js b/assets/js/public/form-field-unique.js
index 69437340..05f17f3b 100644
--- a/assets/js/public/form-field-unique.js
+++ b/assets/js/public/form-field-unique.js
@@ -27,19 +27,39 @@
const field = $( this ).closest( '.forminator-field' );
const label = field.find( '.forminator-label' );
const dscrp = field.find( '.forminator-description' );
+ const error = field.find( '.forminator-error-message' );
const getCurrentId = $( this ).prop( 'id' );
const getFormId = form.data( 'id' );
const getUniqueId = getCurrentId + '-' + getFormId;
+ const getUniqueLabelId = getCurrentId + '-label-' + getFormId;
+ const getUniqueDescId = getCurrentId + '-desc-' + getFormId;
+ const getUniqueErrorId = getCurrentId + '-error-' + getFormId;
$( this ).prop( 'id', getUniqueId );
if ( label.length ) {
- label.prop( 'for', getUniqueId );
+ label.prop({
+ id: getUniqueLabelId,
+ for: getUniqueId
+ });
+ $( this ).attr( 'aria-labelledby', getUniqueLabelId );
+ }
+
+ if ( error.length ) {
+ error.prop({
+ id: getUniqueErrorId
+ });
+ $( this ).attr( 'aria-describedby', getUniqueErrorId );
}
if ( dscrp.length ) {
- dscrp.prop( 'aria-describedby', getUniqueId );
+ dscrp.prop({
+ id: getUniqueDescId
+ });
+ error.length ?
+ $( this ).attr( 'aria-describedby', getUniqueDescId + ' ' + getUniqueErrorId ) :
+ $( this ).attr( 'aria-describedby', getUniqueDescId );
}
});
}
@@ -54,19 +74,39 @@
const field = $( this ).closest( '.forminator-field' );
const label = field.find( '.forminator-label' );
const dscrp = field.find( '.forminator-description' );
+ const error = field.find( '.forminator-error-message' );
const getCurrentId = $( this ).prop( 'id' );
const getFormId = form.data( 'id' );
const getUniqueId = getCurrentId + '-' + getFormId;
+ const getUniqueLabelId = getCurrentId + '-label-' + getFormId;
+ const getUniqueDescId = getCurrentId + '-desc-' + getFormId;
+ const getUniqueErrorId = getCurrentId + '-error-' + getFormId;
$( this ).prop( 'id', getUniqueId );
if ( label.length ) {
- label.prop( 'for', getUniqueId );
+ label.prop({
+ id: getUniqueLabelId,
+ for: getUniqueId
+ });
+ $( this ).attr( 'aria-labelledby', getUniqueLabelId );
+ }
+
+ if ( error.length ) {
+ error.prop({
+ id: getUniqueErrorId
+ });
+ $( this ).attr( 'aria-describedby', getUniqueErrorId );
}
if ( dscrp.length ) {
- dscrp.prop( 'aria-describedby', getUniqueId );
+ dscrp.prop({
+ id: getUniqueDescId
+ });
+ error.length ?
+ $( this ).attr( 'aria-describedby', getUniqueDescId + ' ' + getUniqueErrorId ) :
+ $( this ).attr( 'aria-describedby', getUniqueDescId );
}
});
}
diff --git a/templates/form-elements/field-address.html b/templates/form-elements/field-address.html
index abc2b816..a68fc2ee 100644
--- a/templates/form-elements/field-address.html
+++ b/templates/form-elements/field-address.html
@@ -15,7 +15,7 @@
This field is required.
- Optional description for street address field.
+ Optional description for street address field.
@@ -61,7 +61,7 @@
This field is required.
- Optional description for city field.
+ Optional description for city field.
@@ -107,7 +107,7 @@
This field is required.
- Optional description for postal code field.
+ Optional description for postal code field.
@@ -136,7 +136,7 @@
This field is required.
- Optional description for country field.
+ Optional description for country field.
diff --git a/templates/form-elements/field-datepicker.html b/templates/form-elements/field-datepicker.html
index 5d4ccda5..904ce515 100644
--- a/templates/form-elements/field-datepicker.html
+++ b/templates/form-elements/field-datepicker.html
@@ -17,6 +17,6 @@
This field is required.
- Optional description for date field.
+ Optional description for date field.
\ No newline at end of file
diff --git a/templates/form-elements/field-email.html b/templates/form-elements/field-email.html
index 695a9d57..045823ba 100644
--- a/templates/form-elements/field-email.html
+++ b/templates/form-elements/field-email.html
@@ -11,6 +11,6 @@
This field is required.
- Optional description for email field.
+ Optional description for email field.
\ No newline at end of file
diff --git a/templates/form-elements/field-input.html b/templates/form-elements/field-input.html
index 91aab5c6..139fd9da 100644
--- a/templates/form-elements/field-input.html
+++ b/templates/form-elements/field-input.html
@@ -11,6 +11,6 @@
This field is required.
- Optional description for input field. 0 / 180
+ Optional description for input field. 0 / 180
\ No newline at end of file
diff --git a/templates/form-elements/field-name-multiple.html b/templates/form-elements/field-name-multiple.html
index d393bc86..baca8fa8 100644
--- a/templates/form-elements/field-name-multiple.html
+++ b/templates/form-elements/field-name-multiple.html
@@ -15,7 +15,7 @@
- Optional description for prefix field.
+ Optional description for prefix field.
@@ -36,7 +36,7 @@
This field is required.
- Optional description for first name field.
+ Optional description for first name field.
@@ -61,7 +61,7 @@
This field is required.
- Optional description for middle name field.
+ Optional description for middle name field.
@@ -82,7 +82,7 @@
This field is required.
- Optional description for last name field.
+ Optional description for last name field.
diff --git a/templates/form-elements/field-name-single.html b/templates/form-elements/field-name-single.html
index d5a9e873..08252792 100644
--- a/templates/form-elements/field-name-single.html
+++ b/templates/form-elements/field-name-single.html
@@ -11,6 +11,6 @@
This field is required.
- Optional description for name field.
+ Optional description for name field.
\ No newline at end of file
diff --git a/templates/form-elements/field-number.html b/templates/form-elements/field-number.html
index fbb46715..3871efae 100644
--- a/templates/form-elements/field-number.html
+++ b/templates/form-elements/field-number.html
@@ -13,6 +13,6 @@
This field is required.
- Optional description for number field.
+ Optional description for number field.
\ No newline at end of file
diff --git a/templates/form-elements/field-phone.html b/templates/form-elements/field-phone.html
index 8dc141d8..1575f6be 100644
--- a/templates/form-elements/field-phone.html
+++ b/templates/form-elements/field-phone.html
@@ -12,6 +12,6 @@
This field is required.
- Optional description for phone field.
+ Optional description for phone field.
\ No newline at end of file
diff --git a/templates/form-elements/field-textarea.html b/templates/form-elements/field-textarea.html
index 3bdc859e..9e8fb3c0 100644
--- a/templates/form-elements/field-textarea.html
+++ b/templates/form-elements/field-textarea.html
@@ -10,6 +10,6 @@
This field is required.
- Optional description for textarea field. 0 / 180
+ Optional description for textarea field. 0 / 180
\ No newline at end of file
diff --git a/templates/form-elements/field-website.html b/templates/form-elements/field-website.html
index c25eef1f..284ac7c1 100644
--- a/templates/form-elements/field-website.html
+++ b/templates/form-elements/field-website.html
@@ -11,6 +11,6 @@
This field is required.
- Optional description for website field.
+ Optional description for website field.
\ No newline at end of file