UI Components
Accessible, responsive components following WCAG 2.1 AA guidelines with color-blind-safe design patterns.
Mini Calendar Navigator
Compact month navigator for quick date jumping with availability density indicators.
Features
- • Month navigation with keyboard support
- • Selected day highlighting
- • Availability density indicators (low/medium/high)
- • Today indicator
- • Full ARIA labels for screen readers
Calendar View Toggle
Switch between month, week, day, and agenda views with accessible tab navigation.
Features
- • Four view modes: Month, Week, Day, Agenda
- • Keyboard navigation (arrow keys)
- • Screen reader friendly with ARIA roles
- • Responsive icon-only mode on mobile
- • Visual feedback for active state
Calendar Agenda View
Chronological list view grouped by month, optimized for screen readers and mobile.
Availability Agenda
October 2026
- SunOct 180 slotsNo slots
- MonOct 193 slotsLimited
- TueOct 206 slotsFull
- WedOct 219 slotsAvailable
- ThuOct 222 slotsLimited
- FriOct 235 slotsFull
- SatOct 248 slotsAvailable
- SunOct 251 slotLimited
- MonOct 264 slotsFull
- TueOct 277 slotsAvailable
- WedOct 280 slotsNo slots
- ThuOct 293 slotsLimited
- FriOct 306 slotsFull
- SatOct 319 slotsAvailable
Features
- • Grouped by month for easy scanning
- • Linear list layout for screen readers
- • Status chips with color coding
- • Slot count display
- • Book action buttons
Availability Legend
Color-blind-safe legend with dual encoding (color + pattern + icon).
Features
- • Four states: Open, Held, Sold, Blocked
- • Dual encoding: color + pattern + icon
- • Horizontal and vertical variants
- • Unique patterns for each state
- • Descriptive labels for accessibility
Review Composer
Full-featured review submission with star ratings, photo uploads, and alt-text requirements.
Write a Review
Drag and drop photos here, or click to browse
0/5 photos uploaded
Features
- • Per-criterion star ratings (1-5)
- • Character-limited comment with counter
- • Drag-and-drop photo uploads
- • Required alt-text for all photos
- • Photo preview with removal option
- • Save as draft functionality
- • Form validation before submit
- • Full keyboard navigation
Reviews and Ratings UI
Components for displaying review distribution, individual reviews, and filtering capabilities.
Rating Histogram & Star Half-Fill Rendering
Star half-fills are rendered via an SVG linearGradient. It ensures smooth rendering across devices without duplicating half-star icons, and relies on strict numeric aria-label constraints on a single parent element instead of each individual decorative star SVG.
4.7
Based on 128 reviews
- 5 stars74%
- 4 stars16%
- 3 stars6%
- 2 stars2%
- 1 stars2%
Review Filters
Review Card
Accessibility Compliance
WCAG 2.1 AA
All components meet WCAG 2.1 AA standards for color contrast, keyboard navigation, and screen reader support.
Color Blind Safe
Dual encoding (color + pattern + icon) ensures information is conveyed regardless of color vision.
Responsive
Mobile-first design with touch-friendly targets and adaptive layouts for all screen sizes.
Keyboard Navigation
Full keyboard support with visible focus states and logical tab order throughout.