+
@if (groupLabel) {
{{ groupLabel }}
@@ -19,25 +25,20 @@
+ [class.cps-radio-group-content-vertical]="vertical"
+ [class.cps-radio-group-content-horizontal]="!vertical">
@if (!contentRef.innerHTML.trim()) {
+ [class.cps-radio-group-content-vertical]="vertical"
+ [class.cps-radio-group-content-horizontal]="!vertical">
@for (option of options; track option) {
}
@if (error && !hideDetails) {
-
+ (
]
})
export class CpsRadioGroupComponent
- implements ControlValueAccessor, OnInit, OnDestroy
+ implements ControlValueAccessor, OnInit, OnChanges, OnDestroy
{
/**
* An array of options.
@@ -63,6 +69,12 @@ export class CpsRadioGroupComponent
*/
@Input() groupLabel = '';
+ /**
+ * Aria label for the radio group, used for accessibility, it takes precedence over groupLabel.
+ * @group Props
+ */
+ @Input() ariaLabel = '';
+
/**
* Determines whether the radio group should be vertical.
* @group Props
@@ -151,6 +163,8 @@ export class CpsRadioGroupComponent
*/
@Output() focused = new EventEmitter();
+ readonly groupName = generateUniqueId('cps-radio-group');
+
private _statusChangesSubscription?: Subscription;
private _value: any = undefined;
@@ -170,6 +184,14 @@ export class CpsRadioGroupComponent
);
}
+ ngOnChanges(): void {
+ if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
+ console.error(
+ 'CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.'
+ );
+ }
+ }
+
ngOnDestroy() {
this._statusChangesSubscription?.unsubscribe();
}
@@ -215,6 +237,18 @@ export class CpsRadioGroupComponent
this.focused.emit();
}
+ get isRequired(): boolean {
+ return this._control?.control?.hasValidator(Validators.required) ?? false;
+ }
+
+ get computedLabel(): string | null {
+ return getComputedLabel({
+ label: this.ariaLabel || this.groupLabel,
+ error: this.error,
+ hideDetails: this.hideDetails
+ });
+ }
+
private _checkErrors() {
if (!this._control) return;
const errors = this._control?.errors;
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.html b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.html
index 9bdb9bd6..7ba2c785 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.html
@@ -1,5 +1,6 @@
diff --git a/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html b/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html
index 7f1c4f49..8927e33f 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html
@@ -72,12 +72,17 @@
@case ('Daily') {
+ [option]="{
+ ariaLabel: 'Repeat every working day at a specific time',
+ value: 'everyWeekDay',
+ disabled: disabled
+ }">
{{ error }}
}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.scss b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.scss
index 170a772c..cd7a5e8e 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.scss
@@ -19,11 +19,11 @@ $color-error: var(--cps-state-error);
cursor: default;
.cps-radio-group-label-info-circle {
- margin-left: 8px;
+ margin-left: 0.5rem;
::ng-deep cps-icon {
i {
- width: 14px;
- height: 14px;
+ width: 0.875rem;
+ height: 0.875rem;
}
}
}
@@ -49,7 +49,7 @@ $color-error: var(--cps-state-error);
}
.cps-radio-hint {
- margin-top: 4px;
+ margin-top: 0.25rem;
color: $radio-hint-color;
font-size: 0.75rem;
min-height: 1.125rem;
@@ -58,7 +58,7 @@ $color-error: var(--cps-state-error);
}
.cps-radio-error {
- margin-top: 4px;
+ margin-top: 0.25rem;
color: $color-error;
font-weight: bold;
font-size: 0.75rem;
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.spec.ts
index 6d325c57..1c885951 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.spec.ts
@@ -18,6 +18,7 @@ describe('CpsRadioGroupComponent', () => {
{ label: 'Option 2', value: 'opt2' },
{ label: 'Option 3', value: 'opt3' }
]);
+ fixture.componentRef.setInput('ariaLabel', 'Radio group');
fixture.detectChanges();
});
@@ -140,4 +141,59 @@ describe('CpsRadioGroupComponent', () => {
component.ngOnDestroy();
expect(component).toBeTruthy();
});
+
+ describe('aria-label', () => {
+ it('should apply ariaLabel as the aria-label attribute on the radiogroup element', () => {
+ fixture.componentRef.setInput('ariaLabel', 'My radio group');
+ fixture.detectChanges();
+ const radiogroup = fixture.nativeElement.querySelector(
+ '[role="radiogroup"]'
+ );
+ expect(radiogroup.getAttribute('aria-label')).toBe('My radio group.');
+ });
+
+ it('should fall back to groupLabel for aria-label when ariaLabel is not set', () => {
+ fixture.componentRef.setInput('ariaLabel', '');
+ fixture.componentRef.setInput('groupLabel', 'Choose an option');
+ fixture.detectChanges();
+ const radiogroup = fixture.nativeElement.querySelector(
+ '[role="radiogroup"]'
+ );
+ expect(radiogroup.getAttribute('aria-label')).toBe('Choose an option.');
+ });
+
+ it('should prefer ariaLabel over groupLabel', () => {
+ fixture.componentRef.setInput('ariaLabel', 'Explicit label');
+ fixture.componentRef.setInput('groupLabel', 'Visual label');
+ fixture.detectChanges();
+ const radiogroup = fixture.nativeElement.querySelector(
+ '[role="radiogroup"]'
+ );
+ expect(radiogroup.getAttribute('aria-label')).toBe('Explicit label.');
+ });
+
+ it('should log an error when neither ariaLabel nor groupLabel is provided', () => {
+ const consoleSpy = jest
+ .spyOn(console, 'error')
+ .mockImplementation(() => {});
+ fixture.componentRef.setInput('ariaLabel', '');
+ fixture.componentRef.setInput('groupLabel', '');
+ fixture.detectChanges();
+ expect(consoleSpy).toHaveBeenCalledWith(
+ expect.stringContaining('ariaLabel for accessibility')
+ );
+ consoleSpy.mockRestore();
+ });
+
+ it('should not log an error when ariaLabel is provided', () => {
+ const consoleSpy = jest
+ .spyOn(console, 'error')
+ .mockImplementation(() => {});
+ fixture.componentRef.setInput('ariaLabel', 'Accessible label');
+ fixture.componentRef.setInput('groupLabel', '');
+ fixture.detectChanges();
+ expect(consoleSpy).not.toHaveBeenCalled();
+ consoleSpy.mockRestore();
+ });
+ });
});
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts
index 6949c65b..33e0f477 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts
@@ -5,17 +5,22 @@ import {
EventEmitter,
InjectionToken,
Input,
+ OnChanges,
OnDestroy,
OnInit,
Optional,
Output,
Self
} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
import { CpsRadioButtonComponent } from './cps-radio-button/cps-radio-button.component';
import { Subscription } from 'rxjs';
+import {
+ generateUniqueId,
+ getComputedLabel
+} from '../../utils/internal/accessibility-utils';
/**
* CpsRadioOption is used to define the options of the CpsRadioGroupComponent.
@@ -24,6 +29,7 @@ import { Subscription } from 'rxjs';
export type CpsRadioOption = {
value: any;
label?: string;
+ ariaLabel?: string;
disabled?: boolean;
tooltip?: string;
};
@@ -49,7 +55,7 @@ export const CPS_RADIO_GROUP = new InjectionToken {
export const getComputedLabel = (context: {
label?: string;
error?: string;
- externalError?: string;
hideDetails?: boolean;
}): string | null => {
const parts: string[] = [];
@@ -19,7 +18,7 @@ export const getComputedLabel = (context: {
}
// Add error if exists and not hidden
- const errorText = context.error || context.externalError;
+ const errorText = context.error;
if (errorText && !context.hideDetails) {
const cleanedError = errorText.trim().replace(/\.*$/, '');
parts.push(`Error: ${cleanedError}.`);