diff --git a/playwright/cps-accessibility.spec.ts b/playwright/cps-accessibility.spec.ts
index b2b7ecfb..3c7a5aca 100644
--- a/playwright/cps-accessibility.spec.ts
+++ b/playwright/cps-accessibility.spec.ts
@@ -118,7 +118,7 @@ const components: ComponentEntry[] = [
selector: '.example-content cps-expansion-panel'
},
{ route: '/file-upload', name: 'File upload', selector: 'cps-file-upload' },
- // { route: '/icon', name: 'Icon', selector: 'cps-icon' },
+ { route: '/icon', name: 'Icon', selector: '.example-content cps-icon' },
{ route: '/info-circle', name: 'Info circle', selector: 'cps-info-circle' },
{ route: '/input', name: 'Input', selector: '.example-content cps-input' },
// { route: '/loader', name: 'Loader', selector: 'cps-loader' },
diff --git a/projects/composition/src/app/api-data/cps-icon.json b/projects/composition/src/app/api-data/cps-icon.json
index d32e277c..020a86b2 100644
--- a/projects/composition/src/app/api-data/cps-icon.json
+++ b/projects/composition/src/app/api-data/cps-icon.json
@@ -28,6 +28,14 @@
"type": "string",
"default": "currentColor",
"description": "Color of the icon."
+ },
+ {
+ "name": "ariaLabel",
+ "optional": false,
+ "readonly": false,
+ "type": "string",
+ "default": "''",
+ "description": "Accessible label for the icon.\nWhen provided the icon is treated as informative (role=\"img\", aria-hidden removed).\nWhen omitted the icon is treated as decorative (aria-hidden=\"true\", role removed)."
}
]
}
diff --git a/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html b/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html
index 4e7dc9b3..fcb3754a 100644
--- a/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html
+++ b/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html
@@ -12,13 +12,17 @@
@for (name of filteredIconsList; track name) {
-
+
+
}
@if (prefixIcon) {
-
+
}
@if (showChevron && options.length) {
@@ -179,7 +175,6 @@
"
[tabindex]="disabled ? -1 : 0">
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.html b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.html
index c8a64f7c..4f47fee3 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.html
@@ -72,10 +72,7 @@
[attr.aria-label]="option.ariaLabel || option.label || null" />
@if (option.icon) {
-
+
}
@if (option.label) {
@@ -100,10 +97,7 @@
[style.min-width.rem]="equalWidths ? largestButtonWidthRem : null">
@if (option.icon) {
-
+
}
@if (option.label) {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html
index bbfb0140..ee3cb6ef 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html
@@ -41,7 +41,6 @@
: 'text-light'
: textColor
"
- aria-hidden="true"
[size]="cvtIconSize">
}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html
index a16d8801..a76ef31b 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html
@@ -14,8 +14,7 @@
class="cps-checkbox-icon"
[icon]="icon"
size="small"
- [color]="disabled ? 'text-mild' : iconColor"
- aria-hidden="true">
+ [color]="disabled ? 'text-mild' : iconColor">
}
@if (label) {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.html b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.html
index 7ee51270..f3c25e5d 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.html
@@ -7,18 +7,14 @@
}
{{ label }}
@if (closable) {
-
-
+ (keydown.enter)="$event.stopPropagation()">
+
+
}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
index 63591f16..784e7ecb 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
@@ -21,7 +21,12 @@ $color-text-mild: var(--cps-color-text-mild);
padding-left: 0.75rem;
padding-right: 0.375rem;
cursor: default;
- &-close-icon {
+ &-close-btn {
+ border: none;
+ background: transparent;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
padding: 0.375rem;
cursor: pointer;
&:focus {
@@ -44,7 +49,7 @@ $color-text-mild: var(--cps-color-text-mild);
font-family: 'Source Sans Pro', sans-serif;
font-style: normal;
font-weight: 400;
- &:not(:has(+ .cps-chip-close-icon)) {
+ &:not(:has(+ .cps-chip-close-btn)) {
margin-right: 0.375rem;
}
}
@@ -57,7 +62,7 @@ $color-text-mild: var(--cps-color-text-mild);
color: $color-text-mild;
}
.cps-chip-icon,
- .cps-chip-close-icon {
+ .cps-chip-close-btn {
::ng-deep .cps-icon {
color: $color-text-mild !important;
}
@@ -75,11 +80,11 @@ $color-text-mild: var(--cps-color-text-mild);
margin-left: 0.375rem;
order: 1;
- &:not(:has(~ .cps-chip-close-icon)) {
+ &:not(:has(~ .cps-chip-close-btn)) {
margin-right: 0.375rem;
}
}
- .cps-chip-close-icon {
+ .cps-chip-close-btn {
order: 2;
}
.cps-chip-label {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.spec.ts
index 5b486374..6648eaaf 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.spec.ts
@@ -39,7 +39,7 @@ describe('CpsChipComponent', () => {
fixture.componentRef.setInput('closable', true);
fixture.detectChanges();
const closeIcon = fixture.nativeElement.querySelector(
- '.cps-chip-close-icon'
+ '.cps-chip-close-btn'
);
expect(closeIcon).toBeTruthy();
});
@@ -50,7 +50,7 @@ describe('CpsChipComponent', () => {
fixture.componentRef.setInput('label', 'Test');
fixture.detectChanges();
const closeIcon = fixture.nativeElement.querySelector(
- '.cps-chip-close-icon'
+ '.cps-chip-close-btn'
);
closeIcon.click();
expect(component.closed.emit).toHaveBeenCalledWith('Test');
diff --git a/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.html b/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.html
index 24a86425..74480366 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.html
@@ -31,7 +31,6 @@
@if (prefixIcon) {
@@ -42,7 +41,6 @@
@if (showChevron && !disabled) {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html
index 8d389519..7251d200 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html
@@ -101,29 +101,21 @@
@if (!disabled) {
@if (isProcessingFile) {
-
-
+
} @else {
-
-
+
}
}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss
index 6aca6582..9fe41fbb 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss
@@ -120,11 +120,17 @@ $bg-disabled: var(--cps-color-bg-disabled);
max-width: calc(100% - 3.75rem);
}
}
- .cps-file-upload-uploaded-file-remove-icon,
- .cps-file-upload-uploaded-file-cancel-process-icon {
+ .cps-file-upload-uploaded-file-remove-btn,
+ .cps-file-upload-uploaded-file-cancel-process-btn {
+ border: none;
+ background: transparent;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
cursor: pointer;
flex-shrink: 0;
margin-left: 0.5rem;
+ padding: 0;
&:focus {
outline: none;
}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.html b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.html
index 4ccc914e..db7d682c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.html
@@ -2,13 +2,11 @@
-
}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.spec.ts
index b6132585..c9a6ce1a 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.spec.ts
@@ -1,3 +1,4 @@
+import { SimpleChange } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CpsIconComponent, ICONS_PATH } from './cps-icon.component';
import { CommonModule } from '@angular/common';
@@ -23,6 +24,65 @@ describe('CpsIconComponent', () => {
expect(component).toBeTruthy();
});
+ describe('Accessibility', () => {
+ it('should have aria-hidden="true" on the host by default (decorative)', () => {
+ createComponent();
+ const host: HTMLElement = fixture.nativeElement;
+ expect(host.getAttribute('aria-hidden')).toBe('true');
+ expect(host.getAttribute('role')).toBeNull();
+ expect(host.getAttribute('aria-label')).toBeNull();
+ });
+
+ it('should expose role="img" and aria-label on the host when ariaLabel is set', () => {
+ createComponent();
+ component.ariaLabel = 'Warning icon';
+ fixture.detectChanges();
+ const host: HTMLElement = fixture.nativeElement;
+ expect(host.getAttribute('role')).toBe('img');
+ expect(host.getAttribute('aria-label')).toBe('Warning icon');
+ expect(host.getAttribute('aria-hidden')).toBeNull();
+ });
+
+ it('should restore decorative state when ariaLabel is cleared', () => {
+ createComponent();
+ component.ariaLabel = 'Warning icon';
+ fixture.detectChanges();
+ component.ariaLabel = '';
+ fixture.detectChanges();
+ const host: HTMLElement = fixture.nativeElement;
+ expect(host.getAttribute('aria-hidden')).toBe('true');
+ expect(host.getAttribute('role')).toBeNull();
+ });
+
+ it('should always render the inner svg with aria-hidden="true"', () => {
+ createComponent();
+ component.icon = 'warning';
+ fixture.detectChanges();
+ const svg = fixture.nativeElement.querySelector('svg');
+ expect(svg).not.toBeNull();
+ expect(svg.getAttribute('aria-hidden')).toBe('true');
+ });
+
+ it('should treat icon as informative when aria-label is set as a native DOM attribute', () => {
+ createComponent();
+ const host: HTMLElement = fixture.nativeElement;
+
+ host.setAttribute('aria-label', 'Search');
+ fixture.detectChanges();
+ expect(host.getAttribute('role')).toBe('img');
+ expect(host.getAttribute('aria-hidden')).toBeNull();
+
+ host.setAttribute('aria-label', 'Updated label');
+ fixture.detectChanges();
+ expect(host.getAttribute('aria-label')).toBe('Updated label');
+
+ host.removeAttribute('aria-label');
+ fixture.detectChanges();
+ expect(host.getAttribute('aria-hidden')).toBe('true');
+ expect(host.getAttribute('role')).toBeNull();
+ });
+ });
+
describe('Test assets path injection', () => {
it('should use default path when no ICONS_PATH is provided', () => {
createComponent();
@@ -37,4 +97,91 @@ describe('CpsIconComponent', () => {
expect(component.url).toBe('test-assets/');
});
});
+
+ describe('ngOnInit', () => {
+ it('should initialize iconColor and apply default size class', () => {
+ createComponent();
+ expect(component.iconColor).toBeDefined();
+ expect(component.classesList).toContain('cps-icon');
+ expect(component.classesList).toContain('cps-icon--small');
+ });
+ });
+
+ describe('ngOnChanges', () => {
+ it('should update iconColor when color input changes', () => {
+ createComponent();
+ const initialColor = component.iconColor;
+ component.color = 'green';
+ component.ngOnChanges({
+ color: new SimpleChange('currentColor', 'green', false)
+ });
+ expect(component.iconColor).not.toBe(initialColor);
+ });
+
+ it('should update classesList when size input changes', () => {
+ createComponent();
+ component.size = 'large';
+ component.ngOnChanges({
+ size: new SimpleChange('small', 'large', false)
+ });
+ expect(component.classesList).toContain('cps-icon--large');
+ });
+
+ it('should not update classesList when only color changes', () => {
+ createComponent();
+ component.size = 'large';
+ component.ngOnChanges({
+ size: new SimpleChange('small', 'large', false)
+ });
+ const classesSnapshot = [...component.classesList];
+
+ component.color = 'red';
+ component.ngOnChanges({
+ color: new SimpleChange('currentColor', 'red', false)
+ });
+ expect(component.classesList).toEqual(classesSnapshot);
+ });
+ });
+
+ describe('setClasses', () => {
+ it('should reset classesList on each call preventing class accumulation', () => {
+ createComponent();
+ component.size = 'large';
+ component.setClasses();
+ component.size = 'small';
+ component.setClasses();
+ expect(component.classesList).not.toContain('cps-icon--large');
+ expect(component.classesList).toContain('cps-icon--small');
+ });
+
+ it.each([
+ ['fill', 'cps-icon--fill'],
+ ['xsmall', 'cps-icon--xsmall'],
+ ['small', 'cps-icon--small'],
+ ['normal', 'cps-icon--normal'],
+ ['large', 'cps-icon--large']
+ ] as const)('should add %s class for size "%s"', (size, expectedClass) => {
+ createComponent();
+ component.size = size;
+ component.setClasses();
+ expect(component.classesList).toContain(expectedClass);
+ expect(component.classesList).toContain('cps-icon');
+ });
+
+ it('should set cvtSize for a custom numeric size', () => {
+ createComponent();
+ component.size = 24;
+ component.setClasses();
+ expect(component.cvtSize).toBeTruthy();
+ });
+
+ it('should reset cvtSize when switching from custom to a named size', () => {
+ createComponent();
+ component.size = 24;
+ component.setClasses();
+ component.size = 'small';
+ component.setClasses();
+ expect(component.cvtSize).toBe('');
+ });
+ });
});
diff --git a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts
index a540849e..e5911db8 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts
@@ -1,11 +1,15 @@
import { CommonModule, DOCUMENT } from '@angular/common';
import {
Component,
+ ElementRef,
+ HostAttributeToken,
inject,
- Inject,
InjectionToken,
Input,
- OnChanges
+ OnChanges,
+ OnInit,
+ Renderer2,
+ type SimpleChanges
} from '@angular/core';
import { getCSSColor } from '../../utils/colors-utils';
import { convertSize } from '../../utils/internal/size-utils';
@@ -171,9 +175,13 @@ export type iconSizeType =
imports: [CommonModule],
selector: 'cps-icon',
templateUrl: './cps-icon.component.html',
- styleUrls: ['./cps-icon.component.scss']
+ styleUrls: ['./cps-icon.component.scss'],
+ host: {
+ '[attr.role]': 'hasAriaLabel() ? "img" : null',
+ '[attr.aria-hidden]': 'hasAriaLabel() ? null : "true"'
+ }
})
-export class CpsIconComponent implements OnChanges {
+export class CpsIconComponent implements OnInit, OnChanges {
/**
* Name of the icon.
* @group Props
@@ -192,45 +200,104 @@ export class CpsIconComponent implements OnChanges {
*/
@Input() color = 'currentColor';
+ /**
+ * Accessible label for the icon.
+ * When provided the icon is treated as informative (role="img", aria-hidden removed).
+ * When omitted the icon is treated as decorative (aria-hidden="true", role removed).
+ * @group Props
+ * @default ''
+ */
+ @Input()
+ set ariaLabel(v: string) {
+ this._ariaLabel = v;
+ this._syncAriaLabel();
+ }
+
+ get ariaLabel(): string {
+ return this._ariaLabel;
+ }
+
+ private _ariaLabel = '';
+
+ hasAriaLabel(): boolean {
+ return !!(
+ this._ariaLabel ||
+ this._elementRef.nativeElement.getAttribute('aria-label')
+ );
+ }
+
iconColor = 'currentColor';
url = inject(ICONS_PATH, { optional: true }) ?? 'assets/';
cvtSize = '';
classesList: string[] = ['cps-icon'];
- // eslint-disable-next-line no-useless-constructor
- constructor(@Inject(DOCUMENT) private document: Document) {}
+ private _document = inject(DOCUMENT);
+ private _elementRef = inject(ElementRef);
+ private _renderer = inject(Renderer2);
+ private _staticAriaLabel = inject(new HostAttributeToken('aria-label'), {
+ optional: true
+ });
- ngOnChanges(): void {
- this.iconColor = getCSSColor(this.color, this.document);
+ ngOnInit(): void {
+ this.iconColor = getCSSColor(this.color, this._document);
this.setClasses();
}
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.color) {
+ this.iconColor = getCSSColor(this.color, this._document);
+ }
+ if (changes.size) {
+ this.setClasses();
+ }
+ }
+
+ private _syncAriaLabel(): void {
+ const label = this._ariaLabel || this._staticAriaLabel;
+ if (label) {
+ this._renderer.setAttribute(
+ this._elementRef.nativeElement,
+ 'aria-label',
+ label
+ );
+ } else {
+ this._renderer.removeAttribute(
+ this._elementRef.nativeElement,
+ 'aria-label'
+ );
+ }
+ }
+
setClasses(): void {
+ const classes = ['cps-icon'];
+ let size = '';
switch (this.size) {
case 'fill': {
- this.classesList.push('cps-icon--fill');
+ classes.push('cps-icon--fill');
break;
}
case 'xsmall': {
- this.classesList.push('cps-icon--xsmall');
+ classes.push('cps-icon--xsmall');
break;
}
case 'small': {
- this.classesList.push('cps-icon--small');
+ classes.push('cps-icon--small');
break;
}
case 'normal': {
- this.classesList.push('cps-icon--normal');
+ classes.push('cps-icon--normal');
break;
}
case 'large': {
- this.classesList.push('cps-icon--large');
+ classes.push('cps-icon--large');
break;
}
default:
- this.cvtSize = convertSize(this.size);
+ size = convertSize(this.size);
break;
}
+ this.cvtSize = size;
+ this.classesList = classes;
}
}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.html b/projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.html
index a54007fb..0343b72f 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.html
@@ -1,7 +1,6 @@
@if (prefixIcon) {
-
+
}
@if (showChevron) {
@@ -138,7 +137,6 @@
(keydown.enter)="onChevronClick($event)"
(keydown.space)="onChevronClick($event)">
@@ -286,7 +284,6 @@
{{ item[optionInfo] }}
@if (item[optionIcon]) {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html
index 3723597a..0c00ea97 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html
@@ -18,8 +18,7 @@
[class.disabled]="item.disabled"
[attr.aria-disabled]="item.disabled || null"
[attr.aria-label]="item.title">
-
-
+