feat: fix a11y issues in tree table component#693
Open
fateeand wants to merge 6 commits into
Open
Conversation
fateeand
requested review from
TerranceKhumalo-absa,
korel-san and
lukasmatta
as code owners
Contributor
Coverage report for libraryCaution An unexpected error occurred. For more details, check console
Test suite run success2171 tests passing in 62 suites. Report generated by 🧪jest coverage report action from 2772ffd |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR focuses on resolving accessibility gaps in the cps-tree-table (and related table UI) by improving keyboard/focus behavior, ARIA semantics, and scaling-friendly sizing (px→rem), plus adding/expanding automated coverage (unit tests + Playwright AXE runs).
Changes:
- Refactored tree-table directives (filter/sort/resize/toggle/select) and added new behaviors for ARIA + keyboard/focus handling.
- Updated
cps-tree-table/cps-tabletemplates and styles to improve focus visibility, semantics (scope,aria-busy,role="status"), and rem-based sizing. - Added comprehensive Jest specs for new/updated directives/components and expanded Playwright accessibility coverage to include the tree-table page states.
Reviewed changes
Copilot reviewed 37 out of 37 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/cps-ui-kit/src/public-api.ts | Updates exports to new directive/pipe folder structure for tree-table. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/pipes/cps-tree-table-detect-filter-type/cps-tree-table-detect-filter-type.pipe.ts | Fixes relative import path; removes explicit standalone: true from pipe metadata. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/pipes/cps-tree-table-detect-filter-type/cps-tree-table-detect-filter-type.pipe.spec.ts | Adds unit coverage for filter-type detection behavior and edge cases. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-toggler/cps-tree-table-row-toggler.directive.ts | Updates row toggler to react to input changes and adjusts passed rowNode shape. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-toggler/cps-tree-table-row-toggler.directive.spec.ts | Adds unit coverage for toggler DOM behavior and input-change handling. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-selectable/cps-tree-table-row-selectable.directive.ts | Adds PrimeNG PT config to improve checkbox labeling/tabbability. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-selectable/cps-tree-table-row-selectable.directive.spec.ts | Adds unit tests validating PT/ARIA wiring and DOM insertion. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-header-selectable/cps-tree-table-header-selectable.directive.ts | Adds PrimeNG PT config to label the “select all rows” checkbox. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-header-selectable/cps-tree-table-header-selectable.directive.spec.ts | Adds unit tests for header checkbox PT/ARIA wiring. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-sortable/cps-tree-table-column-sortable.directive.ts | Replaces legacy sortable directive with custom implementation that manages aria-sort and sort icon. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-sortable/cps-tree-table-column-sortable.directive.spec.ts | Adds unit tests around sorting behavior and aria-sort updates. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-sortable.directive.ts | Removes the legacy directive that extended PrimeNG TTSortableColumn. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable/cps-tree-table-column-resizable.directive.ts | Introduces keyboard-accessible column resizing + indicator/colgroup patching for TreeTable. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable/cps-tree-table-column-resizable.directive.spec.ts | Adds extensive unit tests for keyboard resizing and patching behavior. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive.ts | Removes the legacy minimal resizable directive in favor of the new implementation. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-filter/cps-tree-table-column-filter.directive.ts | Moves directive into a folder and fixes relative imports; removes explicit standalone: true. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-filter/cps-tree-table-column-filter.directive.spec.ts | Adds unit test coverage for filter directive input forwarding and helper methods. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts | Adds paginator keyboard handling and PT passthrough; integrates column-visibility toggle component; improves rem-based sizing calculations. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.spec.ts | Adds broad unit coverage for defaults, paging helpers, passthrough behavior, and events. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss | Improves focus styling and rem-based sizing; updates paginator/checkbox/resizer focus visuals. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html | Replaces ngClass/ngStyle with binding alternatives; adds ARIA + semantics; swaps columns menu for visibility toggle component. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.ts | Adjusts resizing math/units and patches resize indicator positioning for DataTable. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.spec.ts | Updates tests to match px-based resize-table-width behavior and new patch flags. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts | Adds header-height CSS variable measurement; adds export-menu width sync on open. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss | Updates toolbar spacing and focus-outline positioning logic using header-height CSS var. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html | Replaces icon-button patterns with cps-button + ARIA expanded/haspopup; switches ngStyle to style binding. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.ts | Switches toggle control to cps-button and updates imports/host structure. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.spec.ts | Updates tests to match new DOM structure (button component wrapper). |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.scss | Adds wrapper class styling and icon sizing overrides for the new button. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.html | Updates template to use cps-button with ARIA popup/expanded state. |
| projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts | Adds ariaHaspopup / ariaExpanded inputs for better ARIA control on buttons. |
| projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html | Wires aria-haspopup / aria-expanded attributes onto the native button element. |
| projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html | Updates demo page to use rem-based scroll heights/empty heights. |
| projects/composition/src/app/pages/menu-page/menu-page.component.ts | Adds local open/close state flags for accurate aria-expanded binding in demos. |
| projects/composition/src/app/pages/menu-page/menu-page.component.html | Adds ariaHaspopup + ariaExpanded bindings and tracks menu open state via events. |
| projects/composition/src/app/api-data/cps-button.json | Documents the new ariaHaspopup / ariaExpanded button inputs. |
| playwright/cps-accessibility.spec.ts | Adds tree-table route and per-tab setup states to accessibility test coverage. |
Comment on lines
+20
to
+24
| selector: '[cpsTTColSortable]', | ||
| host: { | ||
| class: 'p-sortable-column', | ||
| '(click)': 'onClick($event)' | ||
| } |
Comment on lines
+56
to
+60
| onClick(event: MouseEvent): void { | ||
| if ((event.target as Element)?.closest('.cps-table-col-filter')) return; | ||
| this.tt.sort({ field: this.field }); | ||
| DomHandler.clearSelection(); | ||
| } |
Contributor
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 tree table 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
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
[N/A] Error Handling
Dynamic Content / Updates
Interaction Feedback / States
[N/A] Authentication & Sensitive Actions
Predictable & Controllable UI
Release notes: