diff --git a/playwright/cps-accessibility.spec.ts b/playwright/cps-accessibility.spec.ts
index 9f00a9eb..21dc4e4e 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',
diff --git a/projects/composition/src/app/api-data/cps-divider.json b/projects/composition/src/app/api-data/cps-divider.json
index 836466bd..37206bfd 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 eee2f33b..4528a8c7 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
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 aac7a0ca..cd5023c9 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 2dbaee3f..e9e1cd0b 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 dfc6135b..00954b1b 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';
@@ -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,12 +57,11 @@ 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) {}
+ private document = inject(DOCUMENT);
public borderTop = computed(() => {
return this._constructBorder(!this.vertical());