From 02ef73dd9d8b93aed88f821eb9afae914198155c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 5 Jul 2026 03:40:42 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20Logo=20"Bac?=
 =?UTF-8?q?k=20to=20Top"=20UX,=20accessibility,=20and=20code=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Navbar logo (.navbar-brand) now functions as a "Back to Top" trigger with smooth scroll.
- Added accessibility attributes (role, tabindex, aria-label, title) to the logo.
- Logo interaction also closes the mobile navigation menu.
- Added 'title' attribute to "Clear Search" button for improved discoverability.
- Cleaned up significant code duplication in js/app.js (episodesNavBtn, episodesSection).
- Improved accessibility of the navbar brand label to include the site name.
- Verified changes with Playwright and ensured existing tests pass.

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 index.html |   4 +-
 js/app.js  | 110 +++++++++--------------------------------------------
 2 files changed, 21 insertions(+), 93 deletions(-)

diff --git a/index.html b/index.html
index 0b438d6..23aca80 100644
--- a/index.html
+++ b/index.html
@@ -64,7 +64,7 @@
   <!-- Navigation Header -->
   <header class="navbar">
     <div class="navbar-container">
-      <div class="navbar-brand">
+      <div class="navbar-brand" id="navbarBrand" role="button" tabindex="0" title="Back to Top" aria-label="Ruh Al Tarikh - Back to Top">
         <div class="brand-icon">
           <svg viewBox="0 0 100 100" width="32" height="32" fill="currentColor">
             <path d="M50 10 L90 90 L10 90 Z"/>
@@ -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>
diff --git a/js/app.js b/js/app.js
index 5abcb24..1ac45c0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -100,20 +100,7 @@ const DOM = {
     themeMenu: document.getElementById('themeMenu'),
     episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
     episodesSection: document.getElementById('episodesSection'),
-    episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
-    episodesSection: document.getElementById('episodesSection'),
-    episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
-    episodesSection: document.getElementById('episodesSection'),
-    episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
-    episodesSection: document.getElementById('episodesSection'),
-    episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
-    episodesSection: document.getElementById('episodesSection'),
-    episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
-    episodesSection: document.getElementById('episodesSection'),
-    episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
-    episodesSection: document.getElementById('episodesSection'),
-    episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
-    episodesSection: document.getElementById('episodesSection'),
+    navbarBrand: document.getElementById('navbarBrand'),
     menuToggle: document.getElementById('menuToggleBtn'),
     scrollToTop: document.getElementById('scrollToTop'),
 
@@ -1044,83 +1031,6 @@ function bindEvents() {
         });
     }
 
-    // Navbar Episodes Scroll
-    if (DOM.episodesNavBtn && DOM.episodesSection) {
-        DOM.episodesNavBtn.addEventListener('click', () => {
-            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });
-            if (document.body.classList.contains('mobile-nav-active')) {
-                document.body.classList.remove('mobile-nav-active');
-                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    }
-
-    // Navbar Episodes Scroll
-    if (DOM.episodesNavBtn && DOM.episodesSection) {
-        DOM.episodesNavBtn.addEventListener('click', () => {
-            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });
-            if (document.body.classList.contains('mobile-nav-active')) {
-                document.body.classList.remove('mobile-nav-active');
-                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    }
-
-    // Navbar Episodes Scroll
-    if (DOM.episodesNavBtn && DOM.episodesSection) {
-        DOM.episodesNavBtn.addEventListener('click', () => {
-            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });
-            if (document.body.classList.contains('mobile-nav-active')) {
-                document.body.classList.remove('mobile-nav-active');
-                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    }
-
-    // Navbar Episodes Scroll
-    if (DOM.episodesNavBtn && DOM.episodesSection) {
-        DOM.episodesNavBtn.addEventListener('click', () => {
-            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });
-            if (document.body.classList.contains('mobile-nav-active')) {
-                document.body.classList.remove('mobile-nav-active');
-                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    }
-
-    // Navbar Episodes Scroll
-    if (DOM.episodesNavBtn && DOM.episodesSection) {
-        DOM.episodesNavBtn.addEventListener('click', () => {
-            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });
-            if (document.body.classList.contains('mobile-nav-active')) {
-                document.body.classList.remove('mobile-nav-active');
-                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    }
-
-    // Navbar Episodes Scroll
-    if (DOM.episodesNavBtn && DOM.episodesSection) {
-        DOM.episodesNavBtn.addEventListener('click', () => {
-            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });
-            if (document.body.classList.contains('mobile-nav-active')) {
-                document.body.classList.remove('mobile-nav-active');
-                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    }
-
-    // Navbar Episodes Scroll
-    if (DOM.episodesNavBtn && DOM.episodesSection) {
-        DOM.episodesNavBtn.addEventListener('click', () => {
-            DOM.episodesSection.scrollIntoView({ behavior: 'smooth' });
-            if (document.body.classList.contains('mobile-nav-active')) {
-                document.body.classList.remove('mobile-nav-active');
-                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
-            }
-        });
-    }
-
     if (DOM.heroBtn) DOM.heroBtn.addEventListener('click', () => AppState.hero && openVideo(AppState.hero));
     if (DOM.heroSave) DOM.heroSave.addEventListener('click', () => AppState.hero && toggleWatchLater(AppState.hero));
 
@@ -1262,6 +1172,24 @@ function bindEvents() {
         });
     }
 
+    // Navbar Brand (Logo) - Back to Top & Close Menu
+    if (DOM.navbarBrand) {
+        const scrollToTopAction = () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+            if (document.body.classList.contains('mobile-nav-active')) {
+                document.body.classList.remove('mobile-nav-active');
+                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
+            }
+        };
+        DOM.navbarBrand.addEventListener('click', scrollToTopAction);
+        DOM.navbarBrand.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                scrollToTopAction();
+            }
+        });
+    }
+
     // Header scroll effect
     const header = document.querySelector('.header');
     if (header) {