feat: fix a11y issues in table component#680
Open
fateeand wants to merge 18 commits into
Open
Conversation
fateeand
requested review from
TerranceKhumalo-absa,
korel-san and
lukasmatta
as code owners
Contributor
Coverage report for library
Test suite run success1818 tests passing in 51 suites. Report generated by 🧪jest coverage report action from a514463 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility of the cps-table component and related internal table UI (sorting, filtering, pagination, row actions, and row reordering), and adds automated coverage to prevent regressions.
Changes:
- Adds/updates accessible interactive affordances (proper buttons, ARIA labels/states, focus-visible styles, keyboard handlers) across table toolbar, header, row expansion, row actions, and column filter UI.
- Introduces keyboard-based row reordering with live announcements and stronger paginator keyboard navigation/focus management.
- Refactors table directives into dedicated subfolders and adds Jest unit tests + re-enables Playwright a11y coverage for the Table composition page states.
Reviewed changes
Copilot reviewed 41 out of 42 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/cps-ui-kit/src/public-api.ts | Updates exports to match the new directive/pipe folder structure. |
| projects/cps-ui-kit/src/lib/components/cps-table/pipes/cps-table-detect-filter-type/cps-table-detect-filter-type.pipe.ts | Adjusts import path after pipe relocation. |
| projects/cps-ui-kit/src/lib/components/cps-table/pipes/cps-table-detect-filter-type/cps-table-detect-filter-type.pipe.spec.ts | Adds unit tests for filter-type detection behavior. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-row-selectable/cps-table-row-selectable.directive.ts | Adds row-checkbox directive (new file). |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-row-selectable/cps-table-row-selectable.directive.spec.ts | Adds unit tests for row-checkbox directive. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-header-selectable/cps-table-header-selectable.directive.ts | Sets header checkbox aria label for “select all”. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-header-selectable/cps-table-header-selectable.directive.spec.ts | Adds unit tests for header-checkbox directive. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-sortable/cps-table-column-sortable.directive.ts | Replaces old sortable directive implementation with an a11y-focused version (new location). |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-sortable/cps-table-column-sortable.directive.spec.ts | Adds unit tests for sortable directive behavior/ARIA. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-sortable.directive.ts | Removes old sortable directive file. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.ts | Adds keyboard-resizable column support + ARIA separator semantics (new location). |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.spec.ts | Adds unit tests for resizable directive (keyboard + patch behavior). |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable.directive.ts | Removes old resizable directive file. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-filter/cps-table-column-filter.directive.ts | Updates imports after directive relocation. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-filter/cps-table-column-filter.directive.spec.ts | Adds unit tests for column filter directive. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts | Adds keyboard reorder state, paginator key handling, live announcer integration, and pass-through ARIA adjustments. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.spec.ts | Adds comprehensive unit tests for new table behaviors. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss | Improves focus-visible styling, rem-based sizing, and visual affordances for a11y. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html | Adds ARIA attributes, replaces icon-click affordances with buttons, adds keyboard reorder handle semantics, and new column toggle component. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.ts | Tracks open state to drive aria-expanded. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.spec.ts | Adds unit tests for row action menu accessibility state. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.scss | Updates styles for button affordance + focus ring. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.html | Converts row actions trigger to a <button> with aria attributes. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.ts | Adds a keyboard-navigable listbox-based column visibility toggle (new component). |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.spec.ts | Adds unit tests for column visibility toggle keyboard and ARIA behavior. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.scss | Styles for the listbox-like column toggle menu. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.html | Renders toggle button + listbox options markup and ARIA. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.ts | Tracks open state to drive aria-expanded and styling hooks. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.spec.ts | Adds unit tests for filter menu open state and ARIA. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.scss | Refines sizing and focus styling for filter trigger and controls. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html | Converts interactive icons to buttons; adds aria-expanded/labels and keyboard affordances. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter-constraint/table-column-filter-constraint.component.spec.ts | Adds unit tests for constraint inputs by type. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter-constraint/table-column-filter-constraint.component.scss | Switches sizing to rem. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.ts | Makes sort icon keyboard-focusable with role/button semantics and aria-label updates. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.spec.ts | Adds unit tests for keyboard sorting and aria-label changes. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.scss | Adds focus-visible styling + spacing adjustments. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.html | Marks purely visual sort indicators as aria-hidden. |
| projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html | Sets a consistent width for the “items per page” select. |
| projects/composition/src/app/pages/table-page/table-page.component.ts | Adds missing alt text for an example image in HTML-rendering demo data. |
| projects/composition/src/app/pages/table-page/table-page.component.scss | Converts padding to rem. |
| projects/composition/src/app/pages/table-page/table-page.component.html | Converts scroll/height examples to rem units. |
| playwright/cps-accessibility.spec.ts | Re-enables table route and adds per-tab state coverage for a11y tests. |
Comments suppressed due to low confidence (1)
projects/cps-ui-kit/src/lib/components/cps-table/pipes/cps-table-detect-filter-type/cps-table-detect-filter-type.pipe.ts:7
- In Angular v21+ standalone is the default, so
standalone: trueshould be removed from the pipe metadata to avoid redundant configuration and align with the project guideline.
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 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
Additional changes
Bugs fixed:
rowexpansiontoexpandedrowin a version released between 19-21.p-column-resizer-helpertop-datatable-column-resize-indicatorbetween versions 19-21.Release notes: