Merge pull request #8236 from annando/a11y-1

Accessibility: A checkbox is a checkbox
2022.09-rc
Hypolite Petovan 2020-02-05 12:10:16 -05:00 zatwierdzone przez GitHub
commit 3f57e16a1a
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
24 zmienionych plików z 19 dodań i 329 usunięć

Wyświetl plik

@ -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',

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

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