Skip to content

bug: five accessibility problems worth fixing #99

Description

@aashu2006

The basics are mostly there, aria-labels on icon buttons, a radiogroup in the report dialog, sr-only drawer titles. These five are not.

1. Borders are basically invisible in dark mode

src/index.css:117 sets --border: 220 12% 16% against --background: 220 15% 6%. That is around 1.5:1.

2. Text below 12px

Muted foreground used at 10 and 11px in a few places, for example src/pages/PromptDetail.tsx:726, :739, :748.

3. Hardcoded black over user images

src/components/prompts/PromptCard.tsx:264 puts text-black on the mobile menu trigger, in both themes, sitting on top of whatever image the user uploaded.

4. We ignore reduced motion

No prefers-reduced-motion block anywhere in src/index.css.

5. The delete confirm is a hand rolled modal

src/components/prompts/PromptCard.tsx:645-670 is a raw fixed inset-0 div. No focus trap, no escape to close, no scroll lock, no dialog role. Every other modal uses the Radix one in src/components/ui/dialog.tsx.

The one action you cannot undo is in the least accessible dialog we have, and you can tab straight out of it while it is open.

Done when

Borders hit 3:1, no body text under 12px, the menu trigger is legible over light and dark images, animations respect the system setting, and the delete confirm uses the shared dialog with focus trapped.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Quality and scalabilityaccessibilityBarrier affecting people with disabilitieshelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions