Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♿️ aria(input): added aria attributes for accessibility. #19

Open
wants to merge 3 commits into
base: development
Choose a base branch
from
+60 −20
Open

♿️ aria(input): added aria attributes for accessibility. #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e77d5a6
added id, and aria attributes in input field
creador-dev Feb 25, 2022
3b42024
added id, and aria attributes in input field
creador-dev Feb 25, 2022
9a58469
added id, and aria attributes in input field
creador-dev Feb 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 44 additions & 4 deletions assets/js/public/form-field-unique.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
});
}
Expand All @@ -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 );
}
});
}
Expand Down
8 changes: 4 additions & 4 deletions templates/form-elements/field-address.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-street">Optional description for street address field.</span>
<span class="forminator-description">Optional description for street address field.</span>

</div>

Expand Down Expand Up @@ -61,7 +61,7 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-city">Optional description for city field.</span>
<span class="forminator-description">Optional description for city field.</span>

</div>

Expand Down Expand Up @@ -107,7 +107,7 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-zip">Optional description for postal code field.</span>
<span class="forminator-description">Optional description for postal code field.</span>

</div>

Expand Down Expand Up @@ -136,7 +136,7 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-country">Optional description for country field.</span>
<span class="forminator-description">Optional description for country field.</span>

</div>

Expand Down
2 changes: 1 addition & 1 deletion templates/form-elements/field-datepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-datepicker">Optional description for date field.</span>
<span class="forminator-description">Optional description for date field.</span>

</div>
2 changes: 1 addition & 1 deletion templates/form-elements/field-email.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="field-email">Optional description for email field.</span>
<span class="forminator-description">Optional description for email field.</span>

</div>
2 changes: 1 addition & 1 deletion templates/form-elements/field-input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-input">Optional description for input field. <span>0 / 180</span></span>
<span class="forminator-description">Optional description for input field. <span>0 / 180</span></span>

</div>
8 changes: 4 additions & 4 deletions templates/form-elements/field-name-multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<option>Prof.</option>
</select>

<span class="forminator-description" aria-describedby="field-prefix">Optional description for prefix field.</span>
<span class="forminator-description">Optional description for prefix field.</span>

</div>

Expand All @@ -36,7 +36,7 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="field-first-name">Optional description for first name field.</span>
<span class="forminator-description">Optional description for first name field.</span>

</div>

Expand All @@ -61,7 +61,7 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="field-middle-name">Optional description for middle name field.</span>
<span class="forminator-description">Optional description for middle name field.</span>

</div>

Expand All @@ -82,7 +82,7 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="field-middle-name">Optional description for last name field.</span>
<span class="forminator-description">Optional description for last name field.</span>

</div>

Expand Down
2 changes: 1 addition & 1 deletion templates/form-elements/field-name-single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="field-name-single">Optional description for name field.</span>
<span class="forminator-description">Optional description for name field.</span>

</div>
2 changes: 1 addition & 1 deletion templates/form-elements/field-number.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-number">Optional description for number field.</span>
<span class="forminator-description">Optional description for number field.</span>

</div>
2 changes: 1 addition & 1 deletion templates/form-elements/field-phone.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-phone">Optional description for phone field.</span>
<span class="forminator-description">Optional description for phone field.</span>

</div>
2 changes: 1 addition & 1 deletion templates/form-elements/field-textarea.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="field-textarea">Optional description for textarea field. <span>0 / 180</span></span>
<span class="forminator-description">Optional description for textarea field. <span>0 / 180</span></span>

</div>
2 changes: 1 addition & 1 deletion templates/form-elements/field-website.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@

<span class="forminator-error-message" aria-hidden="true">This field is required.</span>

<span class="forminator-description" aria-describedby="forminator-field-website">Optional description for website field.</span>
<span class="forminator-description">Optional description for website field.</span>

</div>