Staff handle#37
Merged
Merged
Conversation
|
Thank you for following naming conventions! 😻 |
There was a problem hiding this comment.
Pull Request Overview
This PR implements enhanced UI components for staff management sections with improved visual design, accessibility features, and filtered count displays.
Key Changes
- Added
descriptionfield to tab/filter descriptors across all staff management components - Implemented filtered count displays with
aria-liveannouncements - Enhanced tab/filter chip styling with custom CSS variables and improved visual states
- Added
aria-pressedattributes and improved accessibility labels for interactive elements
Reviewed Changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/features/staff/vehicle-management/vehicle-management.ts | Added description to VehicleTabDescriptor interface and filteredCount computed signal |
| src/app/features/staff/vehicle-management/vehicle-management.scss | Redesigned status tabs with grid layout, custom accent colors, and refined visual states |
| src/app/features/staff/vehicle-management/vehicle-management.html | Updated tab structure with description display, count caching, and improved accessibility |
| src/app/features/staff/staff-dashboard/staff-dashboard.ts | Added description to BookingTabDescriptor interface and filteredCount computed signal |
| src/app/features/staff/staff-dashboard/staff-dashboard.scss | Enhanced tab styling with improved visual hierarchy and accessibility |
| src/app/features/staff/staff-dashboard/staff-dashboard.html | Implemented description display and accessibility improvements with aria-label and aria-pressed |
| src/app/features/staff/renter-management/renter-management.ts | Added riskCounts computed signal for risk filter counts |
| src/app/features/staff/renter-management/renter-management.scss | Redesigned filter chips with risk-specific accent colors |
| src/app/features/staff/renter-management/renter-management.html | Added count display and accessibility attributes to filter chips |
| src/app/features/staff/rental-management/rental-management.ts | Added description to RentalTabDescriptor interface and filteredCount computed signal |
| src/app/features/staff/rental-management/rental-management.scss | Enhanced tab styling consistent with other staff components |
| src/app/features/staff/rental-management/rental-management.html | Implemented description display and accessibility improvements |
| .vscode/settings.json | Reformatted with consistent indentation (2 spaces) and added new tool-specific settings |
| .specify/templates/*.md | Added new specification workflow templates for tasks, spec, plan, checklist, and agent files |
| .specify/scripts/powershell/*.ps1 | Added PowerShell automation scripts for feature workflow management |
| .specify/memory/constitution.md | Added project constitution defining core principles and governance |
| .github/prompts/*.md | Added prompt templates for specification workflow commands |
| [class.status-tab--active]="activeTab() === tab.key" | ||
| (click)="onTabSelect(tab.key)" | ||
| [attr.aria-pressed]="activeTab() === tab.key" | ||
| [attr.aria-label]="tab.label + '. ' + tab.description" |
There was a problem hiding this comment.
The aria-label attribute should include the count value to provide complete information to screen reader users. Currently, it only includes the label and description, but the count is important context.
Suggestion: Update to include the count:
[attr.aria-label]="tab.label + '. ' + tab.description + '. ' + counters[tab.counterKey] + ' items'"
Suggested change
| [attr.aria-label]="tab.label + '. ' + tab.description" | |
| [attr.aria-label]="tab.label + '. ' + tab.description + '. ' + counters[tab.counterKey] + ' items'" |
| [class.filter-chip--active]="riskFilter() === filter.key" | ||
| (click)="setRiskFilter(filter.key)" | ||
| [attr.aria-pressed]="riskFilter() === filter.key" | ||
| [attr.aria-label]="filter.label + '. ' + filter.description" |
There was a problem hiding this comment.
The aria-label attribute should include the count value to provide complete information to screen reader users. Currently, it only includes the label and description, but the count is important context.
Suggestion: Update to include the count:
[attr.aria-label]="filter.label + '. ' + filter.description + '. ' + counts[filter.key] + ' items'"
Suggested change
| [attr.aria-label]="filter.label + '. ' + filter.description" | |
| [attr.aria-label]="filter.label + '. ' + filter.description + '. ' + counts[filter.key] + ' items'" |
| [class.status-tab--active]="activeTab() === tab.key" | ||
| (click)="onTabSelect(tab.key)" | ||
| [attr.aria-pressed]="activeTab() === tab.key" | ||
| [attr.aria-label]="tab.label + '. ' + tab.description" |
There was a problem hiding this comment.
The aria-label attribute should include the count value to provide complete information to screen reader users.
Suggestion: Update to include the count:
[attr.aria-label]="tab.label + '. ' + tab.description + '. ' + counters[tab.counterKey] + ' items'"
Suggested change
| [attr.aria-label]="tab.label + '. ' + tab.description" | |
| [attr.aria-label]="tab.label + '. ' + tab.description + '. ' + counters[tab.counterKey] + ' items'" |
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
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.
No description provided.