Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve eAccessibility #2127

Closed
wants to merge 1 commit into from
Closed

Improve eAccessibility #2127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions server/fishtest/static/js/application.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading