From e77d5a68d80bf5b30acb35cbe5db1cccc1b14b89 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 25 Feb 2022 17:04:34 +0530 Subject: [PATCH 1/3] added id, and aria attributes in input field --- assets/js/public/form-field-unique.js | 54 ++++++++++++++++--- templates/form-elements/field-address.html | 8 +-- templates/form-elements/field-datepicker.html | 2 +- templates/form-elements/field-email.html | 2 +- templates/form-elements/field-input.html | 2 +- .../form-elements/field-name-multiple.html | 8 +-- .../form-elements/field-name-single.html | 2 +- templates/form-elements/field-number.html | 2 +- templates/form-elements/field-phone.html | 2 +- templates/form-elements/field-textarea.html | 2 +- templates/form-elements/field-website.html | 2 +- 11 files changed, 63 insertions(+), 23 deletions(-) diff --git a/assets/js/public/form-field-unique.js b/assets/js/public/form-field-unique.js index 69437340..c40c934b 100644 --- a/assets/js/public/form-field-unique.js +++ b/assets/js/public/form-field-unique.js @@ -12,7 +12,7 @@ const element = $( el ); const form = element.closest( '.forminator-custom-form' ); - if ( '' === form.prop( 'data-id' ) ) { + if ( '' === form.data( 'id' ) ) { return; } @@ -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 ); } }); } @@ -141,7 +181,7 @@ } if ( dscrp.length ) { - dscrp.prop( 'aria-describedby', idUnique ); + dscrp.attr( 'aria-describedby', idUnique ); } }); } @@ -170,7 +210,7 @@ } if ( dscrp.length ) { - dscrp.prop( 'aria-describedby', idUnique ); + dscrp.attr( 'aria-describedby', idUnique ); } }); } 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 From 3b42024807e0cba0e027a74555ac83d67d95224b Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 25 Feb 2022 17:20:15 +0530 Subject: [PATCH 2/3] added id, and aria attributes in input field --- assets/js/public/form-field-unique.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/public/form-field-unique.js b/assets/js/public/form-field-unique.js index c40c934b..fbc9edd9 100644 --- a/assets/js/public/form-field-unique.js +++ b/assets/js/public/form-field-unique.js @@ -12,7 +12,7 @@ const element = $( el ); const form = element.closest( '.forminator-custom-form' ); - if ( '' === form.data( 'id' ) ) { + if ( '' === form.prop( 'id' ) ) { return; } @@ -181,7 +181,7 @@ } if ( dscrp.length ) { - dscrp.attr( 'aria-describedby', idUnique ); + dscrp.prop( 'aria-describedby', idUnique ); } }); } @@ -210,7 +210,7 @@ } if ( dscrp.length ) { - dscrp.attr( 'aria-describedby', idUnique ); + dscrp.prop( 'aria-describedby', idUnique ); } }); } From 9a584695555612c5254586e8370aef95762b087a Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 25 Feb 2022 17:20:52 +0530 Subject: [PATCH 3/3] added id, and aria attributes in input field --- assets/js/public/form-field-unique.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/public/form-field-unique.js b/assets/js/public/form-field-unique.js index fbc9edd9..05f17f3b 100644 --- a/assets/js/public/form-field-unique.js +++ b/assets/js/public/form-field-unique.js @@ -12,7 +12,7 @@ const element = $( el ); const form = element.closest( '.forminator-custom-form' ); - if ( '' === form.prop( 'id' ) ) { + if ( '' === form.prop( 'data-id' ) ) { return; }