jhoang304 / jhoang304/Whelp

Accessibility pass: missing alt text, unlabeled inputs, invalid list markup, keyboard support

Open
#37 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
0
Forks
0
Avg merge
2h 19m
Merged PRs (30d)
30

Description

## Summary
Concrete findings from the scan:

- **7 `` elements without `alt`**: `DisplayPhotos/index.tsx:70,122`, `Reviews/GetAllReviews/index.tsx:73`, `UserPage/index.tsx:101,166,232`, `UserPage/UpdateProfile.tsx:133`. Some carry `alt=""` on purpose for decorative avatars; confirm those and add real text everywhere else (photo-grid images should describe the restaurant).
- **Placeholder-only inputs** in `CreateRestaurantModal` (lines 150-273): no `` elements, so screen readers announce nothing and the hint disappears as soon as the user types.
- **Invalid list markup**: `Navigation/ProfileButton.tsx:70-110` renders `

` and `` directly inside `
    `.
    - **Tabs without keyboard support**: `role="tablist"` / `role="tab"` in `AddPhotoModal`, `CreateRestaurantModal` and `UpdateProfile` have no `aria-controls`, no arrow-key handling, and the panels lack `role="tabpanel"`. Plain toggle buttons would be more honest.
    - `OpenModalButton` renders `
` with no `type`, so inside a `` it submits the form.
- The modal (`context/Modal.js`) has no focus trap, no `aria-modal`, no Escape-to-close, and focus isn't returned on close.
- `window.confirm` is used for deleting reviews and responses while restaurants get a styled `ConfirmDeleteModal`; unify on the modal.
- `` and `` (`LoginFormPage:106`, `SignupFormPage:123`) cause full page reloads; use ``. The search page's "Try Again" calls `window.location.reload()`.
- `RatingStar` is pure SVG with no text alternative; add `aria-label="4.5 out of 5 stars"`.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the listed TSX components, context/Modal.js, OpenModalButton, and RatingStar, grouping the findings by images, forms, navigation, and modals. Verify each named location against the scan; done means meaningful or intentional alt text, labeled controls, valid list structure, accessible modal and tab behavior, and client-side links without the reported reloads.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.