Fix a11y issues in button component

[fateeand]

Fixing accessibility issues in button 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:

Component	button-name	color-contrast
Button	❌	✅

---

State after:

Component	button-name	color-contrast
Button	✅	✅

---

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.

• [N/A] 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.

---

Release notes:

• Fix a11y issues in button component

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	29.82%	1892/6345
🔴	Branches	23.46%	672/2864
🔴	Functions	25.26%	342/1354
🔴	Lines	30.65%	1789/5836

Test suite run success

427 tests passing in 21 suites.

Report generated by 🧪jest coverage report action from 5975ace

[github-actions]

Playwright test results

 40 passed

Details

 40 tests across 4 suites
 1 minute, 19 seconds
 5975ace
 For details, download the Playwright report

[Copilot]

Pull request overview

This PR addresses accessibility issues in the cps-button component by ensuring it has a discernible accessible name, improving loading-state semantics, and adding stronger visible focus/keyboard interaction styling. It also updates the composition/demo pages to use ariaLabel for icon-only buttons and adjusts spacing units to improve zoom/responsiveness.

Changes:

• Add ariaLabel support and ARIA attributes (aria-label, aria-busy, aria-disabled, aria-hidden) to improve screen reader behavior, especially during loading.
• Add keyboard “Enter pressed” visual state handling (enterActive) and focus-visible styling enhancements.
• Update composition pages (demo app) styles and icon-only button examples to align with accessibility/zoom requirements.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts	Adds ariaLabel input and Enter key active-state tracking methods.
projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html	Applies ARIA attributes, hides decorative elements from AT, and binds key handlers / active class.
projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.scss	Adds focus-visible ring styling and keyboard-active styling; converts several sizes to rem.
projects/composition/src/app/pages/button-page/button-page.component.html	Supplies ariaLabel for icon-only button examples.
projects/composition/src/app/pages/button-page/button-page.component.scss	Converts px→rem and adjusts margins for better zoom/responsiveness.
projects/composition/src/app/pages/tooltip-page/tooltip-page.component.scss	Converts px→rem and adds margins for layout at higher zoom.
projects/composition/src/app/pages/notification-page/notification-page.component.scss	Converts px→rem and adds margins for layout at higher zoom.
projects/composition/src/app/pages/menu-page/menu-page.component.scss	Converts px→rem and adds margins for layout at higher zoom.
projects/composition/src/app/pages/dialog-page/dialog-page.component.scss	Converts px→rem and adds margins for layout at higher zoom.
projects/composition/src/app/pages/chip-page/chip-page.component.scss	Converts px→rem and adds margins for layout at higher zoom.

[TerranceKhumalo-absa]

Code looks good! Just the focus ring doesn't adapt when a custom borderRadius is passed to the button.

should it not instead be

@include focus-ring(0.25rem, 0.3125rem, $radius: inherit); // since borderRadius is set dynamically via ngStyle

[fateeand]

good catch!