jepler/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Designate labels for checkbox in filters

Browse source 
This means that the user can hit anywhere on the big target like
"Adafruit" instead of only being able to click the small checkbox. It
may also improve accessibility.

Additionally, the mouse cursor over the checkbox and its label is
changed to the "pointer" to indicate an action is available by clicking.
This commit is contained in:
Jeff Epler 2022-11-06 13:01:29 -06:00
parent f693fa522a
commit 6f0b124e5b
No known key found for this signature in database
GPG key ID: D5BF15AB975AB4DE
4 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
assets/javascript/downloads.js
View file

@ -163,9 +163,13 @@ function setupManufacturers(downloads) {
checkbox.name = "manufacturer";
checkbox.className = 'filter-checkbox';
checkbox.value = manufacturer;
checkbox.id = 'manufacturer-' + manufacturer;
li.appendChild(checkbox);
li.appendChild(document.createTextNode(manufacturer));
var label = document.createElement('label');
label.htmlFor = checkbox.id;
label.innerText = manufacturer;
li.appendChild(label);
manufacturerList.appendChild(li);
});
@ -196,9 +200,14 @@ function setupMcufamilies(downloads) {
checkbox.name = "mcufamily";
checkbox.className = 'filter-checkbox';
checkbox.value = mcufamily;
checkbox.id = 'mcufamily-' + mcufamily;
li.appendChild(checkbox);
li.appendChild(document.createTextNode(mcufamily));
var label = document.createElement('label');
label.htmlFor = checkbox.id;
label.innerText = mcufamily;
li.appendChild(label);
mcufamilyList.appendChild(li);
}
@ -234,9 +243,14 @@ function setupFeatures(downloads) {
checkbox.name = "feature";
checkbox.className = 'filter-checkbox';
checkbox.value = feature;
checkbox.id = 'feature-' + feature;
li.appendChild(checkbox);
li.appendChild(document.createTextNode(feature));
var label = document.createElement('label');
label.htmlFor = checkbox.id;
label.innerText = feature;
li.appendChild(label);
featureList.appendChild(li);
});

4
assets/sass/base/_base.scss
View file

@ -42,3 +42,7 @@ fieldset {
font-weight: 500;
}
}
input.filter-checkbox, label {
cursor: pointer;
}

14
blinka.html
View file

@ -27,13 +27,13 @@ permalink: /blinka
<button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
</div>
<div>
<div class="manufacturers">
<div class="manufacturers filter-tall">
<fieldset>
<legend>Manufacturers</legend>
<ul class="content"></ul>
</fieldset>
</div>
<div class="features">
<div class="features filter-tall">
<fieldset>
<legend>Features</legend>
<ul class="content"></ul>
@ -43,11 +43,11 @@ permalink: /blinka
<fieldset>
<legend>Sort By</legend>
<ul class="content">
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
<li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)"> Date Added (Newest First)</li>
<li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)"> Date Added (Oldest First)</li>
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" id="sortby-downloads" checked><label for="sortby-downloads">Downloads</label></li>
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)" id="sortby-alpha-asc" ><label for="sortby-alpha-asc">Board Name (A to Z)</label></li>
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)" id="sortby-alpha-desc"><label for="sortby-alpha-desc">Board Name (Z to A)</label></li>
<li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)" id="sortby-date-desc"><label for="sortby-date-desc">Date Added (Newest First)</label></li>
<li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)" id="sortby-date-asc"><label for="sortby-date-asc">Date Added (Oldest First)</label></li>
</ul>
</fieldset>
</div>

10
downloads.html
View file

@ -49,11 +49,11 @@ excerpt: CircuitPython supported boards.
<fieldset>
<legend>Sort By</legend>
<ul class="content">
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
<li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)"> Date Added (Newest First)</li>
<li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)"> Date Added (Oldest First)</li>
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" id="sortby-downloads" checked><label for="sortby-downloads">Downloads</label></li>
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)" id="sortby-alpha-asc" ><label for="sortby-alpha-asc">Board Name (A to Z)</label></li>
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)" id="sortby-alpha-desc"><label for="sortby-alpha-desc">Board Name (Z to A)</label></li>
<li><input type="radio" name="sort-by" value="date-desc" aria-label="Date Added (Newest First)" id="sortby-date-desc"><label for="sortby-date-desc">Date Added (Newest First)</label></li>
<li><input type="radio" name="sort-by" value="date-asc" aria-label="Date Added (Oldest First)" id="sortby-date-asc"><label for="sortby-date-asc">Date Added (Oldest First)</label></li>
</ul>
</fieldset>
</div>