improve eAccessibility

server/fishtest/static/js/application.js

@@ -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(
@@ -322,6 +323,11 @@ function handleSortingTables() {
           }
           body.append(tr);
         });
+
+      headers.forEach((header) => {
+        header.removeAttribute("aria-sort");
+      });
+      th.setAttribute("aria-sort", this.asc ? "ascending" : "descending");
     }
   });
 }

server/fishtest/static/js/live_elo.js

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

server/fishtest/templates/actions.mak

@@ -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>
@@ -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():
@@ -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"
@@ -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>
@@ -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>
@@ -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>

server/fishtest/templates/base.mak

@@ -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"
     >
 
@@ -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>
 
@@ -93,9 +91,9 @@
         <a
           class="navbar-brand p-0 me-0 me-lg-2 d-flex align-items-center"
           href="/"
-          aria-label="Bootstrap"
+          aria-label="Logo that links to home page"
         >
-          <div class="brand-logo d-inline me-lg-2"></div>
+          <div class="brand-logo d-inline me-lg-2" aria-hidden="true"></div>
           <p class="d-none d-lg-inline h-5 mb-0">Stockfish Testing Framework</p>
         </a>
 
@@ -116,6 +114,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">
@@ -135,11 +134,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>
@@ -150,6 +150,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>
@@ -160,6 +161,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"
@@ -168,41 +170,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
@@ -214,6 +212,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>
@@ -223,6 +222,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>
@@ -240,6 +240,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">
@@ -254,7 +255,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
@@ -493,6 +494,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
@@ -513,6 +517,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
@@ -532,7 +539,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"
@@ -546,7 +553,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"

server/fishtest/templates/contributors.mak

@@ -34,7 +34,7 @@
   })();
 </script>
 
-<h2>
+<h2 id="contributors-heading">
   Contributors
   % if 'monthly' in request.url:
     - Top Month
@@ -111,34 +111,38 @@
 
 <div class="row g-3 mb-1">
   <div class="col-12 col-md-auto">
-    <label class="form-label">Search</label>
+    <label class="form-label" for="search_contributors">Search</label>
     <input
       id="search_contributors"
       class="form-control"
       placeholder="Search some text"
       type="text"
+      aria-describedby="search-help"
     >
+    <div id="search-help" class="form-text">
+      Type to search in the contributors table.
+    </div>
   </div>
 </div>
 
 <div class="table-responsive-lg">
-  <table id="contributors_table" class="table table-striped table-sm">
+  <table id="contributors_table" class="table table-striped table-sm" aria-describedby="contributors-heading">
     <thead class="sticky-top">
       <tr>
-        <th></th>
-        <th>Username</th>
-        <th class="text-end">Last active</th>
-        <th class="text-end">Games/Hour</th>
-        <th class="text-end">CPU Hours</th>
-        <th class="text-end">Games played</th>
-        <th class="text-end">Tests submitted</th>
-        <th>Tests repository</th>
+        <th aria-sort="ascending">Rank</th>
+        <th aria-sort="none">Username</th>
+        <th aria-sort="none" class="text-end">Last active</th>
+        <th aria-sort="none" class="text-end">Games/Hour</th>
+        <th aria-sort="none" class="text-end">CPU Hours</th>
+        <th aria-sort="none" class="text-end">Games played</th>
+        <th aria-sort="none" class="text-end">Tests submitted</th>
+        <th aria-sort="none">Tests repository</th>
       </tr>
     </thead>
     <tbody>
       % for index, user in enumerate(users):
         <tr>
-          <td class="rank">${index + 1}</td>
+          <td class="rank text-center">${index + 1}</td>
           <td>
           % if approver:
             <a href="/user/${user['username']}">
@@ -163,7 +167,7 @@
 
       % if len(users) == 0:
         <tr>
-          <td colspan=20>No users exist</td>
+          <td colspan="8">No users exist</td>
         </tr>
       % endif
     </tbody>

server/fishtest/templates/elo_results.mak

@@ -71,7 +71,12 @@
 </%def>
 
 % if 'sprt' in run['args'] and 'Pending' not in results_info['info'][0]:
-  <a href="/tests/live_elo/${str(run['_id'])}" style="color: inherit;">
+  <a
+    href="/tests/live_elo/${str(run['_id'])}"
+    title="View live Elo for ${run['args']['new_tag']}"
+    aria-label="View live Elo for ${run['args']['new_tag']}"
+    style="color: inherit;"
+  >
 % endif
 % if show_gauge:
   <div id="chart_div_${str(run['_id'])}" style="width:90px;float:left;"></div>