clones/friendica
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #8236 from annando/a11y-1 

Accessibility: A checkbox is a checkbox
This commit is contained in:
Hypolite Petovan 2020-02-05 12:10:16 -05:00 committed by GitHub
parent e37b1c8794 cf9070c396
commit 3f57e16a1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 19 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/AddonStorageBackend.md
View File

@ -52,7 +52,7 @@ The info array for each option is defined as:
'type',
define the field used in form, and the type of data.
one of 'checkbox', 'combobox', 'custom', 'datetime', 'input', 'intcheckbox', 'password', 'radio', 'richtext', 'select', 'select_raw', 'textarea', 'yesno'
one of 'checkbox', 'combobox', 'custom', 'datetime', 'input', 'intcheckbox', 'password', 'radio', 'richtext', 'select', 'select_raw', 'textarea'
'label',

11
doc/smarty3-templates.md
View File

@ -178,14 +178,3 @@ Field parameter:
2. Current text for the box,
3. Help text for the input box.
4. if set to "required" modern browser will check that this input box is filled when submitting the form,
### field_yesno.tpl
A button that has two states *yes* or *no*.
Field parameter:
0. Name of the input field,
1. Label for the button,
2. Current value,
3. Help text for the button
4. if set to an array of two values, these two will be used, otherwise "off" and "on".

2
mod/settings.php
View File

@ -1075,7 +1075,7 @@ function settings_content(App $a)
$openid_field = ['openid_url', DI::l10n()->t('OpenID:'), $openid, DI::l10n()->t("\x28Optional\x29 Allow this OpenID to login to this account."), "", "readonly", "url"];
}
$opt_tpl = Renderer::getMarkupTemplate("field_yesno.tpl");
$opt_tpl = Renderer::getMarkupTemplate("field_checkbox.tpl");
if (DI::config()->get('system', 'publish_all')) {
$profile_in_dir = '<input type="hidden" name="profile_in_directory" value="1" />';
} else {

17
view/js/main.js
View File

@ -160,23 +160,6 @@ $(function() {
$(textarea).trigger('change');
});
/* setup onoff widgets */
$(".onoff input").each(function() {
val = $(this).val();
id = $(this).attr("id");
$("#"+id+"_onoff ." + (val == 0 ? "on":"off")).addClass("hidden");
});
$(".onoff > a").click(function(event) {
event.preventDefault();
var input = $(this).siblings("input");
var val = 1-input.val();
var id = input.attr("id");
$("#"+id+"_onoff ." + (val == 0 ? "on":"off")).addClass("hidden");
$("#"+id+"_onoff ." + (val == 1 ? "on":"off")).removeClass("hidden");
input.val(val);
});
/* popup menus */
function close_last_popup_menu() {
if (last_popup_menu) {

4
view/templates/admin/features.tpl
View File

@ -11,8 +11,8 @@
<div class="settings-content-block">
{{foreach $f.1 as $fcat}}
<div class="settings-block">
{{include file="field_yesno.tpl" field=$fcat.0}}
{{include file="field_yesno.tpl" field=$fcat.1}}
{{include file="field_checkbox.tpl" field=$fcat.0}}
{{include file="field_checkbox.tpl" field=$fcat.1}}
</div>
{{/foreach}}

2
view/templates/dfrn_request.tpl
View File

@ -51,7 +51,7 @@
<div id="dfrn-request-info-wrapper" >
{{include file="field_yesno.tpl" field=$does_know_you}}
{{include file="field_checkbox.tpl" field=$does_know_you}}
<!--
<p id="doiknowyou">
{{$does_know}}

16
view/templates/field_yesno.tpl
View File

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

2
view/templates/settings/features.tpl
View File

@ -10,7 +10,7 @@
<div class="settings-content-block">
{{foreach $f.1 as $fcat}}
{{include file="field_yesno.tpl" field=$fcat}}
{{include file="field_checkbox.tpl" field=$fcat}}
{{/foreach}}
<div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-features-submit" value="{{$submit}}" />

2
view/templates/settings/profile/hide-friends.tpl
View File

@ -1,3 +1,3 @@
<div id="profile-edit-hide-friends-wrapper">
{{include file="field_yesno.tpl" field=$yesno}}
{{include file="field_checkbox.tpl" field=$yesno}}
</div>

10
view/templates/settings/settings.tpl
View File

@ -72,10 +72,10 @@
<div style="display: none;">
<div id="advanced-expire-popup" style="width:auto;height:auto;overflow:auto;">
<h3>{{$expire.advanced}}</h3>
{{include file="field_yesno.tpl" field=$expire.items}}
{{include file="field_yesno.tpl" field=$expire.notes}}
{{include file="field_yesno.tpl" field=$expire.starred}}
{{include file="field_yesno.tpl" field=$expire.network_only}}
{{include file="field_checkbox.tpl" field=$expire.items}}
{{include file="field_checkbox.tpl" field=$expire.notes}}
{{include file="field_checkbox.tpl" field=$expire.starred}}
{{include file="field_checkbox.tpl" field=$expire.network_only}}
</div>
</div>
@ -130,7 +130,7 @@
{{include file="field_checkbox.tpl" field=$email_textonly}}
{{include file="field_checkbox.tpl" field=$detailed_notif}}
{{include file="field_yesno.tpl" field=$desktop_notifications}}
{{include file="field_checkbox.tpl" field=$desktop_notifications}}
<script>
(function(){
var elm = $("#id_{{$desktop_notifications.0}}_onoff");

30
view/theme/duepuntozero/style.css
View File

@ -2802,36 +2802,6 @@ aside input[type='text'] {
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border:1px solid #666666;
background-image:url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color:#666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color:#204A87;
padding-right: 40px;
background-position: right center;
background-color: #D7E3F1;
color: #204A87;
text-align: left;
}
.hidden { display: none!important; }
.field.radio .field_help { margin-left: 0px; }

9
view/theme/frio/css/style.css
View File

@ -312,15 +312,6 @@ a.btn:hover {
border: 1px solid transparent;
border-color: #ccc;
}
.field.yesno:hover .toggle {
border-color: $link_hover_color;
transition: all 0.25s ease-in-out;
}
.field.yesno:hover .toggle-handle {
background-color: #fff;
transition: all 0.25s ease-in-out;
}
.form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
padding: .275rem .75rem;
/*font-size: .875rem;*/

18
view/theme/frio/js/theme.js
View File

@ -230,24 +230,6 @@ $(document).ready(function(){
toggleDropdownText(this);
});
/* setup onoff widgets */
// Add the correct class to the switcher according to the input
// value (On/Off)
$(".toggle input").each(function(){
// Get the value of the input element
val = $(this).val();
id = $(this).attr("id");
// The css classes for "on" and "off"
onstyle = "btn-primary";
offstyle = "btn-default off";
// Add the correct class in dependence of input value (On/Off)
toggleclass = (val == 0 ? offstyle : onstyle);
$("#"+id+"_onoff").addClass(toggleclass);
});
// Change the css class while clicking on the switcher elements
$(".toggle label, .toggle .toggle-handle").click(function(event){
event.preventDefault();

2
view/theme/frio/templates/dfrn_request.tpl
View File

@ -52,7 +52,7 @@
<div id="dfrn-request-info-wrapper" >
{{include file="field_yesno.tpl" field=$does_know_you}}
{{include file="field_checkbox.tpl" field=$does_know_you}}
<!--
<p id="doiknowyou">
{{$does_know}}

21
view/theme/frio/templates/field_yesno.tpl
View File

@ -1,21 +0,0 @@
<div class="field yesno">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<div class="onoff toggle btn btn-xs pull-right" id="id_{{$field.0}}_onoff">
<div class="switchlabel toggle-group">
<input type="hidden" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.2 nofilter}}" aria-describedby="{{$field.0}}_tip">
<label class="btn btn-default btn-xs active toggle-off">
{{if $field.4}}{{$field.4.0}}{{else}}OFF{{/if}}
</label>
<label class="btn btn-primary btn-xs toggle-on">
{{if $field.4}}{{$field.4.1}}{{else}}ON{{/if}}
</label>
<span class="toggle-handle btn btn-default btn-xs"></span>
</div>
</div>
{{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3 nofilter}}</span>
{{/if}}
</div>
<div class="clear"></div>

2
view/theme/frio/templates/settings/features.tpl
View File

@ -19,7 +19,7 @@
<div id="{{$g}}-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{$g}}-settings-title">
<div class="section-content-tools-wrapper">
{{foreach $f.1 as $fcat}}
{{include file="field_yesno.tpl" field=$fcat}}
{{include file="field_checkbox.tpl" field=$fcat}}
{{/foreach}}
<div class="form-group pull-right settings-submit-wrapper" >

10
view/theme/frio/templates/settings/settings.tpl
View File

@ -113,10 +113,10 @@
<h4 class="modal-title">{{$expire.advanced}}</h4>
</div>
<div class="modal-body">
{{include file="field_yesno.tpl" field=$expire.items}}
{{include file="field_yesno.tpl" field=$expire.notes}}
{{include file="field_yesno.tpl" field=$expire.starred}}
{{include file="field_yesno.tpl" field=$expire.network_only}}
{{include file="field_checkbox.tpl" field=$expire.items}}
{{include file="field_checkbox.tpl" field=$expire.notes}}
{{include file="field_checkbox.tpl" field=$expire.starred}}
{{include file="field_checkbox.tpl" field=$expire.network_only}}
</div>
</div>
</div>
@ -192,7 +192,7 @@
</div>
*}}
{{include file="field_yesno.tpl" field=$desktop_notifications}}
{{include file="field_checkbox.tpl" field=$desktop_notifications}}
<script type="text/javascript">
(function(){
var elm = $("#id_{{$desktop_notifications.0}}_onoff");

29
view/theme/quattro/dark/style.css
View File

@ -1925,35 +1925,6 @@ ul.tabs li .active {
margin-left: 200px;
color: #999999;
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border: 1px solid #666666;
background-image: url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color: #666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color: #204A87;
padding-right: 40px;
background-position: right center;
background-color: #D7E3F1;
color: #204A87;
text-align: left;
}
.field .hidden {
display: none!important;
}

29
view/theme/quattro/green/style.css
View File

@ -1925,35 +1925,6 @@ ul.tabs li .active {
margin-left: 200px;
color: #999999;
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border: 1px solid #666666;
background-image: url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color: #666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color: #204A87;
padding-right: 40px;
background-position: right center;
background-color: #D7E3F1;
color: #204A87;
text-align: left;
}
.field .hidden {
display: none!important;
}

29
view/theme/quattro/lilac/style.css
View File

@ -1925,35 +1925,6 @@ ul.tabs li .active {
margin-left: 200px;
color: #999999;
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border: 1px solid #666666;
background-image: url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color: #666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color: #204A87;
padding-right: 40px;
background-position: right center;
background-color: #D7E3F1;
color: #204A87;
text-align: left;
}
.field .hidden {
display: none!important;
}

30
view/theme/quattro/quattro.less
View File

@ -1216,36 +1216,6 @@ ul.tabs {
color: @FieldHelpColor;
}
.onoff {
float: left;
width: 80px;
}
.onoff a {
display: block;
border:1px solid #666666;
background-image:url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.onoff .off {
border-color:#666666;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.onoff .on {
border-color:#204A87;
padding-right: 40px;
background-position: right center;
background-color: #D7E3F1;
color: #204A87;
text-align: left;
}
.hidden { display: none!important; }
&.radio .field_help { margin-left: 0; }

35
view/theme/smoothly/style.css
View File

@ -3919,37 +3919,6 @@ margin-left: 0px;
color: #666666;
}
.field .onoff {
float: left;
width: 80px;
}
.field .onoff a {
display: block;
border: 1px solid #c1c1c1;
background-image: url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
height: 16px;
text-decoration: none;
}
.field .onoff .off {
border-color: #c1c1c1;
padding-left: 40px;
background-position: left center;
background-color: #cccccc;
color: #666666;
text-align: right;
}
.field .onoff .on {
border-color: #c1c1c1;
padding-right: 40px;
background-position: right center;
background-color: #1873a2;
color: #FFFFFF;
text-align: left;
}
.field .radio .field_help {
margin-left: 0px;
}
@ -4653,10 +4622,6 @@ div #datebrowse-sidebar.widget {
margin-bottom: 5px !important;
}
.onoff {
margin-right: 10px;
}
.settings-heading {
margin: 25px 0 25px 0;
}

2
view/theme/vier/mobile.css
View File

@ -266,9 +266,7 @@ select:focus {
.field, .field > * { box-sizing: border-box; }
.field label { width: 100%; float: none; display: block; }
.field input, .field textarea, .field select { max-width: 100%; width: 100%; }
.field.yesno .onoff,
.field.checkbox input { width: auto; float: right; }
.field.yesno label,
.field.checkbox label { width: 70%; float: left; }
.field .field_help { margin: 0; }

34
view/theme/vier/style.css
View File

@ -2272,40 +2272,6 @@ ul.tabs li .active, span.pager_current a {
margin-left: 200px;
color: #666666;
}
.field .onoff {
float: left;
width: 80px;
margin-right:1em;
}
.field .onoff a {
display: block;
border: 1px solid #666666;
background-image: url("../../../images/onoff.jpg");
background-repeat: no-repeat;
padding: 4px 2px 2px 2px;
font-size:14px;
height: 16px;
line-height:16px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-radius:4px;
}
.field .onoff .off {
border-color: #B0B0B0;
padding-left: 36px;
background-position: left center;
background-color: #cccccc;
color: #9C9C9C;
}
.field .onoff .on {
font-weight:bold;
border-color: #8EB8EE;
padding-right: 36px;
background-position: right center;
background-color: #D7E3F1;
color: #36c;
}
.field .hidden {
display: none!important;
}