🎨 Palette: interactive navigation, dynamic title, and keyboard shortcuts

.Jules/palette.md

@@ -50,3 +50,15 @@
 ## 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 - Dynamic Document Title Management
+**Learning:** In single-page applications with modal-based content viewing, updating the browser tab title to reflect the active content improves accessibility for screen readers and helps users manage multiple open tabs.
+**Action:** Update `document.title` when opening significant modals (like video players) and restore it to the brand default upon closing.
+
+## 2025-05-30 - Dynamic Document Title Management
+**Learning:** In single-page applications with modal-based content viewing, updating the browser tab title to reflect the active content improves accessibility for screen readers and helps users manage multiple open tabs.
+**Action:** Update \`document.title\` when opening significant modals (like video players) and restore it to the brand default upon closing.
+
+## 2025-05-30 - Dynamic Document Title Management
+**Learning:** In single-page applications with modal-based content viewing, updating the browser tab title to reflect the active content improves accessibility for screen readers and helps users manage multiple open tabs.
+**Action:** Update \`document.title\` when opening significant modals (like video players) and restore it to the brand default upon closing.

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" 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"/>
@@ -430,15 +430,15 @@ <h2 id="video-title" class="modal-title">Episode Title</h2>
         </div>
 
         <div class="modal-actions">
-          <button id="shareEpisode" class="modal-action-btn" title="Share">
+          <button id="shareEpisode" class="modal-action-btn" title="Share (S)">
             <i class="fas fa-share-alt"></i>
             <span>Share</span>
           </button>
           <button id="modalSaveBtn" class="modal-action-btn" title="Save (B)">
             <i class="fas fa-bookmark"></i>
             <span>Save</span>
           </button>
-          <button id="toggleTranscript" class="modal-action-btn" title="Transcript">
+          <button id="toggleTranscript" class="modal-action-btn" title="Notes (N)">
             <i class="fas fa-closed-captioning"></i>
             <span>Notes</span>
           </button>