Fix a11y issues in timepicker component#636
Open
fateeand wants to merge 1 commit into
Open
Conversation
fateeand
requested review from
TerranceKhumalo-absa,
korel-san and
lukasmatta
as code owners
Coverage report for library
Test suite run success898 tests passing in 31 suites. Report generated by 🧪jest coverage report action from 85b4477 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR focuses on resolving accessibility gaps in CpsTimepickerComponent, re-enabling automated a11y coverage for the component, and adjusting TypeScript project configs to support API generation and editor tooling.
Changes:
- Added
ariaLabelsupport to the timepicker and propagated usage updates where the component is embedded (e.g., scheduler). - Introduced comprehensive unit tests for
CpsTimepickerComponentand re-enabled its Playwright axe scan. - Updated TypeScript config files to fix documentation/API generation entry-point detection and composition app path resolution.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.generator.json | Adds explicit include roots for generator/TypeDoc entry points. |
| projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.ts | Adds ariaLabel input + runtime a11y warning. |
| projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.html | Updates timepicker field labeling and sizing (rem units). |
| projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.scss | Converts select spacing/sizing from px to rem. |
| projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.spec.ts | Adds unit test coverage for timepicker behavior and validation. |
| projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html | Provides ariaLabel to embedded timepickers. |
| projects/composition/tsconfig.json | Adds a composition app tsconfig to ensure path mappings work in tooling. |
| projects/composition/src/app/pages/timepicker-page/timepicker-page.component.scss | Converts layout gap from px to rem. |
| projects/composition/src/app/api-data/cps-timepicker.json | Documents the new ariaLabel prop. |
| playwright/cps-accessibility.spec.ts | Re-enables axe scan for the timepicker route. |
Comment on lines
+229
to
+233
| ngOnChanges(): void { | ||
| if (!this.label?.trim() && !this.ariaLabel?.trim()) { | ||
| console.error( | ||
| 'CpsTimepickerComponent: unlabeled timepicker component must have an ariaLabel for accessibility.' | ||
| ); |
Comment on lines
42
to
+46
| <cps-autocomplete | ||
| #minutesField | ||
| ariaLabel="Minutes" | ||
| (keypress)="numberOnly($event)" | ||
| width="60" | ||
| width="3.75rem" |
Playwright test results
Details
|
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.
Fixing accessibility issues in timepicker component
Validation rules:
Validated using Playwright accessibility tests, Lighthouse tool, and manual checks including keyboard tab navigation and screen reader testing.
Full doc with rules
Playwright axe-core validation results:
State before:
State after:
Checklist
Keyboard Navigation
All interactive elements are fully operable via keyboard only, including buttons, inputs, menus, dialogs, sliders, drag-and-drop, tree views, multi-selects, and composite widgets. No traps or dead ends.
Focus Management
Focus is visible, logical, moves in predictable order, trapped where necessary (modals/popovers), and restored after closing. Focus is perceivable in all interactive widgets.
Semantics / ARIA
Color / Contrast
Screen Reader / Assistive Technology
Responsive & Zoom
Error Handling
Dynamic Content / Updates
Interaction Feedback / States
Authentication & Sensitive Actions
Predictable & Controllable UI
Additional changes
Updated
tsconfig.spec.jsonsincenpm run generate-json-apiwas failing with[error] Unable to find any entry points. The root tsconfig has "files": [], so TypeDoc requires the tsconfig to explicitly include those files.Added
composition/tsconfig.jsonsincecps-ui-kitcouldn't be found by TS within composition app. VSCode's language server finds "files: []" and since the component file isn't explicitly included, it treats it as an inferred project which doesn't inherit the paths mapping.Release notes: