Copilot instructions

1---
2applyTo: "apps/studio/**"
3---
4 
5# shadcn/Radix UI Component Review Rules
6 
7All comments are **advisory**.
8 
9## Core Principle
10 
11This project uses **shadcn/ui** components built on **Radix UI** primitives (from `packages/ui/`). These components provide comprehensive accessibility out-of-the-box. **Do not flag missing accessibility attributes that are already handled by the underlying Radix primitives.**
12 
13## Components with Built-In Accessibility — Do NOT Flag
14 
15The following components (imported from `ui`) already handle ARIA roles, keyboard navigation, focus management, and screen reader support automatically via Radix UI primitives:
16 
17| Component | What Radix Handles |
18|-----------|-------------------|
19| `Dialog`, `AlertDialog` | `role="dialog"`, `aria-modal`, focus trapping, ESC to close |
20| `DropdownMenu`, `ContextMenu` | `role="menu"` / `role="menuitem"`, arrow key navigation |
21| `Select` | `role="combobox"`, `aria-expanded`, keyboard selection |
22| `Tabs` | `role="tablist"` / `role="tab"` / `role="tabpanel"`, `aria-selected`, arrow keys |
23| `Checkbox` | `role="checkbox"`, `aria-checked`, Space to toggle |
24| `RadioGroup` | `role="radio"`, `aria-checked`, arrow key navigation |
25| `Switch` | `role="switch"`, `aria-checked`, keyboard toggle |
26| `Tooltip` | Trigger/content association, show/hide timing |
27| `Accordion`, `Collapsible` | `aria-expanded`, Enter/Space to toggle |
28| `Popover`, `HoverCard` | Focus management, dismiss on ESC |
29| `Slider` | `role="slider"`, `aria-valuemin/max/now`, arrow keys |
30| `Toggle`, `ToggleGroup` | `aria-pressed`, keyboard support |
31| `ScrollArea` | Accessible scrollbar replacement |
32| `NavigationMenu` | `role="navigation"`, keyboard navigation |
33 
34### Specifically, Never Flag These
35 
36- Missing `role` on `Dialog`, `AlertDialog`, `DropdownMenu`, `Select`, `Tabs`, `RadioGroup`, or other Radix-based components — roles are set by the primitive
37- Missing `aria-modal` on `Dialog` or `AlertDialog` — set automatically
38- Missing `aria-expanded` on `Accordion`, `Collapsible`, `Select`, or `DropdownMenu` triggers — managed by Radix state
39- Missing `aria-selected` on `Tabs` — managed by `TabsPrimitive`
40- Missing `aria-checked` on `Checkbox`, `RadioGroup`, or `Switch` — managed by Radix state
41- Missing keyboard event handlers (`onKeyDown`, `onKeyUp`) on interactive Radix components — keyboard support is built-in
42- Missing focus management in `Dialog` or `AlertDialog` — focus trapping is automatic
43- Missing `aria-label` on `DialogClose` or `AlertDialogCancel` — these render a visible `<span className="sr-only">Close</span>`
44 
45## What TO Flag
46 
47Only flag accessibility issues for:
48 
491. **Custom interactive elements** not using Radix primitives (e.g., a `<div onClick>` that should be a `<button>`)
502. **Icon-only buttons** missing an accessible label — `<Button>` alone does not add one; use `aria-label` or `<span className="sr-only">`
513. **Missing `Label` association** — form inputs should be paired with `<Label htmlFor="...">` or wrapped in a `<Field>` component
524. **Images missing `alt` text** — not handled by any component library
535. **Color-only state indicators** — state changes should not rely solely on color
54