Fix a11y issues in radio component

playwright/cps-accessibility.spec.ts

@@ -27,7 +27,7 @@ const components: ComponentEntry[] = [
     selector: 'cps-button-toggle'
   },
   { route: '/checkbox', name: 'Checkbox', selector: 'cps-checkbox' },
-  { route: '/chip', name: 'Chip', selector: 'cps-chip' }
+  { route: '/chip', name: 'Chip', selector: 'cps-chip' },
   // {
   //   route: '/datepicker',
   //   name: 'Datepicker',
@@ -90,7 +90,7 @@ const components: ComponentEntry[] = [
   //   name: 'Progress linear',
   //   selector: 'cps-progress-linear'
   // },
-  // { route: '/radio-group', name: 'Radio', selector: 'cps-radio-group' },
+  { route: '/radio-group', name: 'Radio', selector: 'cps-radio-group' }
   // { route: '/scheduler', name: 'Scheduler', selector: 'cps-scheduler' },
   // {
   //   route: '/select',

projects/composition/src/app/api-data/cps-notification.json

@@ -127,7 +127,7 @@
                         "optional": true,
                         "readonly": false,
                         "type": "number",
-                        "description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\r\nValue 0 means that the notification is persistent and will not be automatically closed."
+                        "description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\nValue 0 means that the notification is persistent and will not be automatically closed."
                     },
                     {
                         "name": "allowDuplicates",

projects/composition/src/app/api-data/cps-radio-group.json

@@ -5,9 +5,17 @@
             "props": {
                 "description": "Defines the input properties of the component.",
                 "values": [
+                    {
+                        "name": "groupName",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Name attribute for the radio input, used to group buttons within the same radio group."
+                    },
                     {
                         "name": "option",
-                        "optional": true,
+                        "optional": false,
                         "readonly": false,
                         "type": "CpsRadioOption",
                         "description": "An option."
@@ -87,6 +95,14 @@
                         "default": "",
                         "description": "Label of the radio group."
                     },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Aria label for the radio group, used for accessibility, it takes precedence over groupLabel."
+                    },
                     {
                         "name": "vertical",
                         "optional": false,
@@ -225,7 +241,7 @@
         "values": [
             {
                 "name": "CpsRadioOption",
-                "value": "{\n    \"value\": \"any\",\n    \"label\": \"string\",\n    \"disabled\": \"boolean\",\n    \"tooltip\": \"string\"\n}",
+                "value": "{\n    \"value\": \"any\",\n    \"label\": \"string\",\n    \"ariaLabel\": \"string\",\n    \"disabled\": \"boolean\",\n    \"tooltip\": \"string\"\n}",
                 "description": "CpsRadioOption is used to define the options of the CpsRadioGroupComponent."
             }
         ]

projects/composition/src/app/api-data/cps-table.json

@@ -107,22 +107,22 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "showRowEditButton",
                         "optional": false,
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "rowMenuItems",
                         "optional": true,
                         "readonly": false,
                         "type": "CpsMenuItem[]",
-                        "description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
+                        "description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
                     },
                     {
                         "name": "reorderableRows",
@@ -178,7 +178,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
+                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
                     },
                     {
                         "name": "sortMode",
@@ -570,15 +570,15 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "false",
-                        "description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
+                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
                     },
                     {
                         "name": "columnResizeMode",
                         "optional": false,
                         "readonly": false,
                         "type": "\"expand\" | \"fit\"",
                         "default": "fit",
-                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },

projects/composition/src/app/api-data/cps-tree-table.json

@@ -123,22 +123,22 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "showRowEditButton",
                         "optional": false,
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "rowMenuItems",
                         "optional": true,
                         "readonly": false,
                         "type": "CpsMenuItem[]",
-                        "description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
+                        "description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
                     },
                     {
                         "name": "loading",
@@ -530,7 +530,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
+                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
                     },
                     {
                         "name": "showExportBtn",
@@ -586,15 +586,15 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "false",
-                        "description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
+                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
                     },
                     {
                         "name": "columnResizeMode",
                         "optional": false,
                         "readonly": false,
                         "type": "\"expand\" | \"fit\"",
                         "default": "fit",
-                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },

projects/composition/src/app/api-data/cron-validation.service.json

@@ -1,7 +1,7 @@
 {
     "components": {},
     "name": "CronValidationService",
-    "description": "Service for validating 6-field cron expressions with extended features.\r\n\r\nThis service handles cron validation logic for extended cron expression formats\r\nthat support additional features beyond standard Unix cron for more flexible\r\nscheduling capabilities.\r\n\r\nFormat: minutes hours day-of-month month day-of-week year\r\n\r\nKey Features:\r\n- Wildcards: asterisk (any value), question mark (any value for day fields)\r\n- Ranges: 1-5, MON-FRI, JAN-MAR\r\n- Steps: asterisk/15, 5/10, 1-5/2\r\n- Lists: 1,3,5, MON,WED,FRI\r\n- Special chars: L (last), W (weekday), hash (nth occurrence)",
+    "description": "Service for validating 6-field cron expressions with extended features.\n\nThis service handles cron validation logic for extended cron expression formats\nthat support additional features beyond standard Unix cron for more flexible\nscheduling capabilities.\n\nFormat: minutes hours day-of-month month day-of-week year\n\nKey Features:\n- Wildcards: asterisk (any value), question mark (any value for day fields)\n- Ranges: 1-5, MON-FRI, JAN-MAR\n- Steps: asterisk/15, 5/10, 1-5/2\n- Lists: 1,3,5, MON,WED,FRI\n- Special chars: L (last), W (weekday), hash (nth occurrence)",
     "methods": {
         "description": "Methods used in service.",
         "values": [

projects/composition/src/app/pages/radio-page/radio-page.component.html

@@ -14,6 +14,12 @@
       infoTooltip="Provide any information here"
       value="second">
     </cps-radio-group>
+    <cps-radio-group
+      groupLabel="Vertical radio group"
+      [options]="options"
+      value="second"
+      [vertical]="true">
+    </cps-radio-group>
     <cps-radio-group
       groupLabel="Disabled vertical radio group"
       [options]="options"
@@ -38,7 +44,11 @@
       class="custom-content-example"
       [value]="2"
       [vertical]="true">
-      <cps-radio [option]="{ value: 1 }">
+      <cps-radio
+        [option]="{
+          ariaLabel: 'Custom option with inline selectors',
+          value: 1
+        }">
         <div class="inline-radio-form">
           <span>On the</span>
           <cps-select

projects/composition/src/app/pages/radio-page/radio-page.component.scss

@@ -1,27 +1,27 @@
 .radiogroups-group {
-  gap: 36px;
+  gap: 2.25rem;
   display: flex;
   flex-direction: column;
 }
 
 .sync-val-example {
   .sync-val {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 }
 
 .custom-content-example {
   .inline-radio-form {
     display: flex;
     align-items: center;
-    gap: 5px;
+    gap: 0.3125rem;
 
     span {
       color: var(--cps-color-text-dark);
     }
   }
 
   .weekday-checkbox {
-    margin-left: 15px;
+    margin-left: 0.9375rem;
   }
 }

projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html

@@ -304,7 +304,7 @@
     </div>
   }
   @if ((error || externalError) && !hideDetails) {
-    <div class="cps-autocomplete-error">
+    <div class="cps-autocomplete-error" role="alert" aria-live="assertive">
       {{ error || externalError }}
     </div>
   }
@@ -319,14 +319,15 @@
     type="text"
     class="cps-autocomplete-box-input"
     spellcheck="false"
-    [attr.aria-invalid]="error || externalError ? true : null"
     [disabled]="disabled"
     role="combobox"
     aria-autocomplete="list"
     aria-haspopup="listbox"
+    [attr.aria-invalid]="error || externalError ? 'true' : null"
     [attr.aria-controls]="optionsListId"
     [attr.aria-activedescendant]="activeDescendantId"
     [attr.aria-expanded]="isOpened"
+    [attr.aria-required]="isRequired || null"
     [ngClass]="inputClass"
     [ngStyle]="inputStyle"
     [placeholder]="

projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts

@@ -16,7 +16,12 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NgControl,
+  Validators
+} from '@angular/forms';
 import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
 import { convertSize } from '../../utils/internal/size-utils';
 import {
@@ -852,11 +857,14 @@ export class CpsAutocompleteComponent
     this.recalcVirtualListHeight();
   }
 
+  get isRequired(): boolean {
+    return this._control?.control?.hasValidator(Validators.required) ?? false;
+  }
+
   get computedLabel(): string | null {
     return getComputedLabel({
       label: this.ariaLabel || this.label,
-      error: this.error,
-      externalError: this.externalError,
+      error: this.error || this.externalError,
       hideDetails: this.hideDetails
     });
   }

projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
 import {
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Inject,
@@ -161,7 +162,8 @@
   constructor(
     @Self() @Optional() private _control: NgControl,
     @Inject(DOCUMENT) private document: Document,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    private cdr: ChangeDetectorRef
   ) {
     if (this._control) {
       this._control.valueAccessor = this;
@@ -175,8 +177,11 @@
     this._rootFontSizePx = parseFloat(
       getComputedStyle(this.document.documentElement).fontSize || '16'
     );
     if (this.document?.fonts?.ready) {
-      this.document.fonts.ready.then(() => this._setEqualWidths());
+      this.document.fonts.ready.then(() => {
+        this._setEqualWidths();
+        this.cdr.markForCheck();
+      });
     } else {
       this._setEqualWidths();
     }

projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.spec.ts

@@ -276,11 +276,15 @@ describe('CpsButtonComponent', () => {
     });
 
     it('should not set aria-label when neither label nor ariaLabel is provided', () => {
+      const consoleSpy = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
       fixture.componentRef.setInput('label', '');
       fixture.componentRef.setInput('ariaLabel', '');
       fixture.detectChanges();
       const button = fixture.nativeElement.querySelector('button');
       expect(button.getAttribute('aria-label')).toBeNull();
+      consoleSpy.mockRestore();
     });
 
     it('should error when neither label nor ariaLabel is provided', () => {