From e1ace877cd6fa0f95ed23277e9845add5d738151 Mon Sep 17 00:00:00 2001 From: Andrei Fateev Date: Fri, 5 Jun 2026 12:30:22 +0200 Subject: [PATCH 1/3] feat: fix a11y issues in divider component --- playwright/cps-accessibility.spec.ts | 2 +- .../src/app/api-data/cps-divider.json | 2 +- .../divider-page/divider-page.component.html | 2 +- .../divider-page/divider-page.component.scss | 4 +-- .../cps-divider/cps-divider.component.spec.ts | 30 +++++++++++++++++-- .../cps-divider/cps-divider.component.ts | 7 +++-- 6 files changed, 37 insertions(+), 10 deletions(-) diff --git a/playwright/cps-accessibility.spec.ts b/playwright/cps-accessibility.spec.ts index 9f00a9eb4..41d8c9c56 100644 --- a/playwright/cps-accessibility.spec.ts +++ b/playwright/cps-accessibility.spec.ts @@ -104,7 +104,7 @@ const components: ComponentEntry[] = [ .click(); } }, - // { route: '/divider', name: 'Divider', selector: 'cps-divider' }, + { route: '/divider', name: 'Divider', selector: 'cps-divider' }, // { // route: '/expansion-panel', // name: 'Expansion panel', diff --git a/projects/composition/src/app/api-data/cps-divider.json b/projects/composition/src/app/api-data/cps-divider.json index 836466bdf..37206bfdd 100644 --- a/projects/composition/src/app/api-data/cps-divider.json +++ b/projects/composition/src/app/api-data/cps-divider.json @@ -34,7 +34,7 @@ "optional": false, "readonly": false, "type": "string | number", - "default": "1px", + "default": "0.0625rem", "description": "Thickness of the divider, a number denoting pixels or a string." } ] diff --git a/projects/composition/src/app/pages/divider-page/divider-page.component.html b/projects/composition/src/app/pages/divider-page/divider-page.component.html index eee2f33b2..4528a8c7c 100644 --- a/projects/composition/src/app/pages/divider-page/divider-page.component.html +++ b/projects/composition/src/app/pages/divider-page/divider-page.component.html @@ -16,7 +16,7 @@

Vertical divider

Dashed, thick and red divider

First row

- +

Second row

diff --git a/projects/composition/src/app/pages/divider-page/divider-page.component.scss b/projects/composition/src/app/pages/divider-page/divider-page.component.scss index aac7a0caa..cd5023c99 100644 --- a/projects/composition/src/app/pages/divider-page/divider-page.component.scss +++ b/projects/composition/src/app/pages/divider-page/divider-page.component.scss @@ -5,11 +5,11 @@ } .section-title:not(:first-child) { - margin-top: 48px; + margin-top: 3rem; } .vertical-section { display: flex; - column-gap: 12px; + column-gap: 0.75rem; } } diff --git a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.spec.ts index 2dbaee3f9..e9e1cd0b1 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.spec.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.spec.ts @@ -17,7 +17,7 @@ class TestHostComponent { vertical = false; color = 'line-mid'; type: 'solid' | 'dashed' | 'dotted' = 'solid'; - thickness: number | string = '1px'; + thickness: number | string = '0.0625rem'; } describe('CpsDividerComponent', () => { @@ -46,7 +46,7 @@ describe('CpsDividerComponent', () => { expect(component.vertical()).toBe(false); expect(component.color()).toBe('line-mid'); expect(component.type()).toBe('solid'); - expect(component.thickness()).toBe('1px'); + expect(component.thickness()).toBe('0.0625rem'); }); it('should be horizontal by default', () => { @@ -99,4 +99,30 @@ describe('CpsDividerComponent', () => { const divider = fixture.nativeElement; expect(divider.classList.contains('cps-divider')).toBe(true); }); + + it('should have role="separator"', () => { + const divider = fixture.nativeElement; + expect(divider.getAttribute('role')).toBe('separator'); + }); + + it('should have aria-orientation="horizontal" by default', () => { + const divider = fixture.nativeElement; + expect(divider.getAttribute('aria-orientation')).toBe('horizontal'); + }); + + it('should have aria-orientation="vertical" when vertical is true', () => { + fixture.componentRef.setInput('vertical', true); + fixture.detectChanges(); + const divider = fixture.nativeElement; + expect(divider.getAttribute('aria-orientation')).toBe('vertical'); + }); + + it('should revert aria-orientation to "horizontal" when vertical is set back to false', () => { + fixture.componentRef.setInput('vertical', true); + fixture.detectChanges(); + fixture.componentRef.setInput('vertical', false); + fixture.detectChanges(); + const divider = fixture.nativeElement; + expect(divider.getAttribute('aria-orientation')).toBe('horizontal'); + }); }); diff --git a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts index dfc6135b4..28873c636 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts @@ -23,10 +23,11 @@ export type CpsDividerType = 'solid' | 'dashed' | 'dotted'; selector: 'cps-divider', host: { class: 'cps-divider', + role: 'separator', + '[attr.aria-orientation]': 'vertical() ? "vertical" : "horizontal"', '[style.border-top]': 'borderTop()', '[style.border-right]': 'borderRight()' }, - standalone: true, template: '', styleUrl: './cps-divider.component.scss', encapsulation: ViewEncapsulation.None @@ -56,9 +57,9 @@ export class CpsDividerComponent { /** * Thickness of the divider, a number denoting pixels or a string. * @group Props - * @default 1px + * @default 0.0625rem */ - thickness = input('1px'); + thickness = input('0.0625rem'); // eslint-disable-next-line no-useless-constructor constructor(@Inject(DOCUMENT) private document: Document) {} From 4fec64ced1235cd6201a2903bf76dec65b798903 Mon Sep 17 00:00:00 2001 From: Andrei Fateev Date: Fri, 5 Jun 2026 16:38:03 +0200 Subject: [PATCH 2/3] update divider selector --- playwright/cps-accessibility.spec.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/playwright/cps-accessibility.spec.ts b/playwright/cps-accessibility.spec.ts index 41d8c9c56..21dc4e4e7 100644 --- a/playwright/cps-accessibility.spec.ts +++ b/playwright/cps-accessibility.spec.ts @@ -104,7 +104,11 @@ const components: ComponentEntry[] = [ .click(); } }, - { route: '/divider', name: 'Divider', selector: 'cps-divider' }, + { + route: '/divider', + name: 'Divider', + selector: '.example-content cps-divider' + }, // { // route: '/expansion-panel', // name: 'Expansion panel', From df622f0619d9239de8312c66526ec79898296cf6 Mon Sep 17 00:00:00 2001 From: Andrei Fateev Date: Tue, 9 Jun 2026 12:16:52 +0200 Subject: [PATCH 3/3] remove constructor --- .../src/lib/components/cps-divider/cps-divider.component.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts index 28873c636..00954b1bb 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts @@ -1,8 +1,8 @@ import { Component, - Inject, ViewEncapsulation, computed, + inject, input } from '@angular/core'; import { getCSSColor } from '../../utils/colors-utils'; @@ -61,8 +61,7 @@ export class CpsDividerComponent { */ thickness = input('0.0625rem'); - // eslint-disable-next-line no-useless-constructor - constructor(@Inject(DOCUMENT) private document: Document) {} + private document = inject(DOCUMENT); public borderTop = computed(() => { return this._constructBorder(!this.vertical());