fix: Code quality and accessibility improvements#63
Merged
Conversation
Accessibility (a11y):
- Add aria-label to all icon-only buttons whose visible text is hidden on
mobile (Restore/Edit in ArchiveItem, Restore/Delete/Edit in
ArchiveEditDialog header, Edit/Delete per-task buttons in
ArchiveEditDialog table, Edit/Delete in ProjectManagement)
- Replace focus:outline-none with focus-visible:outline-none + focus-visible
ring on Radix TabsTrigger elements in ArchiveItem — browser focus rings were
completely removed for all users, now removed only for pointer clicks while
remaining visible for keyboard navigation
- Connect Label/Textarea pairs via htmlFor+id in ArchiveEditDialog (day notes)
and TaskEditInArchiveDialog (task description) so screen readers announce the
field label when the textarea receives focus
Code Quality — theme variable adoption:
- Replace text-gray-900 with text-foreground (headings in ArchiveItem,
ArchiveEditDialog, ProjectManagement)
- Replace text-gray-600/500/400 with text-muted-foreground (secondary text in
all five components)
- Replace text-gray-700 with text-muted-foreground on TabsTrigger active
indicator classes in ArchiveItem
- Replace bg-gray-50 dark:bg-gray-800 with bg-muted in ArchiveItem note/
summary panels; update print:border-gray-300 to print:border-border;
update prose-p:text-gray-700 prose modifiers to prose-p:text-muted-foreground
- Replace data-[state=active]:border-blue-600 with data-[state=active]:border-
primary on tab triggers in ArchiveItem
- Replace text-red-*/bg-red-*/border-red-* with text-destructive/
bg-destructive/5/border-destructive/20 in ArchiveEditDialog delete
confirmation card and ExportDialog import error alert
- Switch icon-only Delete buttons from custom text-red-600 outline to
variant="destructive" in ArchiveEditDialog task table and ProjectManagement
- Replace required-field asterisk text-red-700 with text-destructive in
TaskEditInArchiveDialog
Inline style violations:
- ArchiveEditDialog: style={{ marginBottom: '1rem' }} → className="mb-4"
- ExportDialog: style={{ display: 'none' }} → className="hidden"
https://claude.ai/code/session_012AmNjF3Ju9VJwSWybJqBEw
AdamJ
added
enhancement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Accessibility
aria-labelto all icon-only buttons (Restore, Edit, Delete, task-level edit/delete) inArchiveItem,ArchiveEditDialog, andProjectManagementfocus:outline-none→focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ringonArchiveItemtab triggers<Label>to<Textarea>viahtmlFor/idinArchiveEditDialog(Notes) andTaskEditInArchiveDialog(Description)Code Quality
text-gray-600/900/400,text-red-600/700/900,border-red-200,bg-red-50) with Radix theme variables (text-muted-foreground,text-foreground,text-destructive,border-destructive/20,bg-destructive/5)styleprops with Tailwind utility classes inArchiveEditDialogandExportDialogvariant="destructive"inArchiveEditDialogandProjectManagement