Palette: Accessible and Discoverable Interface Toggles

.Jules/palette.md

@@ -50,3 +50,7 @@
 ## 2025-05-14 - Social Sharing Implementation
 **Learning:** Placeholders for social sharing buttons significantly degrade UX when users expect to share discovered content. Standardizing these intents with popup windows (550x450) provides a "premium" feel while keeping users on the platform.
 **Action:** Always verify if sharing icons in modals are functional; if not, implement standardized platform intents using centered popups.
+
+## 2025-05-30 - Accessible Icon-Only Buttons
+**Learning:** Icon-only buttons (such as those in view controls or custom side headers) require both descriptive `aria-label` for screen reader accessibility and consistent `title` attributes to act as visual tooltips for mouse users. Failing to include these leads to poor discoverability and an inaccessible interactive state.
+**Action:** Always audit interface control buttons and ensure all icon-only buttons have descriptive `aria-label` and `title` attributes, keeping cryptographic shortcuts out of the screen reader label but included in the visual tooltip hint.

fix_app.py

@@ -1,35 +1,42 @@
-import sys
+from pathlib import Path
 
-filepath = 'js/app.js'
-with open(filepath, 'r') as f:
-    lines = f.readlines()
+filepath = Path("js/app.js")
+if filepath.exists():
+    with filepath.open("r") as f:
+        lines = f.readlines()
 
-# Part 1: DOM elements
-for i, line in enumerate(lines):
-    if "themeMenu: document.getElementById('themeMenu')," in line:
-        lines.insert(i + 1, "    episodesNavBtn: document.querySelector('[data-action=\"scroll-to-episodes\"]'),\n")
-        lines.insert(i + 2, "    episodesSection: document.getElementById('episodesSection'),\n")
-        break
+    # Part 1: DOM elements
+    for i, line in enumerate(lines):
+        if "themeMenu: document.getElementById('themeMenu')," in line:
+            lines.insert(
+                i + 1,
+                "    episodesNavBtn: document.querySelector('[data-action=\"scroll-to-episodes\"]'),\n",
+            )
+            lines.insert(
+                i + 2,
+                "    episodesSection: document.getElementById('episodesSection'),\n",
+            )
+            break
 
-# Part 2: bindEvents
-for i, line in enumerate(lines):
-    if "if (DOM.heroBtn) DOM.heroBtn.addEventListener('click'" in line:
-        scroll_listener = [
-            "    // Navbar Episodes Scroll\n",
-            "    if (DOM.episodesNavBtn && DOM.episodesSection) {\n",
-            "        DOM.episodesNavBtn.addEventListener('click', () => {\n",
-            "            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });\n",
-            "            if (document.body.classList.contains('mobile-nav-active')) {\n",
+    # Part 2: bindEvents
+    for i, line in enumerate(lines):
+        if "if (DOM.heroBtn) DOM.heroBtn.addEventListener('click'" in line:
+            scroll_listener = [
+                "    // Navbar Episodes Scroll\n",
+                "    if (DOM.episodesNavBtn && DOM.episodesSection) {\n",
+                "        DOM.episodesNavBtn.addEventListener('click', () => {\n",
+                "            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });\n",
+                "            if (document.body.classList.contains('mobile-nav-active')) {\n",
                 "                document.body.classList.remove('mobile-nav-active');\n",
-            "                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');\n",
-            "            }\n",
-            "        });\n",
-            "    }\n",
-            "\n"
-        ]
-        for idx, new_line in enumerate(scroll_listener):
-            lines.insert(i + idx, new_line)
-        break
+                "                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');\n",
+                "            }\n",
+                "        });\n",
+                "    }\n",
+                "\n",
+            ]
+            for idx, new_line in enumerate(scroll_listener):
+                lines.insert(i + idx, new_line)
+            break
 
-with open(filepath, 'w') as f:
-    f.writelines(lines)
+    with filepath.open("w") as f:
+        f.writelines(lines)

fix_deps.py

@@ -15,12 +15,12 @@
 # Maybe the CI is running against a different state of the PR?
 
 # Let's just make sure trigger-circleci-pipeline and circletui are in package.json if they are in the lockfile.
-if 'dependencies' not in pkg:
-    pkg['dependencies'] = {}
+if "dependencies" not in pkg:
+    pkg["dependencies"] = {}
 
-pkg['dependencies']['trigger-circleci-pipeline'] = '^1.12.1'
-pkg['dependencies']['circletui'] = '^1.0.3'
-pkg['dependencies']['@circleci/circleci-config-sdk'] = '^0.12.5'
+pkg["dependencies"]["trigger-circleci-pipeline"] = "^1.12.1"
+pkg["dependencies"]["circletui"] = "^1.0.3"
+pkg["dependencies"]["@circleci/circleci-config-sdk"] = "^0.12.5"
 
 with Path("package.json").open("w") as f:
     json.dump(pkg, f, indent=2)

fix_index.py

@@ -1,10 +1,20 @@
-with open('index.html', 'r') as f:
-    content = f.read()
+from pathlib import Path
 
-# Add title attribute to search button
-old_search = '<button class=\"nav-link\" id=\"searchToggleBtn\" aria-controls=\"searchSection\" aria-expanded=\"false\">'
-new_search = '<button class=\"nav-link\" id=\"searchToggleBtn\" aria-controls=\"searchSection\" aria-expanded=\"false\" title=\"Search (/)\">'
-content = content.replace(old_search, new_search)
+filepath = Path("index.html")
+if filepath.exists():
+    with filepath.open("r") as f:
+        content = f.read()
 
-with open('index.html', 'w') as f:
-    f.write(content)
+    # Add title attribute to search button
+    old_search = (
+        '<button class="nav-link" id="searchToggleBtn" '
+        'aria-controls="searchSection" aria-expanded="false">'
+    )
+    new_search = (
+        '<button class="nav-link" id="searchToggleBtn" '
+        'aria-controls="searchSection" aria-expanded="false" title="Search (/)">'
+    )
+    content = content.replace(old_search, new_search)
+
+    with filepath.open("w") as f:
+        f.write(content)

index.html

@@ -81,7 +81,7 @@ <h1 class="brand-title">Ruh Al Tarikh</h1>
           <i class="fas fa-film"></i>
           <span>Episodes</span>
         </button>
-        <button class="nav-link" id="searchToggleBtn" aria-controls="searchSection" aria-expanded="false" title="Search (/)">
+        <button class="nav-link" id="searchToggleBtn" aria-controls="searchSection" aria-expanded="false" title="Search (/)" aria-label="Search">
           <i class="fas fa-search"></i>
           <span>Search</span>
         </button>
@@ -115,7 +115,7 @@ <h1 class="brand-title">Ruh Al Tarikh</h1>
           <button class="mode-btn active px-3 py-1 text-[10px] rounded-md transition-all font-bold uppercase tracking-wider" data-mode="archive" aria-pressed="true">Archive</button>
           <button class="mode-btn px-3 py-1 text-[10px] rounded-md transition-all font-bold uppercase tracking-wider" data-mode="creator" aria-pressed="false">Studio</button>
         </div>
-        <button id="menuToggleBtn" class="menu-toggle" aria-label="Menu" aria-controls="navbar-nav" aria-expanded="false">
+        <button id="menuToggleBtn" class="menu-toggle" aria-label="Menu" title="Menu" aria-controls="navbar-nav" aria-expanded="false">
           <span></span>
           <span></span>
           <span></span>
@@ -168,7 +168,7 @@ <h2 class="hero-title" id="hero-title">Exploring Islamic History</h2>
               autocomplete="off"
             >
             <kbd class="search-kbd-hint">/</kbd>
-            <button id="clearSearch" class="search-clear" aria-label="Clear search" style="display: none;">
+            <button id="clearSearch" class="search-clear" aria-label="Clear search" title="Clear search" style="display: none;">
               <i class="fas fa-times"></i>
             </button>
             <div id="searchDropdown" class="search-dropdown"></div>
@@ -348,8 +348,8 @@ <h4 class="text-xs font-bold uppercase tracking-widest mb-3 text-primary">Live A
             <div class="flex items-center justify-between mb-6">
               <h3 class="font-display text-xl">Active Projects</h3>
               <div class="flex bg-black/20 p-1 rounded-lg">
-                <button id="listViewBtn" class="p-2 rounded-md active"><i class="fas fa-list"></i></button>
-                <button id="kanbanViewBtn" class="p-2 rounded-md"><i class="fas fa-th-large"></i></button>
+                <button id="listViewBtn" class="p-2 rounded-md active" aria-label="List View" title="List View"><i class="fas fa-list"></i></button>
+                <button id="kanbanViewBtn" class="p-2 rounded-md" aria-label="Kanban View" title="Kanban View"><i class="fas fa-th-large"></i></button>
               </div>
             </div>
             <div id="studioProjectsList" class="studio-projects-grid">
@@ -365,7 +365,7 @@ <h3 class="font-display text-xl">Active Projects</h3>
           <!-- Active Project Detail View -->
           <div id="active-project-view" class="studio-view hidden">
             <div class="flex items-center gap-4 mb-6">
-              <button id="backToProjectsBtn" class="action-btn"><i class="fas fa-arrow-left"></i></button>
+              <button id="backToProjectsBtn" class="action-btn" aria-label="Back to Projects" title="Back to Projects"><i class="fas fa-arrow-left"></i></button>
               <h3 id="current-project-title" class="font-display text-xl">New Project</h3>
             </div>