ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
44 lines
1.7 KiB
Plaintext
44 lines
1.7 KiB
Plaintext
---
|
|
description: Accessibility non-negotiables for all UI work
|
|
globs: app/**/*.tsx,components/**/*.tsx
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Accessibility Rules (Amin Rayan)
|
|
|
|
Follow `docs/design-system/accessibility.md`. Accessibility outranks visual experimentation.
|
|
|
|
## Always
|
|
|
|
- Preserve visible focus styles (`focus-visible:ring-*`); never remove outlines without a replacement.
|
|
- Provide accessible names for icon-only buttons (`aria-label`).
|
|
- Use semantic HTML (`button`, `a`, `label`, landmarks) before ARIA.
|
|
- Associate form controls with labels; set `aria-invalid` and error text when invalid.
|
|
- Honor `prefers-reduced-motion` for new animations (prefer `MotionReveal` / CSS reduced-motion hooks).
|
|
- Keep touch targets ≥ 40px for primary icon actions; inputs ≥ 36px (16px font on mobile).
|
|
- Write meaningful `alt` text for informative images; empty alt / `aria-hidden` for decorative ones.
|
|
- Verify contrast for text and interactive states in both light and dark themes.
|
|
- Ensure keyboard access for menus, sheets, dialogs (prefer existing Radix primitives).
|
|
|
|
## Never
|
|
|
|
- Rely on color alone to convey state.
|
|
- Use `outline-none` / `ring-0` without an equivalent focus treatment.
|
|
- Trap keyboard focus outside modal patterns.
|
|
- Ship motion that ignores reduced-motion preferences.
|
|
- Use placeholder-only fields without a visible label.
|
|
- Disable zoom or block paste for arbitrary reasons.
|
|
|
|
## Quick checks before finishing
|
|
|
|
1. Tab through the UI — can you reach and operate everything?
|
|
2. Toggle dark mode — is text still readable?
|
|
3. Icon buttons — do they announce a name?
|
|
4. Motion — does reduced motion disable entrance animations?
|
|
|
|
## References
|
|
|
|
- `docs/design-system/accessibility.md`
|
|
- `docs/design-system/forms.md`
|
|
- `docs/design-system/motion.md`
|