Skip to content

Make admin link buttons single links and name remaining controls - #1831

Merged
KOliver94 merged 2 commits into
mainfrom
admin-a11y-2
Oct 14, 2026
Merged

KOliver94 merged 2 commits into
mainfrom
admin-a11y-2

Conversation

@KOliver94

Copy link
Copy Markdown
Member

A second accessibility pass over the admin, after #1827. Nothing changes visually, except that the recording toggles and the rating count lose a stray pointer cursor.

Link buttons

LinkButton rendered a PrimeReact Button inside a router Link: two tab stops for one control, with the name announced twice. It now renders a single Link with PrimeReact's button markup: the same classes, the icon and label spans (an empty label for icon-only buttons, so heights match real buttons), and the click ripple. Its props are narrowed to what the 11 callers use.

Labels and names

  • Labels that pointed at nothing now reach their inputs:
    • the date fields of the request and video search forms and of a user's "worked on" section get inputId;
    • the search forms' text and duration inputs get the id their labels point at;
    • the search status MultiSelects switch from id to inputId.
  • Unnamed controls get a name:
    • the requester choice ("Felkérő", mobile dropdown and desktop buttons);
    • the recording path ("Elérési út");
    • the rating, todo and request list dropdowns ("Rendezés", "Státusz", "Félév");
    • the crew table's inline editors ("Stábtag", "Pozíció");
    • the search page's request/video toggle ("Videók keresése").
  • FormField marks a field with an error with aria-invalid and links its message with aria-describedby. PrimeReact's Calendar keeps ARIA props on its wrapper, so for date fields they go to the input through pt.

Keyboard

  • The recording's "Felmásolva Google Driveba" and "Törölve" toggles were clickable tags that the keyboard couldn't reach. They are buttons now, with their icons hidden from screen readers.
  • The "n Értékelés" count on the video page was a focusable link that did nothing. It is plain text now.

…d buttons, and match link-button height and ripple to PrimeReact buttons
@coderabbitai

coderabbitai Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 07311f00-1b16-4ea9-a725-20eabd8dcbb1
📥 Commits

Reviewing files that changed from the base of the PR and between 69f075c and 833a6cf.

📒 Files selected for processing: 12
  • frontend/src/admin/components/Details/Request/Crew/CrewDataTable.tsx
  • frontend/src/admin/components/Details/Request/RecordingContent.tsx
  • frontend/src/admin/components/Details/Video/Ratings.tsx
  • frontend/src/admin/components/FormField/FormField.tsx
  • frontend/src/admin/components/LinkButton/LinkButton.tsx
  • frontend/src/admin/components/Search/RequestSearchForm.tsx
  • frontend/src/admin/components/Search/VideoSearchForm.tsx
  • frontend/src/admin/components/UserProfile/WorkedOnSection.tsx
  • frontend/src/admin/pages/RequestCreatorEditorPage.tsx
  • frontend/src/admin/pages/RequestsListPage.tsx
  • frontend/src/admin/pages/SearchPage.tsx
  • frontend/src/admin/pages/TodosPage.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Admin interface controls gain accessible names and field associations. FormField passes validation attributes to child controls. Recording status tags use button wrappers, the rating count is no longer a link, and LinkButton renders a styled link directly.

Changes: Admin interface accessibility

Layer / File(s) Summary
Form field names and validation
frontend/src/admin/components/FormField/FormField.tsx, frontend/src/admin/components/Search/RequestSearchForm.tsx, frontend/src/admin/components/Search/VideoSearchForm.tsx, frontend/src/admin/components/UserProfile/WorkedOnSection.tsx
FormField supplies aria-describedby and aria-invalid to child controls. Search and profile date controls receive IDs based on their field names.
Detail-view control names and interactions
frontend/src/admin/components/Details/Request/Crew/CrewDataTable.tsx, frontend/src/admin/components/Details/Request/RecordingContent.tsx, frontend/src/admin/components/Details/Video/Ratings.tsx
Detail-view controls gain accessible names. Recording status tags use button wrappers that are disabled while loading. The rating count changes from an anchor to a span.
Navigation and page-level controls
frontend/src/admin/components/LinkButton/LinkButton.tsx, frontend/src/admin/pages/RequestCreatorEditorPage.tsx, frontend/src/admin/pages/RequestsListPage.tsx, frontend/src/admin/pages/SearchPage.tsx, frontend/src/admin/pages/TodosPage.tsx
LinkButton renders a link with PrimeReact button styling. Page-level controls gain accessible names.

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to 833a6

The accessibility changes are ready to merge after normal checks; no actionable issue was identified.

Pre-merge checks: Passed 5
Passed Passed checks: 5 passed
Check name Status Explanation
Title check Passed The title clearly summarizes the two main changes: simplifying admin link buttons and adding accessible names to remaining controls.
Description check Passed The description directly explains the accessibility changes in the files, including single-link buttons, accessible labels, keyboard-accessible toggles, and field error attributes.
Docstring Coverage Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 12 files.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 30 lines in your changes missing coverage. Please review.
✅ Project coverage is 42.63%. Comparing base (69f075c) to head (833a6cf).
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...ntend/src/admin/components/FormField/FormField.tsx 0.00% 14 Missing ⚠️
...in/components/Details/Request/RecordingContent.tsx 0.00% 9 Missing ⚠️
...end/src/admin/components/LinkButton/LinkButton.tsx 0.00% 7 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1831      +/-   ##
==========================================
- Coverage   42.68%   42.63%   -0.05%     
==========================================
  Files         273      273              
  Lines        6949     6956       +7     
  Branches     1386     1394       +8     
==========================================
  Hits         2966     2966              
- Misses       3960     3967       +7     
  Partials       23       23              
Flag Coverage Δ
backend 97.33% <ø> (ø)
frontend 4.55% <0.00%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@KOliver94

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Oct 14, 2026 •

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@KOliver94
KOliver94 merged commit 80ec7bf into main Oct 14, 2026
16 checks passed
@KOliver94
KOliver94 deleted the admin-a11y-2 branch October 14, 2026 17:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant