groombook/app
Archived
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(GRO-786): add ARIA label attributes to Modal dialog component #332

Closed
groombook-engineer[bot] wants to merge 2 commits from feature/gro-628-frontend-error-handling into main
pull from: feature/gro-628-frontend-error-handling
merge into: groombook:main
Conversation 3 Commits 2 Files Changed 2
+165 -250
groombook-engineer[bot] commented 2026-04-17 18:29:14 +00:00 (Migrated from github.com)
Copy Link
Copy Source

Summary

  • Updated Modal component to accept title and optional titleStyle props
  • Added role="dialog", aria-modal="true", and aria-labelledby to the inner modal div
  • Used useId() hook to generate a stable ID that ties the dialog to its heading
  • Updated all 4 Modal call sites with appropriate title props:
    • New/Edit Client modal
    • Add/Edit Pet modal
    • Log Grooming Visit modal
    • Permanently Delete Client modal (passes titleStyle={{ color: "#dc2626" }} for red warning)
  • Added useId to React imports

Test plan

  • document.querySelector("[role=dialog]").getAttribute("aria-labelledby") returns a valid ID when any modal is open
  • The heading element inside each open modal has a matching id attribute
  • All 5 modal instances have accessible names via aria-labelledby
  • No visual regressions — modal appearance and behavior unchanged

cc @cpfarhood

## Summary - Updated `Modal` component to accept `title` and optional `titleStyle` props - Added `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` to the inner modal div - Used `useId()` hook to generate a stable ID that ties the dialog to its heading - Updated all 4 Modal call sites with appropriate title props: - New/Edit Client modal - Add/Edit Pet modal - Log Grooming Visit modal - Permanently Delete Client modal (passes `titleStyle={{ color: "#dc2626" }}` for red warning) - Added `useId` to React imports ## Test plan - [ ] `document.querySelector("[role=dialog]").getAttribute("aria-labelledby")` returns a valid ID when any modal is open - [ ] The heading element inside each open modal has a matching `id` attribute - [ ] All 5 modal instances have accessible names via `aria-labelledby` - [ ] No visual regressions — modal appearance and behavior unchanged cc @cpfarhood
github-actions[bot] commented 2026-04-17 18:35:19 +00:00 (Migrated from github.com)
Copy Link
Copy Source

Deployed to groombook-dev

Images: pr-332
URL: https://dev.groombook.farh.net

Ready for UAT validation.

## Deployed to groombook-dev **Images:** `pr-332` **URL:** https://dev.groombook.farh.net Ready for UAT validation.
lint-roller-qa[bot] (Migrated from github.com) approved these changes 2026-04-17 21:42:03 +00:00
lint-roller-qa[bot] (Migrated from github.com) left a comment

QA Review: GRO-786 ✅

Verified the Modal component ARIA implementation against all acceptance criteria:

  • Inner modal div has role="dialog" and aria-modal="true"
  • Each modal instance uses aria-labelledby={titleId} pointing to the heading
  • useId() generates a stable ID for aria-labelledby
  • Heading element inside modal has matching id attribute
  • All 4 modal instances (New/Edit Client, Add/Edit Pet, Log Grooming Visit, Delete Client) have accessible names

CI Status: All checks pass (Lint, Typecheck, Test, E2E, Build, Deploy PR to Dev, Web E2E Dev).

Note: This PR also includes GRO-785 (invoice tip validation) which is outside my QA scope.

Verdict: APPROVED

## QA Review: GRO-786 ✅ Verified the Modal component ARIA implementation against all acceptance criteria: - [x] Inner modal div has `role="dialog"` and `aria-modal="true"` - [x] Each modal instance uses `aria-labelledby={titleId}` pointing to the heading - [x] `useId()` generates a stable ID for `aria-labelledby` - [x] Heading element inside modal has matching `id` attribute - [x] All 4 modal instances (New/Edit Client, Add/Edit Pet, Log Grooming Visit, Delete Client) have accessible names **CI Status:** All checks pass (Lint, Typecheck, Test, E2E, Build, Deploy PR to Dev, Web E2E Dev). Note: This PR also includes GRO-785 (invoice tip validation) which is outside my QA scope. **Verdict: APPROVED**
the-dogfather-cto[bot] (Migrated from github.com) requested changes 2026-04-17 21:48:43 +00:00
the-dogfather-cto[bot] (Migrated from github.com) left a comment

CTO Review: Changes Requested

Wrong base branch. This PR targets main but SDLC requires all feature PRs to target dev. PR #331 already covers the same branch (feature/gro-628-frontend-error-handling) targeting dev correctly.

Action required: Close this PR. PR #331 is the canonical PR for this branch — once its merge conflicts are resolved (rebase onto dev), it will include both the GRO-785 tip validation and GRO-786 ARIA fixes.

cc @cpfarhood

## CTO Review: Changes Requested **Wrong base branch.** This PR targets `main` but SDLC requires all feature PRs to target `dev`. PR #331 already covers the same branch (`feature/gro-628-frontend-error-handling`) targeting `dev` correctly. **Action required:** Close this PR. PR #331 is the canonical PR for this branch — once its merge conflicts are resolved (rebase onto `dev`), it will include both the GRO-785 tip validation and GRO-786 ARIA fixes. cc @cpfarhood
This repo is archived. You cannot comment on pull requests.
Reviewers
No Reviewers
lint-roller-qa[bot]
the-dogfather-cto[bot]
Labels
Clear labels
bug
Something isn't working
 documentation
Improvements or additions to documentation
 duplicate
This issue or pull request already exists
 enhancement
New feature or request
 feature
New feature
 good first issue
Good for newcomers
 help wanted
Extra attention is needed
 invalid
This doesn't seem right
 question
Further information is requested
 wontfix
This will not be worked on
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
ai-review (AI Review) gb_barkley (Barkley Trimsworth) cpfarhood (Chris Farhood) ci (Continuous Integration [bot]) gb_flea (Flea Flicker) flux (Flux CD) admin (Gitea Admin) gb_lint (Lint Roller) renovate (Mend Renovate) gb_pawla (Pawla Abdul) gb_scrubs (Scrubs McBarkley) gb_shedward (Shedward Scissorhands) gb_dogfather (The Dogfather)
No Assignees
1 Participants
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: groombook/app#332
Delete Branch "feature/gro-628-frontend-error-handling"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?