# LibraryView Component - Comprehensive Test Documentation
**Component Path:** `/home/setup/navidocs/client/src/views/LibraryView.vue`
**Route:** `/library`
**Test Document Version:** 1.0
**Last Updated:** 2025-10-23
---
## Table of Contents
1. [Component Overview](#component-overview)
2. [Manual Test Scenarios](#manual-test-scenarios)
3. [API Integration Tests](#api-integration-tests)
4. [DOM Element Verification](#dom-element-verification)
5. [Styling & Design System Tests](#styling--design-system-tests)
6. [Accessibility Tests](#accessibility-tests)
7. [Console Output Verification](#console-output-verification)
8. [Known Issues & Notes](#known-issues--notes)
---
## Component Overview
### Purpose
The LibraryView component serves as the document library interface for the NaviDocs application, providing:
- Overview of essential vessel documents
- Category-based document organization
- Role-based content filtering (Owner, Captain, Manager, Crew)
- Recent activity tracking
- Quick document pinning functionality
### Key Features
1. **Essential Documents Section** - Displays critical documents requiring quick access (Insurance, Registration, Owner's Manual)
2. **Category Browser** - Organized categories with document counts
3. **Role Switcher** - Toggle between different user roles to filter relevant content
4. **Recent Activity** - Timeline of document uploads, views, and shares
5. **Navigation** - Click-to-navigate category cards with hover effects
### Component Dependencies
- Vue 3 Composition API
- Vue Router 4
- Tailwind CSS design system
- Pinia (for future state management)
---
## Manual Test Scenarios
### Test Scenario 1: Component Loads and Renders
**Objective:** Verify that the LibraryView component loads successfully and displays all main sections.
#### Steps
1. Start the development server (`npm run dev` from `/home/setup/navidocs/client`)
2. Navigate to `http://localhost:5173/` (or configured port)
3. Click on the Library navigation link or directly navigate to `/library`
4. Wait for the page to fully load
#### Expected Results
- [ ] Page loads without errors
- [ ] Header section displays with "Document Library" title
- [ ] Vessel name "LILIAN I - 29 documents" is visible
- [ ] Role switcher displays with 4 role buttons (Owner, Captain, Manager, Crew)
- [ ] "Essential Documents" section shows 3 cards
- [ ] "Browse by Category" section shows 8 category cards
- [ ] "Recent Activity" section displays 3 activity items
- [ ] Background gradient applies correctly (dark purple to black)
- [ ] Glass morphism effects are visible on cards
#### Test Data
- Default role: Owner
- Document count: 29
- Essential docs: 3 cards
- Categories: 8 cards
- Recent activity items: 3
---
### Test Scenario 2: Role Switcher Functionality
**Objective:** Verify that the role switcher allows users to toggle between different role views.
#### Steps
1. Navigate to `/library`
2. Locate the role switcher in the header (top-right area)
3. Verify the default selected role is "Owner" (should have gradient background)
4. Click on "Captain" role button
5. Click on "Manager" role button
6. Click on "Crew" role button
7. Click back on "Owner" role button
#### Expected Results
- [ ] Default role "Owner" is visually highlighted (gradient background from-primary-500 to-secondary-500)
- [ ] Inactive role buttons have text-white/70 color
- [ ] Clicking a role button updates the visual state immediately
- [ ] Only one role button is highlighted at a time
- [ ] Hover effect applies to inactive buttons (text-white, bg-white/10)
- [ ] Transition animation is smooth (duration-200)
- [ ] Console logs show: `currentRole updated to: [roleName]` (if logging is enabled)
#### Console Verification
```javascript
// Expected reactive state changes
currentRole.value // Should change from 'owner' -> 'captain' -> 'manager' -> 'crew'
```
#### Edge Cases
- Rapidly clicking between roles
- Double-clicking the same role
- Clicking role during page load
---
### Test Scenario 3: Essential Documents Display
**Objective:** Verify that essential documents render correctly with all metadata.
#### Steps
1. Navigate to `/library`
2. Scroll to the "Essential Documents" section
3. Inspect each of the 3 document cards:
- Insurance Policy 2025
- LILIAN I Registration
- Owner's Manual
#### Expected Results per Card
**Insurance Policy 2025:**
- [ ] Blue gradient icon (from-blue-500 to-blue-600) with shield checkmark SVG
- [ ] Title: "Insurance Policy 2025"
- [ ] Description: "Coverage: Full hull & liability"
- [ ] Status badge: "Active" (green, badge-success)
- [ ] File type: "PDF"
- [ ] Pink bookmark icon (top-right)
- [ ] Expiry alert: Yellow banner with clock icon, "Expires in 68 days (Dec 31, 2025)"
- [ ] Hover effect: Scale icon (110%), translate card up, increase shadow
**LILIAN I Registration:**
- [ ] Green gradient icon (from-green-500 to-green-600) with document SVG
- [ ] Title: "LILIAN I Registration"
- [ ] Description: "LLC • Monaco Registry"
- [ ] Status badge: "Valid" (green, badge-success)
- [ ] File type: "PDF"
- [ ] Pink bookmark icon (top-right)
- [ ] Compliance badge: Green banner with checkmark, "Legally required aboard vessel"
- [ ] Hover effect: Scale icon (110%), translate card up, increase shadow
**Owner's Manual:**
- [ ] Purple gradient icon (from-purple-500 to-purple-600) with book SVG
- [ ] Title: "Owner's Manual"
- [ ] Description: "Complete vessel documentation"
- [ ] Badge: "17 pages" (badge-primary)
- [ ] File type: "PDF"
- [ ] Pink bookmark icon (top-right)
- [ ] Info badge: Purple banner with lightning icon, "Emergency reference • 6.7 MB"
- [ ] Hover effect: Scale icon (110%), translate card up, increase shadow
#### Visual Checks
- [ ] All cards have pink border (border-pink-400/30, hover border-pink-400/50)
- [ ] Glass morphism effect applied (bg-white/10, backdrop-blur-lg)
- [ ] Cards have proper spacing (gap-4 in grid)
- [ ] Animations stagger correctly (0.1s, 0.2s, 0.3s delays)
---
### Test Scenario 4: Category Navigation
**Objective:** Verify that category cards are clickable and trigger navigation events.
#### Steps
1. Navigate to `/library`
2. Scroll to "Browse by Category" section
3. Open browser developer console (F12)
4. Click on each category card in sequence:
- Legal & Compliance
- Financial
- Operations
- Manuals
- Insurance
- Photos
- Service Records
- Warranties
#### Expected Results per Click
- [ ] Console logs: `Navigate to category: [categoryId]`
- [ ] Hover effect: Card translates up (-translate-y-1), shadow increases
- [ ] Icon scales and rotates (110%, 3deg rotation)
- [ ] Arrow icon transitions (text-white/30 -> text-pink-400, translate-x-1)
- [ ] Title color transitions to pink-400 on hover
- [ ] No page navigation occurs (TODO: implementation pending)
#### Category Details Verification
| Category | Icon Color | Icon | Document Count | Status |
|----------|-----------|------|----------------|--------|
| Legal & Compliance | green-500 to green-600 | Shield checkmark | 8 documents | badge-success |
| Financial | yellow-500 to yellow-600 | Dollar circle | 11 documents | badge-primary |
| Operations | blue-500 to blue-600 | Clipboard | 2 documents | badge-primary |
| Manuals | purple-500 to purple-600 | Book | 1 document | badge-primary |
| Insurance | indigo-500 to indigo-600 | Shield checkmark | 1 document | badge-success |
| Photos | pink-500 to pink-600 | Image | 3 images | badge-primary |
| Service Records | orange-500 to orange-600 | Cog settings | Coming soon | bg-white/10 |
| Warranties | teal-500 to teal-600 | Clipboard check | Coming soon | bg-white/10 |
#### Console Output Format
```
Navigate to category: legal
Navigate to category: financial
Navigate to category: operations
Navigate to category: manuals
Navigate to category: insurance
Navigate to category: photos
Navigate to category: service
Navigate to category: warranties
```
---
### Test Scenario 5: Recent Activity Section
**Objective:** Verify that the recent activity timeline displays correctly.
#### Steps
1. Navigate to `/library`
2. Scroll to "Recent Activity" section
3. Inspect all 3 activity items
#### Expected Results
**Activity Item 1 - Facture n° F1820008157:**
- [ ] Red PDF badge (badge-pdf) with document icon
- [ ] Badge text: "PDF"
- [ ] Title: "Facture n° F1820008157"
- [ ] Timestamp: "Uploaded today at 2:30 PM"
- [ ] Status badge: "Indexed" (badge-success, green)
- [ ] Hover effect: Translates up slightly, text color changes to pink-400
**Activity Item 2 - Lilian delivery Olbia Cannes:**
- [ ] Green Excel badge (badge-excel) with table icon
- [ ] Badge text: "XLSX"
- [ ] Title: "Lilian delivery Olbia Cannes"
- [ ] Timestamp: "Viewed yesterday at 11:45 AM"
- [ ] Status badge: "Opened" (bg-white/10 text-white/70)
- [ ] Hover effect: Translates up slightly, text color changes to pink-400
**Activity Item 3 - Vessel exterior photo:**
- [ ] Purple image badge (badge-image) with photo icon
- [ ] Badge text: "JPG"
- [ ] Title: "Vessel exterior photo"
- [ ] Timestamp: "Shared 2 days ago"
- [ ] Status badge: "Shared" (badge-primary)
- [ ] Hover effect: Translates up slightly, text color changes to pink-400
#### Visual Checks
- [ ] Activity items are in a glass panel (rounded-2xl, p-6)
- [ ] Items have proper spacing (space-y-3)
- [ ] Each item has bg-white/10 backdrop-blur-lg
- [ ] Border border-white/10 is visible
---
### Test Scenario 6: Header Interactions
**Objective:** Verify header functionality including home button and vessel info.
#### Steps
1. Navigate to `/library`
2. Locate the header elements (top of page)
3. Test home button click
4. Verify vessel information display
#### Expected Results
- [ ] Logo button (wave icon) is visible with gradient background (primary-500 to secondary-500)
- [ ] Logo button has hover scale effect (hover:scale-105)
- [ ] Document count displays: "LILIAN I - 29 documents"
- [ ] Clicking logo navigates to home page (`/`)
- [ ] Header is sticky (sticky top-0 z-40)
- [ ] Header has glass effect (glass class applied)
---
### Test Scenario 7: Pin Document Functionality
**Objective:** Test the "Pin Document" button and bookmark icons.
#### Steps
1. Navigate to `/library`
2. Locate "Pin Document" button in Essential Documents section
3. Click the main "Pin Document" button (top-right of section)
4. Click individual bookmark icons on each essential document card
#### Expected Results
- [ ] Main button displays: Pink text (text-pink-400), plus icon, "Pin Document" label
- [ ] Hover effect: Color changes to pink-300
- [ ] Button click currently has no action (TODO: implementation pending)
- [ ] Individual bookmark icons are visible on each card (filled bookmark SVG)
- [ ] Bookmark icons have hover effects (bg-white/10)
- [ ] No console errors when clicking
#### Future Implementation Note
- Pin functionality should save to localStorage or backend API
- Should toggle between pinned/unpinned states
- Should update visual indicator
---
## API Integration Tests
### Test Setup
Currently, the LibraryView component uses **static mock data**. Future API integration will require:
#### Expected API Endpoints
**1. GET /api/vessels/:vesselId/documents/essential**
```javascript
// Expected Response
{
"vessel": {
"name": "LILIAN I",
"documentCount": 29
},
"essentialDocuments": [
{
"id": "doc_insurance_2025",
"title": "Insurance Policy 2025",
"description": "Coverage: Full hull & liability",
"type": "insurance",
"status": "active",
"fileType": "pdf",
"expiryDate": "2025-12-31",
"daysUntilExpiry": 68,
"metadata": {
"coverage": "Full hull & liability"
},
"isPinned": true
},
// ... more documents
]
}
```
**2. GET /api/vessels/:vesselId/documents/categories**
```javascript
// Expected Response
{
"categories": [
{
"id": "legal",
"name": "Legal & Compliance",
"description": "Registration, licensing, customs",
"documentCount": 8,
"color": "green",
"icon": "shield-check"
},
// ... more categories
]
}
```
**3. GET /api/vessels/:vesselId/activity/recent**
```javascript
// Expected Response
{
"activities": [
{
"id": "activity_001",
"documentId": "doc_invoice_001",
"documentTitle": "Facture n° F1820008157",
"action": "uploaded",
"fileType": "pdf",
"timestamp": "2025-10-23T14:30:00Z",
"status": "indexed",
"userId": "user_001"
},
// ... more activities
]
}
```
**4. POST /api/vessels/:vesselId/documents/:docId/pin**
```javascript
// Request Body
{
"pinned": true
}
// Expected Response
{
"success": true,
"document": {
"id": "doc_insurance_2025",
"isPinned": true
}
}
```
**5. GET /api/vessels/:vesselId/documents/role/:roleId**
```javascript
// Expected Response
{
"role": "captain",
"documents": [
// Filtered documents based on role permissions
]
}
```
---
### API Test Scenarios
#### Test Scenario: API Call on Component Mount
**Objective:** Verify that API calls are made when component mounts.
**Steps:**
1. Open browser DevTools Network tab
2. Navigate to `/library`
3. Observe network requests
**Expected Network Activity:**
```
GET /api/vessels/lilian-i/documents/essential
GET /api/vessels/lilian-i/documents/categories
GET /api/vessels/lilian-i/activity/recent
```
**Expected Console Output:**
```javascript
console.log('Fetching essential documents for vessel: lilian-i')
console.log('Essential documents loaded:', data)
console.log('Categories loaded:', data)
console.log('Recent activity loaded:', data)
```
**Verification Points:**
- [ ] All 3 API endpoints called on mount
- [ ] Requests include proper headers (Authorization if auth is implemented)
- [ ] Loading states displayed during fetch
- [ ] Error handling works for failed requests
- [ ] Data populates correctly after successful fetch
---
#### Test Scenario: Role Switcher API Integration
**Objective:** Test that role changes trigger filtered document requests.
**Steps:**
1. Navigate to `/library`
2. Open Network tab
3. Click "Captain" role button
4. Observe network activity
**Expected Network Activity:**
```
GET /api/vessels/lilian-i/documents/role/captain
```
**Expected Response Behavior:**
- Documents filtered by captain permissions
- UI updates to show relevant documents
- Document counts may change per role
**Verification Points:**
- [ ] API call made on role change
- [ ] Role ID passed correctly in request
- [ ] Response data updates the UI
- [ ] Loading indicator shown during fetch
- [ ] Previous data cleared before new data loads
---
#### Test Scenario: Category Navigation API
**Objective:** Verify category click triggers navigation with proper parameters.
**Steps:**
1. Navigate to `/library`
2. Click on "Financial" category card
3. Verify router navigation
**Expected Behavior:**
```javascript
// Should navigate to:
router.push({
name: 'category',
params: { categoryId: 'financial' }
})
// Or
router.push('/library/category/financial')
```
**Future API Call:**
```
GET /api/vessels/lilian-i/documents/category/financial
```
**Verification Points:**
- [ ] Router navigation triggered
- [ ] Correct category ID passed
- [ ] Console log shows navigation attempt
- [ ] No JavaScript errors
---
#### Test Scenario: Error Handling
**Objective:** Test component behavior when API calls fail.
**Test Cases:**
**1. Network Error (500):**
- Simulate server error
- Expected: Error message displayed, retry button shown
**2. Not Found (404):**
- Navigate to library for non-existent vessel
- Expected: "No documents found" message
**3. Unauthorized (401):**
- Clear authentication token
- Expected: Redirect to login page
**4. Timeout:**
- Simulate slow network
- Expected: Loading indicator, then timeout message after 10s
**Verification Points:**
- [ ] Error messages are user-friendly
- [ ] Console errors include full error details
- [ ] Retry mechanism available
- [ ] UI doesn't break on error
- [ ] Previous data remains visible on error
---
## DOM Element Verification
### Critical DOM Elements Checklist
Use browser DevTools (F12 > Elements) to verify the following structure:
#### Header Section
```html
Document Library
```
**Verification:**
- [ ] Header has `position: sticky` applied
- [ ] Z-index is 40
- [ ] Glass effect classes present
- [ ] All 4 role buttons exist
- [ ] Active role has gradient background class
---
#### Essential Documents Grid
```html
Insurance Policy 2025
Active
...
...
...
```
**Verification:**
- [ ] Grid uses 3 columns on medium+ screens
- [ ] Each card has `essential-doc-card` class
- [ ] Group hover effects applied
- [ ] Alert badges have correct classes
---
#### Category Grid
```html
Legal & Compliance
8 documents
```
**Verification:**
- [ ] Grid uses 4 columns on large screens
- [ ] 8 category cards rendered
- [ ] Each card has click handler
- [ ] Icons have correct gradient colors
- [ ] Arrow icons present on all cards
---
#### Recent Activity Panel
```html
PDF
Facture n° F1820008157
Uploaded today at 2:30 PM
Indexed
```
**Verification:**
- [ ] Glass panel applied
- [ ] 3 activity items present
- [ ] File type badges have correct colors (PDF=red, XLSX=green, JPG=purple)
- [ ] Timestamps formatted correctly
- [ ] Status badges visible
---
### Element Selector Reference
For automated testing, use these selectors:
```javascript
// Header
const header = document.querySelector('header.glass')
const logoButton = document.querySelector('button[class*="from-primary-500"]')
const roleButtons = document.querySelectorAll('.glass.rounded-xl button')
// Essential Documents
const essentialSection = document.querySelectorAll('.essential-doc-card')
const insuranceCard = essentialSection[0]
const registrationCard = essentialSection[1]
const manualCard = essentialSection[2]
// Categories
const categoryCards = document.querySelectorAll('.category-card')
const legalCategory = categoryCards[0]
const financialCategory = categoryCards[1]
// Recent Activity
const activityItems = document.querySelectorAll('.activity-item')
// Badges
const successBadges = document.querySelectorAll('.badge-success')
const primaryBadges = document.querySelectorAll('.badge-primary')
```
---
## Styling & Design System Tests
### Design System Compliance
#### Color Palette Verification
**Primary Colors:**
- [ ] Primary gradient: `from-primary-500 to-secondary-500`
- [ ] Pink accent: `text-pink-400`, `border-pink-400`
- [ ] Category gradients match specifications
**Test Method:**
```javascript
// In browser console
const element = document.querySelector('.btn-primary')
const styles = window.getComputedStyle(element)
console.log('Background:', styles.background)
// Should show gradient from primary to secondary
```
---
#### Typography Verification
**Font Family:**
- [ ] All text uses Inter font (from Google Fonts)
- [ ] Font weights: 400 (normal), 600 (semibold), 700 (bold), 800 (extrabold)
**Test Method:**
```javascript
const body = document.body
const styles = window.getComputedStyle(body)
console.log('Font family:', styles.fontFamily)
// Should include 'Inter'
```
**Font Sizes:**
| Element | Expected Size | Class |
|---------|---------------|-------|
| H1 (Document Library) | text-xl | 20px |
| H2 (Section titles) | text-2xl | 24px |
| H3 (Card titles) | font-bold | 16px |
| Body text | text-sm | 14px |
| Small text | text-xs | 12px |
---
#### Spacing & Layout
**Container:**
- [ ] Max width: `max-w-7xl` (1280px)
- [ ] Horizontal padding: `px-6` (24px)
- [ ] Vertical padding: `py-8` (32px)
**Grid Gaps:**
- [ ] Essential docs: `gap-4` (16px)
- [ ] Category cards: `gap-4` (16px)
- [ ] Activity items: `space-y-3` (12px between items)
**Section Spacing:**
- [ ] Bottom margin: `mb-12` (48px)
---
#### Glass Morphism Effects
**Glass Class:**
```css
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
```
**Verification:**
- [ ] Header has glass effect
- [ ] Role switcher container has glass effect
- [ ] Essential document cards have glass effect
- [ ] Recent activity panel has glass effect
**Test Method:**
```javascript
const glassElements = document.querySelectorAll('.glass')
glassElements.forEach(el => {
const styles = window.getComputedStyle(el)
console.log('Backdrop filter:', styles.backdropFilter)
// Should include 'blur'
})
```
---
#### Hover & Transition Effects
**Test Cases:**
**1. Card Hover:**
- [ ] Translates up: `-translate-y-1` (4px)
- [ ] Shadow increases: `hover:shadow-soft-lg`
- [ ] Border color brightens: `hover:border-pink-400/50`
- [ ] Transition duration: `duration-300`
**2. Icon Hover:**
- [ ] Scales to 110%: `group-hover:scale-110`
- [ ] Rotates 3deg: `group-hover:rotate-3`
- [ ] Transition: `transition-all duration-300`
**3. Button Hover:**
- [ ] Background changes: `hover:bg-white/10`
- [ ] Text color changes: `hover:text-white`
- [ ] Scale effect: `hover:scale-105`
**Test Method:**
```javascript
// Hover over an element and check computed styles
const card = document.querySelector('.essential-doc-card')
card.addEventListener('mouseenter', () => {
const styles = window.getComputedStyle(card)
console.log('Transform:', styles.transform)
// Should show translateY(-4px)
})
```
---
#### Animations
**Fade-in Animation:**
```css
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
```
**Verification:**
- [ ] Essential doc cards animate in sequence (0.1s, 0.2s, 0.3s)
- [ ] Category cards stagger (0.1s, 0.15s, 0.2s, 0.25s, etc.)
- [ ] Animation duration: 0.4s
- [ ] Easing: ease-out
**Test Method:**
- Refresh page and observe cards appearing
- Use browser DevTools > Animations panel to inspect timing
---
#### Responsive Design
**Breakpoints:**
**Mobile (< 768px):**
- [ ] Grid: 1 column
- [ ] Padding reduces
- [ ] Role switcher may wrap
**Tablet (768px - 1024px):**
- [ ] Essential docs: 3 columns
- [ ] Categories: 3 columns
- [ ] Full spacing maintained
**Desktop (1024px+):**
- [ ] Categories: 4 columns
- [ ] Max container width: 1280px
- [ ] All hover effects active
**Test Method:**
```javascript
// Resize browser window or use DevTools device mode
window.addEventListener('resize', () => {
console.log('Window width:', window.innerWidth)
})
```
---
#### Dark Theme Consistency
**Background:**
- [ ] App background: `linear-gradient(135deg, #1a0b2e 0%, #0a0118 50%, #000000 100%)`
- [ ] Text: `text-white` primary, `text-white/70` secondary
- [ ] Borders: `border-white/10` or `border-white/20`
**Contrast Ratios:**
- [ ] White text on dark background: >= 4.5:1 (WCAG AA)
- [ ] Pink accent on dark background: >= 3:1 (for large text)
**Test Method:**
```javascript
// Use browser DevTools > Lighthouse > Accessibility
// Or use contrast checker extension
```
---
## Accessibility Tests
### WCAG 2.1 Level AA Compliance
#### Keyboard Navigation
**Tab Order Test:**
1. Navigate to `/library`
2. Press Tab key repeatedly
3. Verify focus moves in logical order:
- Logo button
- Role buttons (Owner → Captain → Manager → Crew)
- Pin Document button
- Essential document cards (Insurance → Registration → Manual)
- Category cards (Legal → Financial → ... → Warranties)
- Activity items
**Expected Results:**
- [ ] All interactive elements are reachable via Tab
- [ ] Focus indicator visible (2px solid primary-500 outline)
- [ ] Tab order follows visual layout
- [ ] No keyboard traps
- [ ] Shift+Tab reverses order
---
#### Screen Reader Support
**Test with NVDA (Windows) or VoiceOver (macOS):**
1. Navigate to `/library`
2. Enable screen reader
3. Tab through all elements
**Expected Announcements:**
**Header:**
```
"Button, Navigate to home"
"Heading level 1, Document Library"
"List of 4 items" (role buttons)
"Button, Owner, selected"
"Button, Captain, not selected"
```
**Essential Documents:**
```
"Heading level 2, Essential Documents"
"Button, Pin Document"
"Card, Insurance Policy 2025"
"Badge, Active"
"Alert, Expires in 68 days"
```
**Categories:**
```
"Heading level 2, Browse by Category"
"Button, Legal & Compliance, 8 documents"
```
**Improvements Needed:**
- [ ] Add `role="button"` to category cards
- [ ] Add `aria-label` to icon-only buttons
- [ ] Add `aria-current="true"` to active role
- [ ] Add `aria-live="polite"` for role changes
---
#### ARIA Attributes
**Recommended additions to LibraryView.vue:**
```vue
...
Expires in 68 days (Dec 31, 2025)
```
---
#### Focus Management
**Test Scenarios:**
**1. Modal Focus Trap (Future):**
- When modal opens, focus should move to modal
- Tab should cycle within modal
- Escape should close modal and return focus
**2. Skip Links:**
- Add "Skip to main content" link
- Should be first tabbable element
- Hidden until focused
**3. Focus Restoration:**
- After navigation, focus should restore to logical position
---
#### Color Contrast
**Test with DevTools Lighthouse:**
1. Open DevTools (F12)
2. Go to Lighthouse tab
3. Select "Accessibility"
4. Click "Generate report"
**Expected Passes:**
- [ ] Background and foreground colors have sufficient contrast ratio
- [ ] All text meets WCAG AA (4.5:1 for normal text, 3:1 for large text)
**Manual Checks:**
| Element | Foreground | Background | Ratio | Pass? |
|---------|-----------|------------|-------|-------|
| White text | #FFFFFF | #0a0118 | 19:1 | ✓ |
| White/70 text | rgba(255,255,255,0.7) | #0a0118 | ~13:1 | ✓ |
| Pink-400 text | #f472b6 | #0a0118 | ~8:1 | ✓ |
| Badge text | Various | Various | Check each | - |
---
#### Semantic HTML
**Verification:**
- [ ] Proper heading hierarchy (H1 → H2 → H3)
- [ ] `` used for page header
- [ ] `` used for main content
- [ ] `` used for content sections
- [ ] `