Skip to content

Commit de1459a

Browse files
phyllip3phyllip3
committed
add label association for input controls
1 parent 254ef2a commit de1459a

5 files changed

Lines changed: 58 additions & 6 deletions

File tree

‎static/js/search_tp53.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,50 @@
11
/* search_tp53.js */
22
'use strict';
33

4+
var syncChosenFromSelect = function (selectEl) {
5+
var s = selectEl;
6+
if (!s || !s.id) {
7+
return;
8+
}
9+
var container = document.getElementById(s.id + '_chosen');
10+
if (!container) {
11+
return;
12+
}
13+
var labelledBy = s.getAttribute('aria-labelledby');
14+
var ariaLabel = s.getAttribute('aria-label');
15+
var plTrim = s.getAttribute('data-placeholder');
16+
if (plTrim) {
17+
plTrim = String(plTrim).replace(/\s*\.\.\.\s*$/, '').trim();
18+
} else {
19+
plTrim = '';
20+
}
21+
var inputs = container.querySelectorAll('input');
22+
for (var i = 0; i < inputs.length; i++) {
23+
var inp = inputs[i];
24+
if (inp.type === 'hidden' || inp.type === 'checkbox' || inp.type === 'radio') {
25+
continue;
26+
}
27+
if (labelledBy) {
28+
inp.removeAttribute('aria-label');
29+
inp.setAttribute('aria-labelledby', labelledBy);
30+
} else if (ariaLabel) {
31+
inp.removeAttribute('aria-labelledby');
32+
inp.setAttribute('aria-label', ariaLabel);
33+
} else if (plTrim) {
34+
inp.removeAttribute('aria-labelledby');
35+
inp.setAttribute('aria-label', plTrim);
36+
}
37+
if (plTrim) {
38+
inp.setAttribute('placeholder', plTrim);
39+
}
40+
}
41+
};
42+
43+
var syncAllChosen = function () {
44+
$('select.chosen-select').each(function () {
45+
syncChosenFromSelect(this);
46+
});
47+
};
448

549
$(document).ready(function () {
650
if ($('table.result-table').length === 0)
@@ -18,6 +62,11 @@ $(document).ready(function () {
1862
search_contains: true,
1963
max_shown_results: 300
2064
});
65+
syncAllChosen();
66+
setTimeout(syncAllChosen, 0);
67+
$(document).on('chosen:updated', 'select.chosen-select', function () {
68+
syncChosenFromSelect(this);
69+
});
2170

2271
$('.topo-morph-select').on('change', function () {
2372
var topo_morph_assc = $(this).data('topo-morph-assc');

‎templates/form_fields_germline_mut_criteria.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h3 class="accordion-header" id="{{ id_prefix }}_heading_ind">
5151
<div class="accordion-body bg-light">
5252
<fieldset class="mb-3">
5353
<div class="row">
54-
<legend class="text-end col-form-label col-sm-3 pt-0">
54+
<legend id="{{ id_prefix }}_carriers_only_legend" class="text-end col-form-label col-sm-3 pt-0">
5555
Confirmed or Obligate Carriers Only
5656
<button class="btn btn-sm pe-0" type="button" data-bs-toggle="tooltip"
5757
data-bs-html="true"
@@ -66,7 +66,8 @@ <h3 class="accordion-header" id="{{ id_prefix }}_heading_ind">
6666
<input class="form-check-input" type="checkbox"
6767
id="{{ id_prefix }}_carriers_only" name="{{ id_prefix }}_carriers_only"
6868
value="checked">
69-
69+
<label class="form-check-label visually-hidden" for="{{ id_prefix }}_carriers_only">Confirmed
70+
or Obligate Carriers Only</label>
7071
</div>
7172
<input class="form-check-input " type="hidden"
7273
id="{{ id_prefix }}_confirmed_carriers" name="{{ id_prefix }}_carrier"
@@ -79,7 +80,7 @@ <h3 class="accordion-header" id="{{ id_prefix }}_heading_ind">
7980
</fieldset>
8081
<fieldset class="mb-3">
8182
<div class="row">
82-
<legend class="text-end col-form-label col-sm-3 pt-0">
83+
<legend id="{{ id_prefix }}_affected_only_legend" class="text-end col-form-label col-sm-3 pt-0">
8384
Cancer-Affected Individuals Only
8485
<button class="btn btn-sm pe-0" type="button" data-bs-toggle="tooltip"
8586
data-bs-html="true"
@@ -93,6 +94,8 @@ <h3 class="accordion-header" id="{{ id_prefix }}_heading_ind">
9394
<input class="form-check-input" type="checkbox"
9495
id="{{ id_prefix }}_affected_only" name="{{ id_prefix }}_affected_only"
9596
value="False">
97+
<label class="form-check-label visually-hidden" for="{{ id_prefix }}_affected_only">Cancer-Affected
98+
Individuals Only</label>
9699
</div>
97100
</div>
98101
</div>

‎templates/form_fields_mutation.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@
273273
</legend>
274274
<div class="col-md-8 col-sm-6">
275275

276-
<select name="{{ id_prefix }}_mut_base" class="form-select" aria-label="Default select example">
276+
<select name="{{ id_prefix }}_mut_base" class="form-select" aria-label="Mutant base (coding)">
277277
<option value="" selected>Any</option>
278278
<option id="{{ id_prefix }}_mut_base_a" value="A">A</option>
279279
<option id="{{ id_prefix }}_mut_base_c" value="C">C</option>

‎templates/form_fields_reference.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<select data-placeholder="Click + button to look up and add reference" multiple
2020
class="form-select form-control-sm ref-select chosen-select" id="{{ id_prefix }}_refs_input_select"
2121
name="{{ id_prefix }}_refs_list" disabled
22-
aria-label="Example select with button addon">
22+
aria-label="Selected references">
2323
</select>
2424
</div>
2525
<div class="col-sm-3 col-md-2 text-start">

‎templates/view_data.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h1 class="fw-bold p-2 my-0">View Data: <span class="fw-light">{{ title|safe }}<
3434
<th data-bs-toggle="tooltip"
3535
data-bs-placement="top"
3636
title="Select all rows on this page">
37-
<input class="form-check-input check-all" type="checkbox">
37+
<input class="form-check-input check-all" type="checkbox" aria-label="Select all rows on this page">
3838
</th>
3939
{% for col_name in columns %}
4040
<th {% if col_name=='PubMedLink' %} class="external_link" {% endif %}>{{ col_name }}</th>

0 commit comments

Comments
 (0)