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() { ...@@ -99,6 +99,7 @@ define([], function() {
// } // }
option.selected = selected; option.selected = selected;
option.isSelected = selected; option.isSelected = selected;
option.required = this.required;
var template = nfRadio.channel( 'app' ).request( 'get:template', '#tmpl-nf-field-listcheckbox-option' ); var template = nfRadio.channel( 'app' ).request( 'get:template', '#tmpl-nf-field-listcheckbox-option' );
html += template( option ); html += template( option );
}, this ); }, this );
......
...@@ -60,6 +60,7 @@ define([], function() { ...@@ -60,6 +60,7 @@ define([], function() {
option.classes = this.classes; option.classes = this.classes;
option.currentValue = this.value; option.currentValue = this.value;
option.index = index; option.index = index;
option.required = this.required;
/* /*
* If we haven't edited this field yet, use the default checked * If we haven't edited this field yet, use the default checked
......
...@@ -27,7 +27,7 @@ define([], function() { ...@@ -27,7 +27,7 @@ define([], function() {
if ( this.value == num ) { if ( this.value == num ) {
checked = 'checked'; 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( html.appendChild(
document.createRange().createContextualFragment( htmlFragment ) document.createRange().createContextualFragment( htmlFragment )
); );
......
...@@ -191,6 +191,14 @@ define( [], function() { ...@@ -191,6 +191,14 @@ define( [], function() {
return ''; return '';
} }
}, },
maybeRequired: function() {
if ( 1 == this.required ) {
return 'required';
} else {
return '';
}
},
maybeDisableAutocomplete: function() { maybeDisableAutocomplete: function() {
if ( 1 == this.disable_browser_autocomplete ) { 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 @@ ...@@ -17,5 +17,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
...@@ -17,5 +17,8 @@ ...@@ -17,5 +17,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
<script id="tmpl-nf-field-checkbox" type="text/template"> <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> </script>
...@@ -17,5 +17,8 @@ ...@@ -17,5 +17,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
<script id="tmpl-nf-field-date" type="text/template"> <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> </script>
...@@ -17,5 +17,8 @@ ...@@ -17,5 +17,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
...@@ -16,5 +16,8 @@ ...@@ -16,5 +16,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
<script id='tmpl-nf-field-input' type='text/template'> <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>
<script id="tmpl-nf-field-label" type="text/template"> <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> </script>
...@@ -16,5 +16,8 @@ ...@@ -16,5 +16,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
...@@ -7,15 +7,29 @@ ...@@ -7,15 +7,29 @@
<script id='tmpl-nf-field-listcheckbox-option' type='text/template'> <script id='tmpl-nf-field-listcheckbox-option' type='text/template'>
<# if ( ! data.visible ) { return '' } #> <# if ( ! data.visible ) { return '' } #>
<li> <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"' : '' }}}> <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> 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> </li>
</script> </script>
<script id='tmpl-nf-field-listcheckbox-other' type='text/template'> <script id='tmpl-nf-field-listcheckbox-other' type='text/template'>
<li {{{ ( ! data.visible ) ? 'style="display:none"' : '' }}}> <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"' : '' }}}> <input type="checkbox"
<label>Other 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() }}} {{{ data.renderOtherText() }}}
</label> </label>
</li> </li>
......
...@@ -7,7 +7,19 @@ ...@@ -7,7 +7,19 @@
<script id='tmpl-nf-field-listradio-option' type='text/template'> <script id='tmpl-nf-field-listradio-option' type='text/template'>
<# if ( ! data.visible ) { return '' } #> <# if ( ! data.visible ) { return '' } #>
<li> <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> </li>
</script> </script>
......
<script id="tmpl-nf-field-listselect" type="text/template"> <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() }}} {{{ data.renderOptions() }}}
</select> </select>
<div for="nf-field-{{{ data.id }}}"></div> <div for="nf-field-{{{ data.id }}}"></div>
......
<script id="tmpl-nf-field-number" type="text/template"> <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>
<script id="tmpl-nf-field-password" type="text/template"> <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> <div class="nf-input-limit"></div>
</script> </script>
...@@ -7,5 +7,9 @@ ...@@ -7,5 +7,9 @@
<script id="tmpl-nf-field-starrating-star" type="text/template"> <script id="tmpl-nf-field-starrating-star" type="text/template">
<input type="radio" name="nf-field-{{{ data.id }}}" <input type="radio" name="nf-field-{{{ data.id }}}"
class="{{{ data.classes }}} nf-element" value="{{{ data.num }}}" class="{{{ data.classes }}} nf-element" value="{{{ data.num }}}"
{{{ data.checked }}}/> {{{ data.checked }}}
<# if( data.required ) { #>
required
<# } #>
/>
</script> </script>
...@@ -16,5 +16,8 @@ ...@@ -16,5 +16,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
<script id="tmpl-nf-field-textarea" type="text/template"> <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> </script>
<!-- Rich Text Editor Templates --> <!-- Rich Text Editor Templates -->
......
...@@ -18,5 +18,8 @@ ...@@ -18,5 +18,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </script>
...@@ -17,5 +17,8 @@ ...@@ -17,5 +17,8 @@
aria-invalid="false" aria-invalid="false"
aria-describedby="nf-error-{{{ data.id }}}" aria-describedby="nf-error-{{{ data.id }}}"
aria-labelledby="nf-label-field-{{{ data.id }}}"
{{{ data.maybeRequired() }}}
> >
</script> </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