Commit 28c100ce authored by Eric Windham's avatar Eric Windham Committed by Kenny Hall

More accessibility changes (#3542)

* initial changes for accessibility

* more accessibility changes

* data and number fields accessibility stuff

* finishing up accessibility stuff

* Updated templates (where possible) to use a helper function instead of using an if check on each template.
parent c4122906
......@@ -99,6 +99,7 @@ define([], function() {
// }
option.selected = selected;
option.isSelected = selected;
option.required = this.required;
var template = nfRadio.channel( 'app' ).request( 'get:template', '#tmpl-nf-field-listcheckbox-option' );
html += template( option );
}, this );
......
......@@ -60,6 +60,7 @@ define([], function() {
option.classes = this.classes;
option.currentValue = this.value;
option.index = index;
option.required = this.required;
/*
* If we haven't edited this field yet, use the default checked
......
......@@ -27,7 +27,7 @@ define([], function() {
if ( this.value == num ) {
checked = 'checked';
}
var htmlFragment = template( { id: this.id, classes: this.classes, num: num, checked: checked } );
var htmlFragment = template( { id: this.id, classes: this.classes, num: num, checked: checked, required: this.required } );
html.appendChild(
document.createRange().createContextualFragment( htmlFragment )
);
......
......@@ -191,6 +191,14 @@ define( [], function() {
return '';
}
},
maybeRequired: function() {
if ( 1 == this.required ) {
return 'required';
} else {
return '';
}
},
maybeDisableAutocomplete: function() {
if ( 1 == this.disable_browser_autocomplete ) {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -17,5 +17,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
......@@ -17,5 +17,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
<script id="tmpl-nf-field-checkbox" type="text/template">
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" type="checkbox" value="1" {{{ data.maybeDisabled() }}}{{{ data.maybeChecked() }}}>
<input id="nf-field-{{{ data.id }}}"
name="nf-field-{{{ data.id }}}"
aria-describedby="nf-error-{{{ data.id }}}"
class="{{{ data.renderClasses() }}} nf-element"
type="checkbox"
value="1" {{{ data.maybeDisabled() }}}{{{ data.maybeChecked() }}}
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
......@@ -17,5 +17,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
<script id="tmpl-nf-field-date" type="text/template">
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element datepicker" type="date" value="{{{ data.value }}}" {{{ data.renderPlaceholder() }}}>
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element datepicker"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
type="date" value="{{{ data.value }}}" {{{ data.renderPlaceholder() }}}>
</script>
......@@ -17,5 +17,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
......@@ -16,5 +16,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
<script id='tmpl-nf-field-input' type='text/template'>
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" type="text" value="{{{ data.value }}}" {{{ data.renderPlaceholder() }}} {{{ data.maybeDisabled() }}}>
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" type="text" value="{{{ data.value }}}" {{{ data.renderPlaceholder() }}} {{{ data.maybeDisabled() }}}
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
<script id="tmpl-nf-field-label" type="text/template">
<div class="nf-field-label"><label for="nf-field-{{{ data.id }}}" class="{{{ data.renderLabelClasses() }}}">{{{ data.label }}} {{{ ( 'undefined' != typeof data.required && 1 == data.required ) ? '<span class="ninja-forms-req-symbol">*</span>' : '' }}} {{{ data.maybeRenderHelp() }}}</label></div>
<div class="nf-field-label"><label for="nf-field-{{{ data.id }}}"
id="nf-label-field-{{{ data.id }}}"
class="{{{ data.renderLabelClasses() }}}">{{{ data.label }}} {{{ ( 'undefined' != typeof data.required && 1 == data.required ) ? '<span class="ninja-forms-req-symbol">*</span>' : '' }}} {{{ data.maybeRenderHelp() }}}</label></div>
</script>
......@@ -16,5 +16,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
......@@ -7,15 +7,29 @@
<script id='tmpl-nf-field-listcheckbox-option' type='text/template'>
<# if ( ! data.visible ) { return '' } #>
<li>
<input type="checkbox" id="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}" name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element {{{ ( data.isSelected ) ? ' nf-checked' : '' }}}" value="{{{ data.value }}}" {{{ ( data.isSelected ) ? 'checked="checked"' : '' }}}>
<label for="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}" class="{{{ ( data.isSelected ) ? 'nf-checked-label' : '' }}}">{{{ data.label }}}</label>
<input type="checkbox" id="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}" name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element {{{ ( data.isSelected ) ? ' nf-checked' : '' }}}" value="{{{ data.value }}}" {{{ ( data.isSelected ) ? 'checked="checked"' : '' }}}
aria-labelledby="nf-label-field-{{{ data.fieldID }}}-{{{ data.index }}}"
<# if( data.required ) { #>
required
<# } #>
>
<label for="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}"
id="nf-label-field-{{{ data.fieldID }}}-{{{ data.index }}}"
class="{{{ ( data.isSelected ) ? 'nf-checked-label' : '' }}}">{{{ data.label }}}</label>
</li>
</script>
<script id='tmpl-nf-field-listcheckbox-other' type='text/template'>
<li {{{ ( ! data.visible ) ? 'style="display:none"' : '' }}}>
<input type="checkbox" name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element" value="nf-other" {{{ ( ! data.valueFound ) ? 'checked="checked"' : '' }}}>
<label>Other
<input type="checkbox"
id="nf-field-{{{ data.fieldID }}}-other"
name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element" value="nf-other" {{{ ( ! data.valueFound ) ? 'checked="checked"' : '' }}}
aria-labelledby="nf-label-field-{{{ data.fieldID }}}-other"
<# if( data.required ) { #>
required
<# } #>
>
<label id="nf-label-field-{{{ data.fieldID }}}-other">Other
{{{ data.renderOtherText() }}}
</label>
</li>
......
......@@ -7,7 +7,19 @@
<script id='tmpl-nf-field-listradio-option' type='text/template'>
<# if ( ! data.visible ) { return '' } #>
<li>
<input type="radio" id="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}" name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element {{{ ( data.value == data.currentValue || 1 == data.selected ) ? 'nf-checked' : '' }}}" value="{{{ data.value }}}" {{{ ( data.value == data.currentValue || 1 == data.selected ) ? 'checked="checked"' : '' }}}> <label for="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}" class="{{{ ( data.value == data.currentValue || 1 == data.selected ) ? 'nf-checked-label' : '' }}}">{{{ data.label }}}</label>
<input type="radio"
id="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}"
name="nf-field-{{{ data.fieldID }}}"
class="{{{ data.classes }}} nf-element {{{ ( data.value == data.currentValue || 1 == data.selected ) ? 'nf-checked' : '' }}}" value="{{{ data.value }}}" {{{ ( data.value == data.currentValue || 1 == data.selected ) ? 'checked="checked"' : '' }}}
aria-labelledby="nf-label-class-field-{{{ data.fieldID }}}-{{{ data.index }}}"
<# if( data.required ) { #>
required
<# } #>
>
<label for="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}"
id="nf-label-class-field-{{{ data.fieldID }}}-{{{ data.index }}}" {{{ ( data.value == data.currentValue || 1
==
data.selected ) ? 'nf-checked-label' : '' }}}">{{{ data.label }}}</label>
</li>
</script>
......
<script id="tmpl-nf-field-listselect" type="text/template">
<select id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" {{{ data.renderOtherAttributes() }}}>
<select id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" {{{ data.renderOtherAttributes() }}}
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
{{{ data.renderOptions() }}}
</select>
<div for="nf-field-{{{ data.id }}}"></div>
......
<script id="tmpl-nf-field-number" type="text/template">
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" type="number" value="{{{ data.value }}}" min="{{{ data.num_min }}}" max="{{{ data.num_max }}}" step="{{{ data.num_step }}}" {{{ data.renderPlaceholder() }}}>
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
type="number" value="{{{ data.value }}}" min="{{{ data.num_min }}}" max="{{{ data.num_max }}}" step="{{{ data.num_step }}}" {{{ data.renderPlaceholder() }}}>
</script>
<script id="tmpl-nf-field-password" type="text/template">
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" type="password" value="{{{ data.value }}}" {{{ data.renderPlaceholder() }}} {{{ data.maybeDisabled() }}} {{{ data.maybeDisableAutocomplete() }}} {{{ data.maybeInputLimit() }}}>
<input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" type="password" value="{{{ data.value }}}" {{{ data.renderPlaceholder() }}} {{{ data.maybeDisabled() }}} {{{ data.maybeDisableAutocomplete() }}} {{{ data.maybeInputLimit() }}}
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
<div class="nf-input-limit"></div>
</script>
......@@ -7,5 +7,9 @@
<script id="tmpl-nf-field-starrating-star" type="text/template">
<input type="radio" name="nf-field-{{{ data.id }}}"
class="{{{ data.classes }}} nf-element" value="{{{ data.num }}}"
{{{ data.checked }}}/>
{{{ data.checked }}}
<# if( data.required ) { #>
required
<# } #>
/>
</script>
......@@ -16,5 +16,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
<script id="tmpl-nf-field-textarea" type="text/template">
<textarea id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" {{{ data.renderPlaceholder() }}}" {{{ data.maybeDisabled() }}} {{{ data.maybeDisableAutocomplete() }}} {{{ data.maybeInputLimit() }}}>{{{ data.value }}}</textarea>
<textarea id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" {{{ data.renderPlaceholder() }}}" {{{ data.maybeDisabled() }}} {{{ data.maybeDisableAutocomplete() }}} {{{ data.maybeInputLimit() }}}
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
{{{ data.value }}}
</textarea>
</script>
<!-- Rich Text Editor Templates -->
......
......@@ -18,5 +18,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
......@@ -17,5 +17,8 @@
aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
>
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment