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 @@ - Optional description for street address field. + Optional description for street address field. @@ -61,7 +61,7 @@ - Optional description for city field. + Optional description for city field. @@ -107,7 +107,7 @@ - Optional description for postal code field. + Optional description for postal code field. @@ -136,7 +136,7 @@ - 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 @@ - 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 @@ - 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 @@ - 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 @@ - Optional description for first name field. + Optional description for first name field. @@ -61,7 +61,7 @@ - Optional description for middle name field. + Optional description for middle name field. @@ -82,7 +82,7 @@ - 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 @@ - 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 @@ - 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 @@ - 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 @@ - 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 @@ - Optional description for website field. + Optional description for website field. \ No newline at end of file