Skip to content
C
Design System
← Back to App

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.

AccessibleResponsiveWCAG 2.1 AA

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.

AccessibleKeyboard Nav

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.

Screen ReaderMobile FirstWCAG 2.1 AA

Availability Agenda

October 2026

  • SunOct 18
    0 slotsNo slots
  • MonOct 19
    3 slotsLimited
  • TueOct 20
    6 slotsFull
  • WedOct 21
    9 slotsAvailable
  • ThuOct 22
    2 slotsLimited
  • FriOct 23
    5 slotsFull
  • SatOct 24
    8 slotsAvailable
  • SunOct 25
    1 slotLimited
  • MonOct 26
    4 slotsFull
  • TueOct 27
    7 slotsAvailable
  • WedOct 28
    0 slotsNo slots
  • ThuOct 29
    3 slotsLimited
  • FriOct 30
    6 slotsFull
  • SatOct 31
    9 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).

Color Blind SafeDual EncodingWCAG 2.1 AA
OpenAvailable for booking
HeldTemporarily reserved
SoldFully booked
BlockedNot available
OpenAvailable for booking
HeldTemporarily reserved
SoldFully booked
BlockedNot available

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.

AccessibleDrag & DropAlt Text Required

Write a Review

Rate your experience
0/5

How quickly did they respond?

0/5

Was the work high quality?

0/5

Was communication clear?

0/5

Was it worth the cost?

0/500

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.

AccessibleStar Half-fill

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 stars
    74%
  • 4 stars
    16%
  • 3 stars
    6%
  • 2 stars
    2%
  • 1 stars
    2%

Review Filters

Review Card

Sarah JenkinsVerified
The final result exceeded my expectations. Communication was prompt and professional throughout the process. Highly recommend for any complex frontend work.

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.