[V0_FILE]typescriptreact:file="accessible-canvas.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect, type KeyboardEvent } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Keyboard, Move, Trash2, HelpCircle, X } from "lucide-react" interface CardItem { id: string title: string content: string position: { x: number; y: number } } const INITIAL_CARDS: CardItem[] = [ { id: "1", title: "Card 1", content: "This is the first card", position: { x: 0, y: 0 } }, { id: "2", title: "Card 2", content: "This is the second card", position: { x: 250, y: 0 } }, { id: "3", title: "Card 3", content: "This is the third card", position: { x: 0, y: 150 } }, { id: "4", title: "Card 4", content: "This is the fourth card", position: { x: 250, y: 150 } }, ] export default function AccessibleCanvas() { // Initial cards data const [cards, setCards] = useState(INITIAL_CARDS) // State for tracking focus, selection, and modes const [focusedCardId, setFocusedCardId] = useState(null) const [selectedCardIds, setSelectedCardIds] = useState([]) const [isMoveMode, setIsMoveMode] = useState(false) const [showHelp, setShowHelp] = useState(false) // Refs for cards to manage focus const cardRefs = useRef<{ [key: string]: HTMLDivElement | null }>({}) // Set up initial focus when component mounts useEffect(() => { if (cards.length > 0 && !focusedCardId) { setFocusedCardId(cards[0].id) } }, [cards, focusedCardId]) // Focus the card when focusedCardId changes useEffect(() => { if (focusedCardId && cardRefs.current[focusedCardId]) { cardRefs.current[focusedCardId]?.focus() } }, [focusedCardId]) // Handle keyboard navigation between cards const handleCardKeyDown = (e: KeyboardEvent, cardId: string) => { const currentIndex = cards.findIndex((card) => card.id === cardId) // Prevent default behavior for arrow keys to avoid scrolling if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) { e.preventDefault() } switch (e.key) { case "ArrowRight": // Move to the next card horizontally or wrap around if (isMoveMode && selectedCardIds.includes(cardId)) { moveSelectedCards(10, 0) } else { const nextCardIndex = (currentIndex + 1) % cards.length setFocusedCardId(cards[nextCardIndex].id) } break case "ArrowLeft": // Move to the previous card horizontally or wrap around if (isMoveMode && selectedCardIds.includes(cardId)) { moveSelectedCards(-10, 0) } else { const prevCardIndex = (currentIndex - 1 + cards.length) % cards.length setFocusedCardId(cards[prevCardIndex].id) } break case "ArrowDown": // Move to the card below or wrap around if (isMoveMode && selectedCardIds.includes(cardId)) { moveSelectedCards(0, 10) } else { // Simple logic to move down in a 2x2 grid const downCardIndex = (currentIndex + 2) % cards.length setFocusedCardId(cards[downCardIndex].id) } break case "ArrowUp": // Move to the card above or wrap around if (isMoveMode && selectedCardIds.includes(cardId)) { moveSelectedCards(0, -10) } else { // Simple logic to move up in a 2x2 grid const upCardIndex = (currentIndex - 2 + cards.length) % cards.length setFocusedCardId(cards[upCardIndex].id) } break case " ": case "Enter": // Toggle selection of the card e.preventDefault() // Prevent scrolling with space toggleCardSelection(cardId) break case "m": case "M": // Toggle move mode if (selectedCardIds.length > 0) { setIsMoveMode(!isMoveMode) // Announce mode change for screen readers announceForScreenReader(isMoveMode ? "Exited move mode" : "Entered move mode") } break case "Delete": case "Backspace": // Delete selected cards if (selectedCardIds.length > 0) { deleteSelectedCards() } break case "Escape": // Exit move mode or clear selection if (isMoveMode) { setIsMoveMode(false) announceForScreenReader("Exited move mode") } else if (selectedCardIds.length > 0) { setSelectedCardIds([]) announceForScreenReader("Cleared selection") } else if (showHelp) { setShowHelp(false) } break case "?": // Toggle help panel if (e.shiftKey) { setShowHelp(!showHelp) } break case "r": case "R": // Reset canvas resetCanvas() break } } // Toggle card selection const toggleCardSelection = (cardId: string) => { setSelectedCardIds((prev) => { if (prev.includes(cardId)) { const newSelection = prev.filter((id) => id !== cardId) announceForScreenReader(`Card ${cardId} deselected`) return newSelection } else { announceForScreenReader(`Card ${cardId} selected`) return [...prev, cardId] } }) } // Move selected cards const moveSelectedCards = (deltaX: number, deltaY: number) => { setCards((prev) => prev.map((card) => { if (selectedCardIds.includes(card.id)) { return { ...card, position: { x: card.position.x + deltaX, y: card.position.y + deltaY, }, } } return card }), ) } // Delete selected cards const deleteSelectedCards = () => { if (selectedCardIds.length === 0) return // Find the next card to focus after deletion const remainingCardIds = cards.filter((card) => !selectedCardIds.includes(card.id)).map((card) => card.id) // Set focus to the first remaining card or null if none left const nextFocusId = remainingCardIds.length > 0 ? remainingCardIds[0] : null // Delete the selected cards setCards((prev) => prev.filter((card) => !selectedCardIds.includes(card.id))) setSelectedCardIds([]) setFocusedCardId(nextFocusId) announceForScreenReader(`Deleted ${selectedCardIds.length} cards`) } const resetCanvas = () => { setCards(INITIAL_CARDS) setSelectedCardIds([]) setIsMoveMode(false) setFocusedCardId(INITIAL_CARDS[0]?.id || null) announceForScreenReader("Canvas reset to original state") } // Screen reader announcements const [announcement, setAnnouncement] = useState("") const announceForScreenReader = (message: string) => { setAnnouncement(message) } return (

Accessible Canvas

{/* Status bar */}

Mode: {isMoveMode ? "Move" : "Select"}

Selected: {selectedCardIds.length} cards

{/* Help panel */} {showHelp && (

Keyboard Shortcuts

Tab Move focus between cards

Arrow Keys Navigate between cards

Space/Enter Select or deselect a card

M Toggle move mode

Delete/Backspace Delete selected cards

Esc Exit mode or clear selection

Shift+? Toggle this help panel

R Reset canvas to original state

)} {/* Canvas area */}

{cards.map((card) => (

(cardRefs.current[card.id] = el)} className={`absolute p-4 w-[200px] transition-all duration-150 ${ focusedCardId === card.id ? "ring-2 ring-primary ring-offset-2" : "" } ${selectedCardIds.includes(card.id) ? "bg-primary/10 border-primary" : "bg-card"}`} style={{ transform: `translate(${card.position.x}px, ${card.position.y}px)`, zIndex: focusedCardId === card.id ? 10 : 1, }} tabIndex={0} role="button" aria-pressed={selectedCardIds.includes(card.id)} aria-label={`${card.title}${selectedCardIds.includes(card.id) ? ", selected" : ""}${isMoveMode && selectedCardIds.includes(card.id) ? ", in move mode" : ""}`} onKeyDown={(e) => handleCardKeyDown(e, card.id)} onFocus={() => setFocusedCardId(card.id)} onClick={() => toggleCardSelection(card.id)} >

{card.title}

{card.content}

{/* Visual indicators for card state */}

{selectedCardIds.includes(card.id) && ( Selected )} {isMoveMode && selectedCardIds.includes(card.id) && ( Moving )}

))}

{/* Action buttons */}

{/* Instructions */}

How to use

Use Tab to focus on cards
Press Space or Enter to select a card
Use Arrow Keys to navigate between cards
Press M to toggle move mode for selected cards
In move mode, use Arrow Keys to move the selected cards
Press Delete or Backspace to delete selected cards
Press Escape to exit the current mode or clear selection
Press Shift+? to toggle the help panel
Press R to reset the canvas to its original state

{/* Screen reader announcements */}

{announcement}

) }

About

About