added aria describedby elements refering to field help to the input templates

This commit is contained in:
Tobias Diekershoff 2016-04-04 08:10:27 +02:00
parent b9d9ffbd01
commit 1ee405c9c3
14 changed files with 28 additions and 27 deletions

View file

@ -1,5 +1,5 @@
<div class='field checkbox' id='div_id_{{$field.0}}'> <div class='field checkbox' id='div_id_{{$field.0}}'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}> <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip' value="1" {{if $field.2}}checked="checked"{{/if}}>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -7,12 +7,12 @@
{{foreach $field.4 as $opt=>$val}}<option value="{{$val|escape:'html'}}">{{/foreach}} {{foreach $field.4 as $opt=>$val}}<option value="{{$val|escape:'html'}}">{{/foreach}}
</datalist> *}} </datalist> *}}
<input id="id_{{$field.0}}" type="text" value="{{$field.2}}"> <input id="id_{{$field.0}}" type="text" value="{{$field.2}}" aria-describedby='{{$field.0}}_tip'>
<select id="select_{{$field.0}}" onChange="$('#id_{{$field.0}}').val($(this).val())"> <select id="select_{{$field.0}}" onChange="$('#id_{{$field.0}}').val($(this).val())">
<option value="">{{$field.5}}</option> <option value="">{{$field.5}}</option>
{{foreach $field.4 as $opt=>$val}}<option value="{{$val|escape:'html'}}">{{$val}}</option>{{/foreach}} {{foreach $field.4 as $opt=>$val}}<option value="{{$val|escape:'html'}}">{{$val}}</option>{{/foreach}}
</select> </select>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class='field input' id='wrapper_{{$field.0}}'> <div class='field input' id='wrapper_{{$field.0}}'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<input{{if $field.6 eq 'email'}} type='email'{{elseif $field.6 eq 'url'}} type='url'{{/if}} name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"{{if $field.4 eq 'required'}} required{{/if}}{{if $field.5 eq 'autofocus'}} autofocus{{/if}}> <input{{if $field.6 eq 'email'}} type='email'{{elseif $field.6 eq 'url'}} type='url'{{/if}} name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"{{if $field.4 eq 'required'}} required{{/if}}{{if $field.5 eq 'autofocus'}} autofocus{{/if}} aria-describedby='{{$field.0}}_tip'>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -2,6 +2,6 @@
<div class='field checkbox'> <div class='field checkbox'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3|escape:'html'}}" {{if $field.2}}checked="true"{{/if}}> <input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3|escape:'html'}}" {{if $field.2}}checked="true"{{/if}} aria-describedby='{{$field.0}}_tip'>
<span class='field_help'>{{$field.4}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.4}}</span>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class='field input openid' id='wrapper_{{$field.0}}'> <div class='field input openid' id='wrapper_{{$field.0}}'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<input name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"> <input name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}" aria-describedby='{{$field.0}}_tip'>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class='field password' id='wrapper_{{$field.0}}'> <div class='field password' id='wrapper_{{$field.0}}'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<input type='password' name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"{{if $field.4 eq 'required'}} required{{/if}}{{if $field.5 eq 'autofocus'}} autofocus{{/if}}> <input type='password' name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"{{if $field.4 eq 'required'}} required{{/if}}{{if $field.5 eq 'autofocus'}} autofocus{{/if}} aria-describedby='{{$field.0}}_tip'>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -2,6 +2,6 @@
<div class='field radio'> <div class='field radio'>
<label for='id_{{$field.0}}_{{$field.2}}'>{{$field.1}}</label> <label for='id_{{$field.0}}_{{$field.2}}'>{{$field.1}}</label>
<input type="radio" name='{{$field.0}}' id='id_{{$field.0}}_{{$field.2}}' value="{{$field.2|escape:'html'}}" {{if $field.4}}checked="true"{{/if}}> <input type="radio" name='{{$field.0}}' id='id_{{$field.0}}_{{$field.2}}' value="{{$field.2|escape:'html'}}" {{if $field.4}}checked="true"{{/if}} aria-describedby={{$field.0}}_tip'>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -2,6 +2,6 @@
<div class='field richtext'> <div class='field richtext'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<textarea name='{{$field.0}}' id='id_{{$field.0}}' class="fieldRichtext">{{$field.2}}</textarea> <textarea name='{{$field.0}}' id='id_{{$field.0}}' class="fieldRichtext" aria-describedby='{{$field.0}}_tip'>{{$field.2}}</textarea>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -2,8 +2,8 @@
<div class='field select'> <div class='field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<select name='{{$field.0}}' id='id_{{$field.0}}'> <select name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip'>
{{foreach $field.4 as $opt=>$val}}<option value="{{$opt|escape:'html'}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} {{foreach $field.4 as $opt=>$val}}<option value="{{$opt|escape:'html'}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
</select> </select>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -2,8 +2,8 @@
<div class='field select'> <div class='field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<select name='{{$field.0}}' id='id_{{$field.0}}'> <select name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip'>
{{$field.4}} {{$field.4}}
</select> </select>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -2,6 +2,6 @@
<div class='field textarea'> <div class='field textarea'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<textarea name='{{$field.0}}' id='id_{{$field.0}}'>{{$field.2}}</textarea> <textarea name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip'>{{$field.2}}</textarea>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -2,9 +2,9 @@
{{if $field.5}}<script>$(function(){ previewTheme($("#id_{{$field.0}}")[0]); });</script>{{/if}} {{if $field.5}}<script>$(function(){ previewTheme($("#id_{{$field.0}}")[0]); });</script>{{/if}}
<div class='field select'> <div class='field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<select name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.5}}onchange="previewTheme(this);"{{/if}} > <select name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.5}}onchange="previewTheme(this);"{{/if}} aria-describedby='{{$field.0}}_tip'>
{{foreach $field.4 as $opt=>$val}}<option value="{{$opt|escape:'html'}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}} {{foreach $field.4 as $opt=>$val}}<option value="{{$opt|escape:'html'}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
</select> </select>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
{{if $field.5}}<div id="theme-preview"></div>{{/if}} {{if $field.5}}<div id="theme-preview"></div>{{/if}}
</div> </div>

View file

@ -2,7 +2,7 @@
<div class='field yesno'> <div class='field yesno'>
<label for='id_{{$field.0}}'>{{$field.1}}</label> <label for='id_{{$field.0}}'>{{$field.1}}</label>
<div class='onoff' id="id_{{$field.0}}_onoff"> <div class='onoff' id="id_{{$field.0}}_onoff">
<input type="hidden" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}"> <input type="hidden" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2|escape:'html'}}" aria-describedby='{{$field.0}}_tip'>
<a href="#" class='off'> <a href="#" class='off'>
{{if $field.4}}{{$field.4.0}}{{else}}OFF{{/if}} {{if $field.4}}{{$field.4.0}}{{else}}OFF{{/if}}
</a> </a>
@ -10,5 +10,5 @@
{{if $field.4}}{{$field.4.1}}{{else}}ON{{/if}} {{if $field.4}}{{$field.4.1}}{{else}}ON{{/if}}
</a> </a>
</div> </div>
<span class='field_help'>{{$field.3}}</span> <span class='field_help' role='tooltip' id='{{$field.0}}_tip'>{{$field.3}}</span>
</div> </div>

View file

@ -1,6 +1,7 @@
<form action="{{$dest_url}}" method="post" > <form action="{{$dest_url}}" method="post" >
<fieldset>
<input type="hidden" name="auth-params" value="login" /> <input type="hidden" name="auth-params" value="login" />
<div id="login_standard"> <div id="login_standard">
@ -29,7 +30,7 @@
<input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" /> <input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" />
{{/foreach}} {{/foreach}}
</fieldset>
</form> </form>