Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2024-12-23 16:00:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #8236 from annando/a11y-1

Browse source 
Accessibility: A checkbox is a checkbox
This commit is contained in:
Hypolite Petovan 2020-02-05 12:10:16 -05:00 committed by GitHub
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', 'type',
define the field used in form, and the type of data. 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', 'label',

11
doc/smarty3-templates.md
View file

@ -178,14 +178,3 @@ Field parameter:
2. Current text for the box, 2. Current text for the box,
3. Help text for the input 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, 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"]; $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')) { if (DI::config()->get('system', 'publish_all')) {
$profile_in_dir = '<input type="hidden" name="profile_in_directory" value="1" />'; $profile_in_dir = '<input type="hidden" name="profile_in_directory" value="1" />';
} else { } else {

17
view/js/main.js
View file

@ -160,23 +160,6 @@ $(function() {
$(textarea).trigger('change'); $(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 */ /* popup menus */
function close_last_popup_menu() { function close_last_popup_menu() {
if (last_popup_menu) { if (last_popup_menu) {

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

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

2
view/templates/dfrn_request.tpl
View file

@ -51,7 +51,7 @@
<div id="dfrn-request-info-wrapper" > <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"> <p id="doiknowyou">
{{$does_know}} {{$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"> <div class="settings-content-block">
{{foreach $f.1 as $fcat}} {{foreach $f.1 as $fcat}}
{{include file="field_yesno.tpl" field=$fcat}} {{include file="field_checkbox.tpl" field=$fcat}}
{{/foreach}} {{/foreach}}
<div class="settings-submit-wrapper" > <div class="settings-submit-wrapper" >
<input type="submit" name="submit" class="settings-features-submit" value="{{$submit}}" /> <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"> <div id="profile-edit-hide-friends-wrapper">
{{include file="field_yesno.tpl" field=$yesno}} {{include file="field_checkbox.tpl" field=$yesno}}
</div> </div>

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

@ -72,10 +72,10 @@
<div style="display: none;"> <div style="display: none;">
<div id="advanced-expire-popup" style="width:auto;height:auto;overflow:auto;"> <div id="advanced-expire-popup" style="width:auto;height:auto;overflow:auto;">
<h3>{{$expire.advanced}}</h3> <h3>{{$expire.advanced}}</h3>
{{include file="field_yesno.tpl" field=$expire.items}} {{include file="field_checkbox.tpl" field=$expire.items}}
{{include file="field_yesno.tpl" field=$expire.notes}} {{include file="field_checkbox.tpl" field=$expire.notes}}
{{include file="field_yesno.tpl" field=$expire.starred}} {{include file="field_checkbox.tpl" field=$expire.starred}}
{{include file="field_yesno.tpl" field=$expire.network_only}} {{include file="field_checkbox.tpl" field=$expire.network_only}}
</div> </div>
</div> </div>
@ -130,7 +130,7 @@
{{include file="field_checkbox.tpl" field=$email_textonly}} {{include file="field_checkbox.tpl" field=$email_textonly}}
{{include file="field_checkbox.tpl" field=$detailed_notif}} {{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> <script>
(function(){ (function(){
var elm = $("#id_{{$desktop_notifications.0}}_onoff"); 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; } .hidden { display: none!important; }
.field.radio .field_help { margin-left: 0px; } .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: 1px solid transparent;
border-color: #ccc; 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 { .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
padding: .275rem .75rem; padding: .275rem .75rem;
/*font-size: .875rem;*/ /*font-size: .875rem;*/

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

@ -230,24 +230,6 @@ $(document).ready(function(){
toggleDropdownText(this); 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 // Change the css class while clicking on the switcher elements
$(".toggle label, .toggle .toggle-handle").click(function(event){ $(".toggle label, .toggle .toggle-handle").click(function(event){
event.preventDefault(); event.preventDefault();

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

@ -52,7 +52,7 @@
<div id="dfrn-request-info-wrapper" > <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"> <p id="doiknowyou">
{{$does_know}} {{$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 id="{{$g}}-settings-content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{$g}}-settings-title">
<div class="section-content-tools-wrapper"> <div class="section-content-tools-wrapper">
{{foreach $f.1 as $fcat}} {{foreach $f.1 as $fcat}}
{{include file="field_yesno.tpl" field=$fcat}} {{include file="field_checkbox.tpl" field=$fcat}}
{{/foreach}} {{/foreach}}
<div class="form-group pull-right settings-submit-wrapper" > <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> <h4 class="modal-title">{{$expire.advanced}}</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
{{include file="field_yesno.tpl" field=$expire.items}} {{include file="field_checkbox.tpl" field=$expire.items}}
{{include file="field_yesno.tpl" field=$expire.notes}} {{include file="field_checkbox.tpl" field=$expire.notes}}
{{include file="field_yesno.tpl" field=$expire.starred}} {{include file="field_checkbox.tpl" field=$expire.starred}}
{{include file="field_yesno.tpl" field=$expire.network_only}} {{include file="field_checkbox.tpl" field=$expire.network_only}}
</div> </div>
</div> </div>
</div> </div>
@ -192,7 +192,7 @@
</div> </div>
*}} *}}
{{include file="field_yesno.tpl" field=$desktop_notifications}} {{include file="field_checkbox.tpl" field=$desktop_notifications}}
<script type="text/javascript"> <script type="text/javascript">
(function(){ (function(){
var elm = $("#id_{{$desktop_notifications.0}}_onoff"); 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; margin-left: 200px;
color: #999999; 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 { .field .hidden {
display: none!important; display: none!important;
} }

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

@ -1925,35 +1925,6 @@ ul.tabs li .active {
margin-left: 200px; margin-left: 200px;
color: #999999; 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 { .field .hidden {
display: none!important; display: none!important;
} }

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

@ -1925,35 +1925,6 @@ ul.tabs li .active {
margin-left: 200px; margin-left: 200px;
color: #999999; 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 { .field .hidden {
display: none!important; display: none!important;
} }

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

@ -1216,36 +1216,6 @@ ul.tabs {
color: @FieldHelpColor; 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; } .hidden { display: none!important; }
&.radio .field_help { margin-left: 0; } &.radio .field_help { margin-left: 0; }

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

@ -3919,37 +3919,6 @@ margin-left: 0px;
color: #666666; 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 { .field .radio .field_help {
margin-left: 0px; margin-left: 0px;
} }
@ -4653,10 +4622,6 @@ div #datebrowse-sidebar.widget {
margin-bottom: 5px !important; margin-bottom: 5px !important;
} }
.onoff {
margin-right: 10px;
}
.settings-heading { .settings-heading {
margin: 25px 0 25px 0; 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, .field > * { box-sizing: border-box; }
.field label { width: 100%; float: none; display: block; } .field label { width: 100%; float: none; display: block; }
.field input, .field textarea, .field select { max-width: 100%; width: 100%; } .field input, .field textarea, .field select { max-width: 100%; width: 100%; }
.field.yesno .onoff,
.field.checkbox input { width: auto; float: right; } .field.checkbox input { width: auto; float: right; }
.field.yesno label,
.field.checkbox label { width: 70%; float: left; } .field.checkbox label { width: 70%; float: left; }
.field .field_help { margin: 0; } .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; margin-left: 200px;
color: #666666; 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 { .field .hidden {
display: none!important; display: none!important;
} }