Skip to content

🎨 Palette: Accessibility and Discoverability Enhancements #226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ruhdevops wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

🎨 Palette: Accessibility and Discoverability Enhancements #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

## 2026-07-16 - Accessible Brand Identity and Shortcut Discoverability
**Learning:** The brand logo is an often-overlooked anchor for "Back to Top" functionality. Enhancing it with semantic roles and keyboard listeners improves both accessibility and navigation efficiency. Pairing these with explicit shortcut hints in action button titles (e.g., 'Share (S)') significantly lowers the barrier for power users without cluttering the visual UI.
**Action:** Always verify if brand logos can serve as functional anchors and ensure all modal actions have discoverability hints for their associated keyboard shortcuts.
12 changes: 6 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" title="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"/>
Expand Down Expand Up @@ -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">
Expand All @@ -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>

Expand Down Expand Up @@ -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>
Expand Down
98 changes: 16 additions & 82 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,20 +98,7 @@ const DOM = {
// Theme & UI
themeToggle: document.getElementById('themeToggleBtn'),
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'),
navbarBrand: document.getElementById('navbarBrand'),
episodesNavBtn: document.querySelector('[data-action="scroll-to-episodes"]'),
episodesSection: document.getElementById('episodesSection'),
menuToggle: document.getElementById('menuToggleBtn'),
Expand Down Expand Up @@ -1033,68 +1020,19 @@ function bindEvents() {
});

// Hero buttons
// 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 (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');
}
});
}

// 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');
};
DOM.navbarBrand.addEventListener('click', scrollToTopAction);
DOM.navbarBrand.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
scrollToTopAction();
}
});
}
Expand All @@ -1111,16 +1049,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');
}
});
}

if (DOM.heroBtn) DOM.heroBtn.addEventListener('click', () => AppState.hero && openVideo(AppState.hero));
if (DOM.heroSave) DOM.heroSave.addEventListener('click', () => AppState.hero && toggleWatchLater(AppState.hero));

Expand Down Expand Up @@ -1326,6 +1254,12 @@ function bindEvents() {
} else if (key === 'b') {
e.preventDefault();
toggleWatchLater(AppState.current);
} else if (key === 's') {
e.preventDefault();
openShare();
} else if (key === 'n') {
e.preventDefault();
openTranscript();
}
}

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20260508.1",
"@playwright/test": "1.59.1",
"@vitejs/plugin-react": "^6.0.1",
"autoprefixer": "^10.5.0",
"chokidar-cli": "^3.0.0",
Expand Down Expand Up @@ -68,8 +69,7 @@
"express-session": "^1.19.0",
"ghas-fixer": "^1.3.0",
"node-cloudflared-tunnel": "^1.0.10",
"trigger-circleci-pipeline": "^1.12.1",
"circletui": "^1.0.3"
"trigger-circleci-pipeline": "^1.12.1"
},
"name": "yt-studio",
"version": "1.0.0",
Expand Down
12 changes: 12 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading