"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { Slider } from "@/components/ui/slider"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Badge } from "@/components/ui/badge"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Accessibility, Eye, Monitor, MousePointer2, Loader2, CheckCircle2, Type, Palette, Volume2, Sparkles, RotateCcw, } from "lucide-react"; export const title = "React Account Block Accessibility Settings"; export default function AccountAccessibility() { const [reducedMotion, setReducedMotion] = useState(false); const [highContrast, setHighContrast] = useState(false); const [screenReader, setScreenReader] = useState(false); const [largeClickTargets, setLargeClickTargets] = useState(false); const [focusIndicators, setFocusIndicators] = useState(true); const [autoplayMedia, setAutoplayMedia] = useState(false); const [fontSize, setFontSize] = useState([100]); const [colorBlindMode, setColorBlindMode] = useState("none"); const [cursorSize, setCursorSize] = useState("default"); const [isSaving, setIsSaving] = useState(false); const handleSave = () => { setIsSaving(true); setTimeout(() => { setIsSaving(false); }, 1500); }; const handleReset = () => { setReducedMotion(false); setHighContrast(false); setScreenReader(false); setLargeClickTargets(false); setFocusIndicators(true); setAutoplayMedia(false); setFontSize([100]); setColorBlindMode("none"); setCursorSize("default"); }; const getFontSizeLabel = (value: number) => { if (value <= 85) return "Small"; if (value <= 100) return "Default"; if (value <= 125) return "Large"; if (value <= 150) return "Extra Large"; return "Maximum"; }; return (

{/* Header */}

Accessibility Settings

Customize your experience for better accessibility

{/* Visual Preferences */}

Visual Preferences

High Contrast Mode

Increase contrast for better visibility

Reduced Motion

Minimize animations and transitions

Enhanced Focus Indicators

Show prominent outlines on focused elements

{/* Font Size */}

Color Vision

Color Blind Mode

Optimize colors for different types of color vision deficiency

None

Default colors

Deuteranopia

Green-blind

Protanopia

Red-blind

Tritanopia

Blue-blind

{/* Interaction */}

Interaction

Large Click Targets

Increase button and link sizes for easier clicking

Cursor Size

Adjust the mouse cursor size

{/* Assistive Technology */}

Assistive Technology

Screen Reader Optimizations

{screenReader && ( Enabled )}

Optimize layout and announcements for screen readers

Autoplay Media

Allow videos and audio to play automatically

{/* Footer */}

Settings are saved to your browser and synced across devices

); }

Accessibility Settings

Visual Preferences

Text Size

Color Vision

Interaction

Assistive Technology

React Account Block Accessibility Settings

Accessibility Settings

Visual Preferences

Text Size

Color Vision

Interaction

Assistive Technology

Installation

Related blocks you will also like

React Account Block Appearance Settings

React Account Block Preferences

React Account Block Language Region

React Account Block Notification Preferences

React Account Block Privacy Settings

React Account Block Basic Information

Questions you might have

How do I persist accessibility settings?

How do I implement reduced motion globally?

How do I implement high contrast mode?

How do I scale fonts throughout the app?

How do I implement color blind friendly modes?

What screen reader optimizations should I implement?