Skip to content

Commit

Permalink
Improve eAccessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@peregrineshahin
peregrineshahin committed Aug 16, 2024
1 parent 12981ff commit 712e932
Show file tree
Hide file tree
Showing 23 changed files with 824 additions and 353 deletions.
6 changes: 6 additions & 0 deletions server/fishtest/static/js/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,7 @@ function handleSortingTables() {
const th = target;
const table = th.closest("table");
const body = table.querySelector("tbody");
const headers = table.querySelectorAll("th");
Array.from(body.querySelectorAll("tr"))
.sort(
comparer(
Expand All @@ -322,6 +323,11 @@ function handleSortingTables() {
}
body.append(tr);
});

headers.forEach((header) => {
header.removeAttribute("aria-sort");
});
th.setAttribute("aria-sort", this.asc ? "ascending" : "descending");
}
});
}
Expand Down
8 changes: 6 additions & 2 deletions server/fishtest/static/js/live_elo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,9 @@ async function followLive(testId) {

async function mainWorker() {
while (true) {
if (isTabFocused) {
const switchElement = document.getElementById("auto-refresh-switch");
const autoRefresh = switchElement.checked;
if (autoRefresh && isTabFocused) {
update();
}
await asyncSleep(20000);
Expand All @@ -210,7 +212,9 @@ async function followLive(testId) {
try {
const m = await fetchJson("/api/get_elo/" + testId + "?" + timestamp);
displayData(m);
if (m.args.sprt.state) return;
if (m.args.sprt.state) {
return;
}
} catch (e) {
console.log("Network error: " + e);
}
Expand Down
27 changes: 15 additions & 12 deletions server/fishtest/static/js/spsa.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,24 +254,25 @@ async function handleSPSA() {
}

for (let j = 0; j < spsaParams.length; j++) {
const dropdownItem = document.createElement("li");
const anchorItem = document.createElement("a");
anchorItem.className = "dropdown-item";
anchorItem.href = "javascript:";
anchorItem.param_id = j + 1;
anchorItem.append(spsaParams[j].name);
dropdownItem.append(anchorItem);
document.getElementById("dropdown_individual").append(dropdownItem);
const li = document.createElement("li");
const button = document.createElement("button");
button.className = "dropdown-item";
button.dataset.paramId = j + 1;
button.append(spsaParams[j].name);
li.append(button);
document.getElementById("dropdown_individual").append(li);
}

document
.getElementById("dropdown_individual")
.addEventListener("click", (e) => {
if (!e.target.matches("a")) return;
const { target } = e;
const param_id = target.param_id;
if (!target.classList.includes("dropdown-item")) {
return;
}
const paramId = target.dataset.paramId;
for (let i = 1; i < chart_data.getNumberOfColumns(); i++) {
updateColumnVisibility(i, i == param_id);
updateColumnVisibility(i, i == paramId);
}

viewAll = false;
Expand Down Expand Up @@ -304,7 +305,9 @@ async function handleSPSA() {
});

document.getElementById("btn_view_all").addEventListener("click", () => {
if (viewAll) return;
if (viewAll) {
return;
}
viewAll = true;
for (let i = 0; i < chart_data.getNumberOfColumns(); i++) {
updateColumnVisibility(i, true);
Expand Down
26 changes: 17 additions & 9 deletions server/fishtest/templates/actions.mak
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
import datetime
%>

<h2>Events Log</h2>
<h2 id="events-log-heading">Events Log</h2>

<script>
document.title = "Events Log | Stockfish Testing";
</script>

<form class="row mb-3">
<form class="row mb-3" aria-labelledby="events-log-heading" id="filter-form">
<div class="col-12 col-md-auto mb-3">
<label for="restrict" class="form-label">Show only</label>
<select id="restrict" class="form-select" name="action">
<select id="restrict" class="form-select" name="action" aria-controls="events-table">
<option value="">All</option>
<option value="new_run">New Run</option>
<option value="approve_run">Approve Run</option>
Expand Down Expand Up @@ -45,6 +45,7 @@
name="user"
list="users-list"
value="${username_param}"
aria-controls="events-table"
>
<datalist id="users-list">
% for user in request.userdb.get_users():
Expand All @@ -60,17 +61,20 @@
role="button"
data-bs-toggle="modal"
data-bs-target="#autoselect-modal"
aria-haspopup="dialog"
aria-label="Free text search information"
></i>
<div
class="modal fade"
id="autoselect-modal"
tabindex="-1"
aria-hidden="true"
aria-labelledby="autoselect-modal-label"
role="dialog"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Free text search information</h5>
<h5 class="modal-title" id="autoselect-modal-label">Free text search information</h5>
<button
type="button"
class="btn-close"
Expand Down Expand Up @@ -105,18 +109,19 @@
type="text"
name="text"
value="${text_param}"
aria-controls="events-table"
>
</div>

<div class="col-12 col-md-auto mb-3 d-flex align-items-end">
<button type="submit" class="btn btn-success w-100">Search</button>
<button type="submit" class="btn btn-success w-100" aria-label="Search">Search</button>
</div>
</form>

<%include file="pagination.mak" args="pages=pages"/>

<div class="table-responsive-lg">
<table class="table table-striped table-sm">
<table class="table table-striped table-sm" id="events-table" aria-label="Events Log Table">
<thead class="sticky-top">
<tr>
<th>Time</th>
Expand All @@ -133,8 +138,11 @@
<td>
<a
href="/actions?max_actions=1&amp;action=${action_param}&amp;user=${username_param|u,n}&amp;text=${text_param|u,n}&amp;before=${action['time']}&amp;run_id=${run_id_param}"
aria-label="Action performed at ${datetime.datetime.utcfromtimestamp(action['time']).strftime('%Y-%m-%d %H:%M:%S')}"
>
${datetime.datetime.utcfromtimestamp(action['time']).strftime(r"%y&#8209;%m&#8209;%d %H:%M:%S")|n}
<time datetime="${datetime.datetime.utcfromtimestamp(action['time']).strftime('%Y-%m-%dT%H:%M:%SZ')}">
${datetime.datetime.utcfromtimestamp(action['time']).strftime(r"%y&#8209;%m&#8209;%d %H:%M:%S")|n}
</time>
</a>
</td>
<td>${action['action']}</td>
Expand Down Expand Up @@ -168,7 +176,7 @@
% endfor
% if "idx" not in locals():
<tr>
<td colspan=20>No actions available</td>
<td colspan="8">No actions available</td>
</tr>
% endif
</tbody>
Expand Down
50 changes: 28 additions & 22 deletions server/fishtest/templates/base.mak
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css"
integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ=="
crossorigin="anonymous"
crossorigin="anonymous"
referrerpolicy="no-referrer"
>

Expand Down Expand Up @@ -53,7 +52,6 @@
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"
integrity="sha512-ToL6UYWePxjhDQKNioSi4AyJ5KkRxY+F1+Fi7Jgh0Hp5Kk2/s8FD7zusJDdonfe5B00Qw+B8taXxF6CFLnqNCw=="
crossorigin="anonymous"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>

Expand Down Expand Up @@ -93,10 +91,9 @@
<a
class="navbar-brand p-0 me-0 me-lg-2 d-flex align-items-center"
href="/"
aria-label="Bootstrap"
>
<div class="brand-logo d-inline me-lg-2"></div>
<p class="d-none d-lg-inline h-5 mb-0">Stockfish Testing Framework</p>
<div class="brand-logo d-inline me-lg-2" aria-label="Logo that links to home page"></div>
<p class="d-none d-lg-inline h-5 mb-0" aria-hidden="true">Stockfish Testing Framework</p>
</a>

<button
Expand All @@ -116,6 +113,7 @@
id="rightsidebar"
aria-labelledby="rightsidebarOffcanvasLabel"
data-bs-scroll="true"
role="dialog"
>
<div class="offcanvas-header px-4 pb-0">
<h5 class="offcanvas-title" id="rightsidebarOffcanvasLabel">
Expand All @@ -135,11 +133,12 @@

<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
% if request.authenticated_userid:
<li class="nav-item col-6 col-lg-auto order-lg-2">
<li class="nav-item col-6 col-lg-auto order-lg-2" role="menuitem">
<a
class="nav-link py-2 px-0 px-lg-2"
href="/tests/user/${request.authenticated_userid}"
title="My Tests"
aria-label="My Tests"
>
<i class="fa-solid fa-flask d-inline me-2 mx-lg-1"></i>
<span class="d-inline d-lg-none">My Tests</span>
Expand All @@ -150,6 +149,7 @@
class="nav-link py-2 px-0 px-lg-2"
href="/tests/run"
title="New Test"
aria-label="New Test"
>
<i class="fa-solid fa-plus d-inline me-2 mx-lg-1"></i>
<span class="d-inline d-lg-none">New Test</span>
Expand All @@ -160,6 +160,7 @@
class="nav-link py-2 px-0 px-lg-2"
href="/upload"
title="Upload Neural Network"
aria-label="Upload Neural Network"
>
<i
class="fa-solid fa-cloud-arrow-up d-inline me-2 mx-lg-1"
Expand All @@ -168,41 +169,37 @@
</a>
</li>
<li class="nav-item py-1 col-12 col-lg-auto order-lg-2">
<div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
<div class="vr d-none d-lg-flex h-100 mx-lg-2" aria-hidden="true"></div>
<hr class="d-lg-none">
</li>
<li class="nav-item col-6 col-lg-auto order-lg-2">
<a class="nav-link py-2 px-0 px-lg-2" href="/user"
><i class="fa-solid fa-user d-inline d-lg-none me-2"></i
>Profile
aria-label="Profile"><i class="fa-solid fa-user d-inline d-lg-none me-2"></i>Profile
</a>
</li>
<li class="nav-item col-6 col-lg-auto order-lg-2">
<a class="nav-link py-2 px-0 px-lg-2" href="/logout" id="logout"
<a class="nav-link py-2 px-0 px-lg-2" href="/logout" id="logout" aria-label="Logout"
><i
class="fa-solid fa-arrow-right-from-bracket d-inline d-lg-none me-2"
></i
>Logout
></i>Logout
</a>
</li>
% else:
<li class="nav-item col-6 col-lg-auto order-lg-2">
<a class="nav-link py-2 px-0 px-lg-2" href="/login"
<a class="nav-link py-2 px-0 px-lg-2" href="/login" aria-label="Login"
><i
class="fa-solid fa-arrow-right-to-bracket d-inline d-lg-none me-2"
></i
>Login</a
></i>Login</a
>
</li>
<li class="nav-item col-6 col-lg-auto order-lg-2">
<a class="nav-link py-2 px-0 px-lg-2" href="/signup"
><i class="fa-solid fa-user-plus d-inline d-lg-none me-2"></i
>Register</a
<a class="nav-link py-2 px-0 px-lg-2" href="/signup" aria-label="Register"
><i class="fa-solid fa-user-plus d-inline d-lg-none me-2"></i>Register</a
>
</li>
% endif
<li class="nav-item py-1 col-12 col-lg-auto order-lg-2">
<div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
<div class="vr d-none d-lg-flex h-100 mx-lg-2" aria-hidden="true"></div>
<hr class="d-lg-none">
</li>
<li
Expand All @@ -214,6 +211,7 @@
style="display: ${'none;' if request.cookies.get('theme') != 'dark' else 'inline-block;'}"
class="nav-link py-2 px-0 px-lg-2"
title="Light Theme"
aria-label="A toggle to light theme"
>
<i class="fa fa-sun"></i
><span class="d-inline d-lg-none ms-2">Light Theme</span>
Expand All @@ -223,6 +221,7 @@
style="display: ${'none;' if request.cookies.get('theme') == 'dark' else 'inline-block;'}"
class="nav-link py-2 px-0 px-lg-2"
title="Dark Theme"
aria-label="A toggle to light theme"
>
<i class="fa fa-moon"></i>
<span class="d-inline d-lg-none ms-2">Dark Theme</span>
Expand All @@ -240,6 +239,7 @@
class="offcanvas-lg offcanvas-start"
id="leftsidebar"
aria-labelledby="leftsidebarOffcanvasLabel"
role="dialog"
>
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title" id="leftsidebarOffcanvasLabel">
Expand All @@ -254,7 +254,7 @@
></button>
</div>
<div class="offcanvas-body pt-lg-2">
<nav class="links w-100">
<nav class="links w-100" aria-label="Sidebar navigation">
<ul class="links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-1">
<li class="links-group">
<strong
Expand Down Expand Up @@ -493,6 +493,9 @@
id="fallback_div"
class="alert alert-success alert-dismissible alert-success-non-transparent fixed-top"
style="display: none"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<span id="fallback">Notification!</span>
<button
Expand All @@ -513,6 +516,9 @@
id="error_div"
class="alert alert-danger alert-dismissible alert-danger-non-transparent fixed-top"
style="display: none"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<span id="error"></span>
<button
Expand All @@ -532,7 +538,7 @@
% if request.session.peek_flash('error'):
<% flash = request.session.pop_flash('error') %>
% for message in flash:
<div class="alert alert-danger alert-dismissible">
<div class="alert alert-danger alert-dismissible" role="alert" aria-live="assertive" aria-atomic="true">
${message}
<button
type="button"
Expand All @@ -546,7 +552,7 @@
% if request.session.peek_flash():
<% flash = request.session.pop_flash() %>
% for message in flash:
<div class="alert alert-success alert-dismissible">
<div class="alert alert-success alert-dismissible" role="alert" aria-live="assertive" aria-atomic="true">
${message}
<button
type="button"
Expand Down
Loading

0 comments on commit 712e932

Please sign in to comment.