Fix a11y issues in dialog component by fateeand · Pull Request #577 · AbsaOSS/cps-shared-ui

fateeand · 2026-05-04T17:34:45Z

Fixing accessibility issues in dialog component

Validation rules:

Validated using Playwright accessibility tests, Lighthouse tool, axe DevTools extension, Accessibility Insights for Web extension, and manual checks including keyboard tab navigation and screen reader testing.

Full doc with rules

Playwright axe-core validation results:

State before:

Component	aria-roles	button-name	color-contrast	tabindex
Dialog	✅	❌	❌	-

State after:

Component	aria-roles	button-name	color-contrast	tabindex
Dialog	✅	✅	✅	✅

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
- Semantic HTML is used correctly.
- ARIA roles, states, and properties are applied only when needed.
- All form fields, tables, and widgets (including autocomplete, tree selects, tree tables, drag-and-drop, sliders, and multi-selects) are properly labeled and accessible.
Color / Contrast
- Text and interactive elements meet contrast requirements (≥4.5:1 normal text, ≥3:1 large text).
- Focus and selection indicators are visually perceivable.
- Color is not the only indicator of state.
Screen Reader / Assistive Technology
- All content, labels, and dynamic updates are perceivable via screen readers.
- Live regions announce status messages, alerts, modals, notifications, and dynamic changes.
- Interactive widgets provide proper announcements of selection and updates.
Responsive & Zoom
- Components function correctly and remain readable at all viewport sizes and up to 200% zoom, including mobile and touch devices.
- Prefer em/rem units over px where scaling is required.
[N/A] Error Handling
- Errors are clearly identified visually and programmatically.
- Form inputs use aria-describedby or aria-invalid for inline messages.
- Instructions and suggestions are accessible.
Dynamic Content / Updates
- Status updates, alerts, notifications, and modals use live regions.
- Updates do not disrupt focus or user control unexpectedly.
Interaction Feedback / States
- All interactive states (hover, focus, active, disabled, drag-and-drop, reordering, multi-select) are visually perceivable.
[N/A] Authentication & Sensitive Actions
- Inputs and actions involving sensitive data provide accessible instructions, feedback, and error messages.
Predictable & Controllable UI
- Components behave consistently and predictably.
- Popups, modals, autocomplete suggestions, drag-and-drop, and dynamic content allow user control.

Additional changes:

convertSize function now passes through all valid CSS values (e.g., calc(), auto, fit-content, min(), vw, etc.). It also validates input strings, and it is now also fine to pass negative numbers.
parseSize function now returns null instead of throwing when the value doesn't have the expected unit, and its regex has been updated to support negative numbers.

Release notes:

Fix a11y issues in dialog component

github-actions · 2026-05-04T17:36:30Z

Coverage report for library

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	34.46%	2426/7041
🔴	Branches	28.94%	945/3265
🔴	Functions	31.14%	459/1474
🔴	Lines	35.3%	2283/6467

Test suite run success

580 tests passing in 24 suites.

Report generated by 🧪jest coverage report action from b92e6b9

github-actions · 2026-05-04T17:39:10Z

Playwright test results

66 passed

Details

66 tests across 4 suites
1 minute, 58 seconds
b92e6b9
For details, download the Playwright report

Copilot

Pull request overview

This PR updates the cps-ui-kit dialog implementation and its composition docs/examples to address accessibility issues around dialog labeling, focus behavior, keyboard interaction, and scalable sizing.

Changes:

Added dialog accessibility options and behaviors, including ARIA labeling, configurable autofocus, focus trapping/restoration, and keyboard-based move/resize support.
Converted dialog-related sizing/styling from fixed px values to rem-aware sizing utilities and refreshed demos/defaults/docs accordingly.
Re-enabled dialog coverage in the Playwright accessibility suite and updated tooltip accessibility behavior.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
`projects/cps-ui-kit/src/lib/services/cps-dialog/utils/cps-dialog-config.ts`	Expanded dialog config API with ARIA, autofocus, and numeric/string sizing options.
`projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.ts`	Implemented most dialog accessibility, focus, drag, resize, and size-conversion logic.
`projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.scss`	Updated dialog visuals, focus states, and rem-based styling for draggable/resizable states.
`projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.html`	Added ARIA attributes, tabindexes, keyboard hooks, and resizable handle markup.
`projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-confirmation/cps-confirmation.component.scss`	Converted confirmation dialog spacing/text sizing to rem units.
`projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-confirmation/cps-confirmation.component.html`	Tweaked confirmation button styling/colors.
`projects/cps-ui-kit/src/lib/services/cps-dialog/cps-dialog.service.ts`	Updated confirmation dialog default width constraints to rem values.
`projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts`	Adjusted tooltip focus behavior and ARIA description/linking logic.
`projects/composition/src/app/pages/dialog-page/dialog-page.component.ts`	Updated dialog demo configs to exercise new autofocus and rem sizing options.
`projects/composition/src/app/pages/dialog-page/dialog-page.component.html`	Updated demo button copy to reflect new autofocus example behavior.
`projects/composition/src/app/components/dialog-content/dialog-content.component.scss`	Converted dialog demo content spacing/icon sizing to rem units.
`projects/composition/src/app/api-data/types_map.json`	Registered the new dialog autofocus type for generated docs.
`projects/composition/src/app/api-data/cps-dialog.json`	Refreshed generated dialog API docs to match new config options and types.
`playwright/cps-accessibility.spec.ts`	Re-enabled dialog route in the accessibility smoke suite.

Co-authored-by: Copilot <[email protected]>

lukasmatta · 2026-05-06T13:54:42Z

    this._document.body.appendChild(this._popup);
-    this._ariaTarget?.setAttribute('aria-describedby', this._tooltipId);
+    this._ariaTarget?.setAttribute(
+      'aria-description',


Any specific reason to use aria-description? Docs states the following:

Note: aria-description is still in W3C Editor's Draft for ARIA 1.3. For the time being, continue to use aria-describedby, which has been supported since ARIA 1.1.

(applies also to aria-description in the dialog component)

Yes, there was a specific issue where tooltip content wasn't announced by screen readers when used inside modal dialogs. This is likely because the modal dialog creates an accessibility boundary, so tooltips referenced through aria-describedby are not reachable, since they are rendered in another overlay.

Using aria-description avoids this problem since it attaches the description directly to the element. It produces exactly the same outcome for screen readers as aria-describedby. Since it works without any issues in Chromium, I think we can go ahead with this approach.

lukasmatta · 2026-05-06T14:01:09Z

close button should be disabled when disableClose is true

good catch - fixed

lukasmatta · 2026-05-06T14:12:36Z

-        const unit = parsedHeight.unit;
-        const size = parsedHeight.value * 0.4;
-        const isPx = unit === 'px';
+        if (parsedHeight) {


Changes of the parseSize/convertSize are not documented in the PR description.

added to PR description

lukasmatta · 2026-05-06T14:20:24Z

+          aria-description="Use arrow keys to resize"
+          (mousedown)="initResize($event)"
+          (keydown)="onResizeHandleKeydown($event)"
+          (keyup)="onResizeHandleKeyup($event)">


keyboard resizing seems to be buggy, can only be resized to be bigger, not smaller

Thanks, it broke while I was addressing the feedback from copilot. Fixed now

lukasmatta · 2026-05-06T14:35:25Z

It's out of the scope of this PR, but it'd be great if the a11y tests were grouped by the component they target.

Opened #580 for this.

Co-authored-by: Copilot <[email protected]>

fateeand added 2 commits May 4, 2026 17:42

Fix a11y issues in dialog component

af9b82c

listen to root font size

669c86f

Copilot AI review requested due to automatic review settings May 4, 2026 17:34

fateeand requested review from TerranceKhumalo-absa, korel-san and lukasmatta as code owners May 4, 2026 17:34

fateeand linked an issue May 4, 2026 that may be closed by this pull request

Fix a11y issues in dialog component #560

Open

Copilot started reviewing on behalf of fateeand May 4, 2026 17:35 View session

Copilot AI reviewed May 4, 2026

View reviewed changes

fateeand and others added 4 commits May 5, 2026 11:51

update dialog a11y tests

b0f258c

address copilot feedback

b5fbb40

Co-authored-by: Copilot <[email protected]>

Merge branch 'master' into 560-fix-ally-issues-in-dialog-component

6c5dd03

restore focus check

44e3531

Co-authored-by: Copilot <[email protected]>

fateeand linked an issue May 6, 2026 that may be closed by this pull request

Add unit tests for Dialog component #576

Open

lukasmatta reviewed May 6, 2026

View reviewed changes

fateeand and others added 6 commits May 6, 2026 16:55

add UTs

904eff6

Co-authored-by: Copilot <[email protected]>

disable close button if disableClose is true

6d4c01a

Co-authored-by: Copilot <[email protected]>

fix resizing

11835f3

Co-authored-by: Copilot <[email protected]>

remove redundant line

a32e6b2

add validator

1380bb2

Co-authored-by: Copilot <[email protected]>

support negative

b92e6b9

Co-authored-by: Copilot <[email protected]>

Conversation

fateeand commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixing accessibility issues in dialog component

Validation rules:

Playwright axe-core validation results:

State before:

State after:

Checklist

Additional changes:

Release notes:

Uh oh!

github-actions Bot commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for library

Test suite run success

Uh oh!

github-actions Bot commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Playwright test results

Details

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fateeand commented May 4, 2026 •

edited

Loading

github-actions Bot commented May 4, 2026 •

edited

Loading

github-actions Bot commented May 4, 2026 •

edited

Loading