Kenso Grimm
216a972fef
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
693 lines
30 KiB
HTML
693 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Responsive Design and Accessibility Test - Enhanced Item Management</title>
|
|
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #0a0a0a;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.test-section {
|
|
margin-bottom: 3rem;
|
|
padding: 2rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.test-section h2 {
|
|
color: #ff9900;
|
|
margin-top: 0;
|
|
font-size: 1.5rem;
|
|
border-bottom: 2px solid #ff9900;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.test-description {
|
|
color: #e0e0e0;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.breakpoint-indicator {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: #ff9900;
|
|
color: #000;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
z-index: 10000;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.accessibility-controls {
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #333;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.accessibility-controls h3 {
|
|
color: #ff9900;
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.accessibility-controls button {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: #333;
|
|
color: white;
|
|
border: 1px solid #555;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.accessibility-controls button:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.accessibility-controls button.active {
|
|
background: #ff9900;
|
|
color: #000;
|
|
}
|
|
|
|
/* High Contrast Mode Simulation */
|
|
.high-contrast {
|
|
filter: contrast(200%) brightness(150%);
|
|
}
|
|
|
|
/* Reduced Motion Simulation */
|
|
.reduced-motion * {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Large Text Simulation */
|
|
.large-text {
|
|
font-size: 1.25em !important;
|
|
}
|
|
|
|
.large-text * {
|
|
font-size: inherit !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Skip Link for Accessibility -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Breakpoint Indicator -->
|
|
<div class="breakpoint-indicator" id="breakpoint-indicator">
|
|
Desktop (≥769px)
|
|
</div>
|
|
|
|
<!-- Accessibility Testing Controls -->
|
|
<div class="accessibility-controls">
|
|
<h3>Accessibility Tests</h3>
|
|
<button onclick="toggleHighContrast()" id="contrast-btn">Toggle High Contrast</button>
|
|
<button onclick="toggleReducedMotion()" id="motion-btn">Toggle Reduced Motion</button>
|
|
<button onclick="toggleLargeText()" id="text-btn">Toggle Large Text</button>
|
|
<button onclick="testKeyboardNav()" id="keyboard-btn">Test Keyboard Navigation</button>
|
|
<button onclick="testScreenReader()" id="reader-btn">Test Screen Reader</button>
|
|
</div>
|
|
|
|
<main id="main-content">
|
|
<!-- Test Section 1: Responsive Header and Form -->
|
|
<div class="test-section">
|
|
<h2>1. Responsive Header and Add Item Form</h2>
|
|
<p class="test-description">
|
|
Tests responsive layout of the header and form across different screen sizes.
|
|
The form should stack vertically on mobile and align horizontally on desktop.
|
|
</p>
|
|
|
|
<div class="amazon-ext-enhanced-items-content">
|
|
<div class="enhanced-items-header">
|
|
<h2>Enhanced Items Management</h2>
|
|
</div>
|
|
|
|
<div class="add-enhanced-item-form">
|
|
<input type="url"
|
|
class="enhanced-url-input"
|
|
placeholder="Enter Amazon product URL..."
|
|
aria-label="Amazon product URL"
|
|
required>
|
|
<button class="extract-btn" type="button">
|
|
<span class="sr-only">Extract product data from URL</span>
|
|
Extract
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 2: Responsive Item Cards -->
|
|
<div class="test-section">
|
|
<h2>2. Responsive Item Cards</h2>
|
|
<p class="test-description">
|
|
Tests responsive layout of item cards. Cards should stack content vertically on mobile
|
|
and display horizontally on larger screens. All interactive elements should be touch-friendly.
|
|
</p>
|
|
|
|
<div class="amazon-ext-enhanced-items-content">
|
|
<div class="enhanced-item-list">
|
|
<div class="enhanced-item" tabindex="0" role="article" aria-labelledby="item-1-title">
|
|
<div class="item-main-content">
|
|
<div class="item-header">
|
|
<h3 class="item-custom-title" id="item-1-title">
|
|
Samsung Galaxy S21 Ultra - Premium 5G Flagship Smartphone
|
|
</h3>
|
|
<div class="item-price-display">
|
|
<span class="price" aria-label="Price: 899 euros and 99 cents">€899.99</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<div class="item-url-section">
|
|
<a href="https://amazon.de/dp/B08N5WRWNW"
|
|
class="item-url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="View product on Amazon (opens in new tab)">
|
|
<span class="url-icon">🔗</span>
|
|
amazon.de/dp/B08N5WRWNW
|
|
</a>
|
|
</div>
|
|
|
|
<div class="item-meta">
|
|
<span class="created-date" aria-label="Created on January 15, 2026">
|
|
Created: 15.01.2026, 13:58
|
|
</span>
|
|
<span class="ai-badge" aria-label="AI-generated title">KI-Titel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-actions" role="group" aria-label="Item actions">
|
|
<button class="toggle-original-btn"
|
|
type="button"
|
|
aria-pressed="false"
|
|
aria-describedby="original-help">
|
|
<span class="btn-icon">👁️</span>
|
|
<span class="btn-text">Show Original</span>
|
|
<span class="keyboard-shortcut">
|
|
<span class="kbd">O</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button class="edit-item-btn"
|
|
type="button"
|
|
aria-describedby="edit-help">
|
|
<span class="btn-icon">✏️</span>
|
|
<span class="btn-text">Edit</span>
|
|
<span class="keyboard-shortcut">
|
|
<span class="kbd">E</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button class="delete-item-btn"
|
|
type="button"
|
|
aria-describedby="delete-help">
|
|
<span class="btn-icon">🗑️</span>
|
|
<span class="btn-text">Delete</span>
|
|
<span class="keyboard-shortcut">
|
|
<span class="kbd">Del</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Second Item for Testing -->
|
|
<div class="enhanced-item" tabindex="0" role="article" aria-labelledby="item-2-title">
|
|
<div class="item-main-content">
|
|
<div class="item-header">
|
|
<h3 class="item-custom-title" id="item-2-title">
|
|
Apple MacBook Pro 16" - Professional Laptop for Developers
|
|
</h3>
|
|
<div class="item-price-display">
|
|
<span class="price" aria-label="Price: 2499 euros and 99 cents">€2499.99</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<div class="item-url-section">
|
|
<a href="https://amazon.de/dp/B08N5WRWNW"
|
|
class="item-url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="View product on Amazon (opens in new tab)">
|
|
<span class="url-icon">🔗</span>
|
|
amazon.de/dp/B08N5WRWNW
|
|
</a>
|
|
</div>
|
|
|
|
<div class="item-meta">
|
|
<span class="created-date" aria-label="Created on January 14, 2026">
|
|
Created: 14.01.2026, 10:30
|
|
</span>
|
|
<span class="manual-badge" aria-label="Manual entry">Manual</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-actions" role="group" aria-label="Item actions">
|
|
<button class="toggle-original-btn"
|
|
type="button"
|
|
aria-pressed="false">
|
|
<span class="btn-icon">👁️</span>
|
|
<span class="btn-text">Show Original</span>
|
|
</button>
|
|
|
|
<button class="edit-item-btn" type="button">
|
|
<span class="btn-icon">✏️</span>
|
|
<span class="btn-text">Edit</span>
|
|
</button>
|
|
|
|
<button class="delete-item-btn" type="button">
|
|
<span class="btn-icon">🗑️</span>
|
|
<span class="btn-text">Delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 3: Title Selection Responsive Design -->
|
|
<div class="test-section">
|
|
<h2>3. Responsive Title Selection</h2>
|
|
<p class="test-description">
|
|
Tests responsive layout of the title selection interface. Options should be easily
|
|
selectable on touch devices and keyboard accessible.
|
|
</p>
|
|
|
|
<div class="amazon-ext-enhanced-items-content">
|
|
<div class="title-selection-container" role="radiogroup" aria-labelledby="title-selection-heading">
|
|
<div class="title-selection-header">
|
|
<h3 class="selection-title" id="title-selection-heading">Choose a Title:</h3>
|
|
</div>
|
|
|
|
<div class="title-options">
|
|
<div class="title-option ai-generated selected"
|
|
role="radio"
|
|
aria-checked="true"
|
|
tabindex="0"
|
|
data-index="0">
|
|
<span class="option-label">AI Suggestion 1:</span>
|
|
<span class="option-text">Samsung Galaxy S21 Ultra - Premium 5G Flagship</span>
|
|
<div class="recommendation-badge">Recommended</div>
|
|
<div class="char-count">52 chars</div>
|
|
</div>
|
|
|
|
<div class="title-option ai-generated"
|
|
role="radio"
|
|
aria-checked="false"
|
|
tabindex="-1"
|
|
data-index="1">
|
|
<span class="option-label">AI Suggestion 2:</span>
|
|
<span class="option-text">Galaxy S21 Ultra: High-End Android Smartphone</span>
|
|
<div class="char-count">45 chars</div>
|
|
</div>
|
|
|
|
<div class="title-option ai-generated"
|
|
role="radio"
|
|
aria-checked="false"
|
|
tabindex="-1"
|
|
data-index="2">
|
|
<span class="option-label">AI Suggestion 3:</span>
|
|
<span class="option-text">Samsung S21 Ultra - Professional Mobile Device</span>
|
|
<div class="char-count">47 chars</div>
|
|
</div>
|
|
|
|
<div class="title-option original"
|
|
role="radio"
|
|
aria-checked="false"
|
|
tabindex="-1"
|
|
data-index="3">
|
|
<span class="option-label">Original:</span>
|
|
<span class="option-text">Samsung Galaxy S21 Ultra 5G Smartphone 128GB Phantom Black Android Handy ohne Vertrag</span>
|
|
<div class="char-count">89 chars</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selection-actions">
|
|
<button class="confirm-selection-btn" type="button">
|
|
Confirm Selection
|
|
</button>
|
|
<button class="skip-ai-btn" type="button">
|
|
Skip AI Processing
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 4: Progress Indicator Responsive Design -->
|
|
<div class="test-section">
|
|
<h2>4. Responsive Progress Indicator</h2>
|
|
<p class="test-description">
|
|
Tests responsive layout of the progress indicator. Steps should be clearly visible
|
|
and accessible on all screen sizes.
|
|
</p>
|
|
|
|
<div class="amazon-ext-enhanced-items-content">
|
|
<div class="extraction-progress" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5">
|
|
<div class="progress-header">
|
|
<h4>Extracting Product Data...</h4>
|
|
</div>
|
|
|
|
<div class="progress-steps">
|
|
<div class="progress-step completed" role="listitem">
|
|
<span class="step-icon">🔍</span>
|
|
<span class="step-text">Validating URL</span>
|
|
<span class="step-status completed">✓</span>
|
|
</div>
|
|
|
|
<div class="progress-step active" role="listitem">
|
|
<span class="step-icon">📦</span>
|
|
<span class="step-text">Extracting Product Data</span>
|
|
<span class="step-status active">⏳</span>
|
|
</div>
|
|
|
|
<div class="progress-step" role="listitem">
|
|
<span class="step-icon">🤖</span>
|
|
<span class="step-text">Generating AI Titles</span>
|
|
<span class="step-status">⏸️</span>
|
|
</div>
|
|
|
|
<div class="progress-step" role="listitem">
|
|
<span class="step-icon">✏️</span>
|
|
<span class="step-text">Title Selection</span>
|
|
<span class="step-status">⏸️</span>
|
|
</div>
|
|
|
|
<div class="progress-step" role="listitem">
|
|
<span class="step-icon">💾</span>
|
|
<span class="step-text">Saving Item</span>
|
|
<span class="step-status">⏸️</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 5: Messages and Feedback -->
|
|
<div class="test-section">
|
|
<h2>5. Responsive Messages and Feedback</h2>
|
|
<p class="test-description">
|
|
Tests responsive layout of error and success messages. Messages should be clearly
|
|
visible and accessible across all screen sizes.
|
|
</p>
|
|
|
|
<div class="amazon-ext-enhanced-items-content">
|
|
<div class="error-message" role="alert" aria-live="polite">
|
|
<strong>Error:</strong> Unable to extract product data from the provided URL. Please check the URL and try again.
|
|
</div>
|
|
|
|
<div class="success-message" role="status" aria-live="polite">
|
|
<strong>Success:</strong> Product data extracted successfully! AI title suggestions are being generated.
|
|
</div>
|
|
|
|
<!-- URL Validation Feedback -->
|
|
<div class="url-validation-container">
|
|
<div class="validation-feedback valid" role="status" aria-live="polite">
|
|
<span class="validation-icon">✓</span>
|
|
<span class="validation-message">Valid Amazon product URL detected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Section 6: Empty State -->
|
|
<div class="test-section">
|
|
<h2>6. Responsive Empty State</h2>
|
|
<p class="test-description">
|
|
Tests responsive layout of the empty state when no items are present.
|
|
</p>
|
|
|
|
<div class="amazon-ext-enhanced-items-content">
|
|
<div class="empty-state" role="region" aria-labelledby="empty-heading">
|
|
<div class="empty-icon">📦</div>
|
|
<h3 id="empty-heading">No Enhanced Items Yet</h3>
|
|
<p>Start by adding your first Amazon product using the form above. The system will automatically extract product information and generate AI-powered title suggestions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Hidden elements for screen reader testing -->
|
|
<div class="sr-only" aria-live="polite" id="screen-reader-announcements"></div>
|
|
|
|
<!-- Help text for keyboard shortcuts -->
|
|
<div id="original-help" class="sr-only">Press O to toggle original title visibility</div>
|
|
<div id="edit-help" class="sr-only">Press E to edit this item</div>
|
|
<div id="delete-help" class="sr-only">Press Delete to remove this item</div>
|
|
|
|
<script>
|
|
// Breakpoint Detection
|
|
function updateBreakpointIndicator() {
|
|
const indicator = document.getElementById('breakpoint-indicator');
|
|
const width = window.innerWidth;
|
|
|
|
if (width <= 480) {
|
|
indicator.textContent = 'Mobile (≤480px)';
|
|
indicator.style.background = '#dc3545';
|
|
} else if (width <= 768) {
|
|
indicator.textContent = 'Tablet (481px-768px)';
|
|
indicator.style.background = '#ffc107';
|
|
indicator.style.color = '#000';
|
|
} else {
|
|
indicator.textContent = 'Desktop (≥769px)';
|
|
indicator.style.background = '#28a745';
|
|
}
|
|
}
|
|
|
|
// Accessibility Testing Functions
|
|
function toggleHighContrast() {
|
|
const body = document.body;
|
|
const btn = document.getElementById('contrast-btn');
|
|
|
|
body.classList.toggle('high-contrast');
|
|
btn.classList.toggle('active');
|
|
|
|
announceToScreenReader(
|
|
body.classList.contains('high-contrast')
|
|
? 'High contrast mode enabled'
|
|
: 'High contrast mode disabled'
|
|
);
|
|
}
|
|
|
|
function toggleReducedMotion() {
|
|
const body = document.body;
|
|
const btn = document.getElementById('motion-btn');
|
|
|
|
body.classList.toggle('reduced-motion');
|
|
btn.classList.toggle('active');
|
|
|
|
announceToScreenReader(
|
|
body.classList.contains('reduced-motion')
|
|
? 'Reduced motion mode enabled'
|
|
: 'Reduced motion mode disabled'
|
|
);
|
|
}
|
|
|
|
function toggleLargeText() {
|
|
const body = document.body;
|
|
const btn = document.getElementById('text-btn');
|
|
|
|
body.classList.toggle('large-text');
|
|
btn.classList.toggle('active');
|
|
|
|
announceToScreenReader(
|
|
body.classList.contains('large-text')
|
|
? 'Large text mode enabled'
|
|
: 'Large text mode disabled'
|
|
);
|
|
}
|
|
|
|
function testKeyboardNav() {
|
|
announceToScreenReader('Keyboard navigation test started. Use Tab to navigate, Enter to activate, Arrow keys for radio groups.');
|
|
|
|
// Focus first interactive element
|
|
const firstButton = document.querySelector('.extract-btn');
|
|
if (firstButton) {
|
|
firstButton.focus();
|
|
}
|
|
}
|
|
|
|
function testScreenReader() {
|
|
announceToScreenReader('Screen reader test: This page contains enhanced item management interface with responsive design and accessibility features. Navigate using headings, landmarks, and interactive elements.');
|
|
}
|
|
|
|
function announceToScreenReader(message) {
|
|
const announcer = document.getElementById('screen-reader-announcements');
|
|
announcer.textContent = message;
|
|
|
|
// Clear after announcement
|
|
setTimeout(() => {
|
|
announcer.textContent = '';
|
|
}, 1000);
|
|
}
|
|
|
|
// Title Selection Keyboard Navigation
|
|
function setupTitleSelection() {
|
|
const titleOptions = document.querySelectorAll('.title-option');
|
|
let currentIndex = 0;
|
|
|
|
titleOptions.forEach((option, index) => {
|
|
option.addEventListener('click', () => selectTitle(index));
|
|
option.addEventListener('keydown', (e) => {
|
|
switch(e.key) {
|
|
case 'ArrowDown':
|
|
case 'ArrowRight':
|
|
e.preventDefault();
|
|
currentIndex = (index + 1) % titleOptions.length;
|
|
focusTitle(currentIndex);
|
|
break;
|
|
case 'ArrowUp':
|
|
case 'ArrowLeft':
|
|
e.preventDefault();
|
|
currentIndex = (index - 1 + titleOptions.length) % titleOptions.length;
|
|
focusTitle(currentIndex);
|
|
break;
|
|
case 'Enter':
|
|
case ' ':
|
|
e.preventDefault();
|
|
selectTitle(index);
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
function focusTitle(index) {
|
|
titleOptions.forEach((option, i) => {
|
|
option.tabIndex = i === index ? 0 : -1;
|
|
if (i === index) {
|
|
option.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
function selectTitle(index) {
|
|
titleOptions.forEach((option, i) => {
|
|
option.classList.toggle('selected', i === index);
|
|
option.setAttribute('aria-checked', i === index ? 'true' : 'false');
|
|
});
|
|
|
|
const selectedOption = titleOptions[index];
|
|
const optionText = selectedOption.querySelector('.option-text').textContent;
|
|
announceToScreenReader(`Selected: ${optionText}`);
|
|
}
|
|
}
|
|
|
|
// Item Actions Keyboard Shortcuts
|
|
function setupKeyboardShortcuts() {
|
|
document.addEventListener('keydown', (e) => {
|
|
// Only handle shortcuts when not in input fields
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
|
|
return;
|
|
}
|
|
|
|
const focusedItem = document.querySelector('.enhanced-item:focus-within');
|
|
if (!focusedItem) return;
|
|
|
|
switch(e.key.toLowerCase()) {
|
|
case 'o':
|
|
e.preventDefault();
|
|
const originalBtn = focusedItem.querySelector('.toggle-original-btn');
|
|
if (originalBtn) {
|
|
originalBtn.click();
|
|
announceToScreenReader('Toggled original title visibility');
|
|
}
|
|
break;
|
|
case 'e':
|
|
e.preventDefault();
|
|
const editBtn = focusedItem.querySelector('.edit-item-btn');
|
|
if (editBtn) {
|
|
editBtn.click();
|
|
announceToScreenReader('Edit mode activated');
|
|
}
|
|
break;
|
|
case 'Delete':
|
|
e.preventDefault();
|
|
const deleteBtn = focusedItem.querySelector('.delete-item-btn');
|
|
if (deleteBtn) {
|
|
if (confirm('Are you sure you want to delete this item?')) {
|
|
deleteBtn.click();
|
|
announceToScreenReader('Item deleted');
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize
|
|
window.addEventListener('load', () => {
|
|
updateBreakpointIndicator();
|
|
setupTitleSelection();
|
|
setupKeyboardShortcuts();
|
|
});
|
|
|
|
window.addEventListener('resize', updateBreakpointIndicator);
|
|
|
|
// Simulate some interactive behaviors
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Extract button behavior
|
|
const extractBtn = document.querySelector('.extract-btn');
|
|
if (extractBtn) {
|
|
extractBtn.addEventListener('click', () => {
|
|
extractBtn.disabled = true;
|
|
extractBtn.textContent = 'Extracting...';
|
|
announceToScreenReader('Extraction started');
|
|
|
|
setTimeout(() => {
|
|
extractBtn.disabled = false;
|
|
extractBtn.textContent = 'Extract';
|
|
announceToScreenReader('Extraction completed');
|
|
}, 3000);
|
|
});
|
|
}
|
|
|
|
// Item action buttons
|
|
document.querySelectorAll('.toggle-original-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const isPressed = btn.getAttribute('aria-pressed') === 'true';
|
|
btn.setAttribute('aria-pressed', !isPressed);
|
|
btn.querySelector('.btn-text').textContent = isPressed ? 'Show Original' : 'Hide Original';
|
|
announceToScreenReader(isPressed ? 'Original title hidden' : 'Original title shown');
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.edit-item-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
announceToScreenReader('Edit dialog would open here');
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.delete-item-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to delete this item?')) {
|
|
announceToScreenReader('Item would be deleted here');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |