1
1
Fork 0

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
commit 3f57e16a1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 19 additions and 329 deletions

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) {

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}}

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}}

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>

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}}" />

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>

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");

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; }

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;*/

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();

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}}

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>

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" >

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");

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;
}

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;
}

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;
}

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; }

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;
}

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; }

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;
}