From 6c0f349de5578b546c3a914d7cb4622f4cca6b31 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 01:33:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhanced=20Dashboard?=
 =?UTF-8?q?=20accessibility=20and=20discoverability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added aria-controls and aria-expanded to #dashboardBtn in index.html.
- Added (D) shortcut hint to #dashboardBtn title.
- Implemented 'D' keyboard shortcut to toggle Dashboard in js/app.js.
- Synchronized aria-expanded state in openDashboard/closeDashboard functions.

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 index.html |  2 +-
 js/app.js  | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index dda1d88..0b438d6 100644
--- a/index.html
+++ b/index.html
@@ -92,7 +92,7 @@ <h1 class="brand-title">Ruh Al Tarikh</h1>
           <i class="fas fa-bookmark" aria-hidden="true"></i>
           <span class="badge" id="watchLaterBadge">0</span>
         </button>
-        <button id="dashboardBtn" class="action-btn" aria-label="View Dashboard" title="View Dashboard">
+        <button id="dashboardBtn" class="action-btn" aria-label="View Dashboard" title="View Dashboard (D)" aria-controls="dashboardModal" aria-expanded="false">
           <i class="fas fa-chart-line" aria-hidden="true"></i>
         </button>
         <a href="https://www.youtube.com/@Ruh-Al-Tarikh" target="_blank" rel="noopener noreferrer" class="action-btn" aria-label="Visit YouTube Channel" title="Visit YouTube Channel">
diff --git a/js/app.js b/js/app.js
index 1e6898a..07f9498 100644
--- a/js/app.js
+++ b/js/app.js
@@ -750,6 +750,7 @@ function openDashboard() {
     initAIAssistant();
     DOM.dashboardModal.style.display = 'block';
     DOM.dashboardModal.setAttribute('aria-hidden', 'false');
+    if (DOM.dashboardBtn) DOM.dashboardBtn.setAttribute('aria-expanded', 'true');
     Utils.trapFocus(DOM.dashboardModal);
     DOM.body.style.overflow = 'hidden';
     DOM.body.classList.add('modal-open');
@@ -759,6 +760,7 @@ function closeDashboard() {
     if (!DOM.dashboardModal) return;
     DOM.dashboardModal.style.display = "none";
     DOM.dashboardModal.setAttribute("aria-hidden", "true");
+    if (DOM.dashboardBtn) DOM.dashboardBtn.setAttribute('aria-expanded', 'false');
     DOM.body.style.overflow = "";
     DOM.body.classList.remove("modal-open");
     if (AppState.lastFocused) { AppState.lastFocused.focus(); AppState.lastFocused = null; }
@@ -1332,6 +1334,17 @@ function bindEvents() {
             toggleTheme();
         }
 
+        // Dashboard toggle
+        if (key === 'd') {
+            if (DOM.dashboardModal) {
+                if (DOM.dashboardModal.style.display === 'block') {
+                    closeDashboard();
+                } else {
+                    openDashboard();
+                }
+            }
+        }
+
         // Watch Later toggle
         if (key === 'b') {
             if (AppState.current) {