fix: improve dashboard accessibility and keyboard support

static/styles/partials/dashboard/dashboard-sidebar.css

@@ -16,6 +16,13 @@
   font-size:30px;
 }
 
+.sidebar-header a:focus-visible,
+.sidebar-items ul li a:focus-visible {
+  outline: 3px solid rgba(12, 126, 166, 0.35);
+  outline-offset: 3px;
+  border-radius: 8px;
+}
+
 .logo{
   width: 70px;
   padding-top: 5px;
@@ -73,6 +80,14 @@
   width: 250px;
 }
 
+.sidebar-items ul li a[aria-current="page"] {
+  background-color: #eef7fb;
+  color: #0c7ea6;
+  border-radius: 5px;
+  width: 250px;
+  font-weight: 700;
+}
+
 .sidebar-items ul li a .sidebar-icon {
   display: block;
   min-width: 60px;
@@ -94,4 +109,4 @@
 
 .bottom-section {
   top: 154px;
-} 
+} 

static/styles/partials/dashboard/navbar-dashboard.css

@@ -31,6 +31,19 @@
 .dashboard-navbar-dashboard-navbar-links li a {
     font-size:30px;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .dashboard-navbar-link-img {
   width: 35px;
 }
@@ -114,9 +127,21 @@
   background:transparent;
   font-size:25px;
   width: 45px;
+  border: 0;
+  cursor: pointer;
 }
 
 .dashboard-lang-switch {
   margin-left: 8px;
 }
 
+.dashboard-navbar-search-bar button:focus-visible,
+.dashboard-navbar-search-bar input:focus-visible,
+.dashboard-navbar-dashboard-navbar-links a:focus-visible,
+.dashboard-navbar-dropbtn:focus-visible,
+.lang-switch-button:focus-visible {
+  outline: 3px solid rgba(12, 126, 166, 0.35);
+  outline-offset: 3px;
+  border-radius: 8px;
+}
+

test/auth-form-routes.test.js

@@ -133,6 +133,19 @@ test("dashboard page renders with the i18n script and task board shell", async (
     assert.equal(response.status, 200);
     assert.match(body, /data-i18n-document-title="document\.dashboard"/);
     assert.match(body, /id="board-grid"/);
+    assert.match(body, /id="form-message" class="form-message" role="status" aria-live="polite"/);
+    assert.match(body, /<form action="#" class="dashboard-navbar-search-bar" role="search" aria-label="Dashboard search">/);
+    assert.match(body, /<label class="sr-only" for="dashboard-search"/);
+    assert.match(body, /id="dashboard-search" name="search" type="text"/);
+    assert.match(body, /aria-label="Help"/);
+    assert.match(body, /aria-label="Notifications"/);
+    assert.match(body, /aria-label="Open profile"/);
+    assert.match(body, /aria-label="Open dashboard navigation"/);
+    assert.match(body, /aria-current="page" aria-label="Projects"/);
+    assert.match(body, /aria-haspopup="menu"/);
+    assert.match(body, /aria-expanded="false"/);
+    assert.match(body, /aria-controls="dashboard-navbar-myDropdown"/);
+    assert.match(body, /id="dashboard-navbar-myDropdown" class="dashboard-navbar-dropdown-content" role="menu"/);
     assert.match(body, /static\/js\/i18n\.js/);
     assert.match(body, /id="cookie-banner"/);
   } finally {

views/partials/dashboard/dashboard-sidebar.ejs

@@ -5,62 +5,62 @@
         <img src="../../../static/assets/nav_logo.png" alt="" />
       </div>
       <div class="sidebar-title">Taskify</div>
-      <a href="#">
-        <i class="menuIcon material-icons">menu</i>
+      <a href="#" aria-label="Open dashboard navigation">
+        <i class="menuIcon material-icons" aria-hidden="true">menu</i>
       </a>
     </div>
     <div class="sidebar-items">
       <ul class="menu">
         <li class="sidebar-list">
-          <a href="#">
-            <span class="sidebar-icon"><i class="fa-solid fa-house"></i></span>
+          <a href="#" aria-label="Overview">
+            <span class="sidebar-icon"><i class="fa-solid fa-house" aria-hidden="true"></i></span>
             <span class="sidebar-name" data-i18n="dashboard.overview">Overview</span>
           </a>
         </li>
 
         <li class="sidebar-list">
-          <a href="#">
+          <a href="#" aria-label="Stats">
             <span class="sidebar-icon">
-              <i class="fa-solid fa-chart-simple"></i>
+              <i class="fa-solid fa-chart-simple" aria-hidden="true"></i>
             </span>
             <span class="sidebar-name" data-i18n="dashboard.stats">Stats</span>
           </a>
         </li>
 
         <li class="sidebar-list">
-          <a href="#">
-            <span class="sidebar-icon"><i class="fa-solid fa-folder-open"></i></span>
+          <a href="#" aria-current="page" aria-label="Projects">
+            <span class="sidebar-icon"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
             <span class="sidebar-name" data-i18n="dashboard.sidebarProjects">Projects</span>
           </a>
         </li>
 
         <li class="sidebar-list">
-          <a href="#">
-            <span class="sidebar-icon"><i class="fa-solid fa-comment"></i></span>
+          <a href="#" aria-label="Chat">
+            <span class="sidebar-icon"><i class="fa-solid fa-comment" aria-hidden="true"></i></span>
             <span class="sidebar-name" data-i18n="dashboard.chat">Chat</span>
           </a>
         </li>
 
         <li class="sidebar-list">
-          <a href="#">
+          <a href="#" aria-label="Calendar">
             <span class="sidebar-icon">
-              <i class="fa-solid fa-calendar-days"></i>
+              <i class="fa-solid fa-calendar-days" aria-hidden="true"></i>
             </span>
             <span class="sidebar-name" data-i18n="dashboard.calendar">Calendar</span>
           </a>
         </li>
         <div class="bottom-section">
           <li class="sidebar-list">
-            <a href="#">
-              <span class="sidebar-icon"><i class="fa-solid fa-gear"></i></span>
+            <a href="#" aria-label="Settings">
+              <span class="sidebar-icon"><i class="fa-solid fa-gear" aria-hidden="true"></i></span>
               <span class="sidebar-name" data-i18n="dashboard.settings">Settings</span>
             </a>
           </li>
 
           <li class="sidebar-list">
-            <a href="#">
+            <a href="#" aria-label="Log out">
               <span class="sidebar-icon">
-                <i class="fa-solid fa-right-from-bracket"></i>
+                <i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>
               </span>
               <span class="sidebar-name" data-i18n="dashboard.logout">Log out</span>
             </a>

views/partials/dashboard/navbar-dashboard.ejs

@@ -1,11 +1,12 @@
 <header class="dashboard-header-navbar">
   <div class="dashboard-navbar-container">
     <nav class="dashboard-navbar-dashboard-navbar">
-      <form action="#" class="dashboard-navbar-search-bar">
-        <button type="submit" data-i18n-aria-label="dashboard.search">
+      <form action="#" class="dashboard-navbar-search-bar" role="search" aria-label="Dashboard search">
+        <label class="sr-only" for="dashboard-search" data-i18n="dashboard.search">Search</label>
+        <button type="submit" data-i18n-aria-label="dashboard.search" aria-label="Search dashboard">
           <i class="fas fa-search"></i>
         </button>
-        <input type="text" data-i18n-placeholder="dashboard.search" placeholder="Search" />
+        <input id="dashboard-search" name="search" type="text" data-i18n-placeholder="dashboard.search" placeholder="Search" />
       </form>
       <div class="dashboard-navbar-dashboard-links">
         <ul class="dashboard-navbar-dashboard-navbar-links">
@@ -16,43 +17,67 @@
             </div>
           </li>
           <li>
-            <a href="#"><i class="fa-regular fa-circle-question"></i></a>
+            <a href="#" aria-label="Help">
+              <i class="fa-regular fa-circle-question" aria-hidden="true"></i>
+            </a>
           </li>
           <li>
-            <a href="#" class="dashboard-navbar-bell-icon"><i class="far fa-bell"></i></a>
+            <a href="#" class="dashboard-navbar-bell-icon" aria-label="Notifications">
+              <i class="far fa-bell" aria-hidden="true"></i>
+            </a>
           </li>
           <li>
             <div class="dashboard-navbar-dropdown">
-              <button onclick="myFunction()" class="dashboard-navbar-dropbtn"><span data-i18n="dashboard.user">Lord Voldemort</span> <i class="fa-solid fa-chevron-down"></i></button>
-              <div id="dashboard-navbar-myDropdown" class="dashboard-navbar-dropdown-content">
-                <a href="#" style="font-size: 16px;" data-i18n="dashboard.profile">Profile</a>
-                <a href="#" style="font-size: 16px;" data-i18n="dashboard.logout">Log Out</a>
+              <button
+                type="button"
+                class="dashboard-navbar-dropbtn"
+                aria-haspopup="menu"
+                aria-expanded="false"
+                aria-controls="dashboard-navbar-myDropdown"
+              >
+                <span data-i18n="dashboard.user">Lord Voldemort</span> <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
+              </button>
+              <div id="dashboard-navbar-myDropdown" class="dashboard-navbar-dropdown-content" role="menu">
+                <a href="#" style="font-size: 16px;" role="menuitem" data-i18n="dashboard.profile">Profile</a>
+                <a href="#" style="font-size: 16px;" role="menuitem" data-i18n="dashboard.logout">Log Out</a>
               </div>
             </div>
           </li>
           <li>
-            <a href="#"><i class="fa-regular fa-user dashboard-navbar-link-img dashboard-navbar-profile-icon"></i></a>
+            <a href="#" aria-label="Open profile">
+              <i class="fa-regular fa-user dashboard-navbar-link-img dashboard-navbar-profile-icon" aria-hidden="true"></i>
+            </a>
           </li>
         </ul>
       </div>
     </nav>
   </div>
 </header>
 <script>
-function myFunction() {
-  document.getElementById("dashboard-navbar-myDropdown").classList.toggle("dashboard-navbar-show");
+const dropdownButton = document.querySelector(".dashboard-navbar-dropbtn");
+const dropdownMenu = document.getElementById("dashboard-navbar-myDropdown");
+
+function closeDashboardDropdown() {
+  dropdownMenu.classList.remove("dashboard-navbar-show");
+  dropdownButton.setAttribute("aria-expanded", "false");
 }
 
-window.onclick = function(event) {
-  if (!event.target.matches(".dashboard-navbar-dropbtn")) {
-    var dropdowns = document.getElementsByClassName("dashboard-navbar-dropdown-content");
-    var i;
-    for (i = 0; i < dropdowns.length; i++) {
-      var openDropdown = dropdowns[i];
-      if (openDropdown.classList.contains("dashboard-navbar-show")) {
-        openDropdown.classList.remove("dashboard-navbar-show");
-      }
-    }
-  }
+function toggleDashboardDropdown() {
+  const isOpen = dropdownMenu.classList.toggle("dashboard-navbar-show");
+  dropdownButton.setAttribute("aria-expanded", String(isOpen));
 }
+
+dropdownButton.addEventListener("click", toggleDashboardDropdown);
+dropdownButton.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    closeDashboardDropdown();
+    dropdownButton.focus();
+  }
+});
+
+window.addEventListener("click", (event) => {
+  if (!event.target.closest(".dashboard-navbar-dropdown")) {
+    closeDashboardDropdown();
+  }
+});
 </script>