feat: fix a11y issues in divider component

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',

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."
                     }
                 ]

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

@@ -16,7 +16,7 @@ <h2 class="section-title">Vertical divider</h2>
   <h2 class="section-title">Dashed, thick and red divider</h2>
   <div>
     <p>First row</p>
-    <cps-divider thickness="4" color="red" type="dashed"></cps-divider>
+    <cps-divider thickness="0.25rem" color="red" type="dashed"></cps-divider>
     <p>Second row</p>
   </div>
 </app-component-docs-viewer>

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;
   }
 }

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');
+  });
 });

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<number | string>('1px');
+  thickness = input<number | string>('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());