Fix a11y issues in dialog component

playwright/cps-accessibility.spec.ts

@@ -37,19 +37,66 @@ const components: ComponentEntry[] = [
   //     await page.locator('cps-datepicker .cps-icon').first().click();
   //   }
   // },
-  // {
-  //   route: '/dialog',
-  //   name: 'Dialog',
-  //   selector: '[role="dialog"]',
-  //   setup: async (page) => {
-  //     await page.waitForSelector('.example-content');
-  //     await page
-  //       .locator('.example-content cps-button')
-  //       .filter({ hasText: /dialog/i })
-  //       .first()
-  //       .click();
-  //   }
-  // },
+  {
+    route: '/dialog',
+    name: 'Confirmation dialog',
+    selector: '[role="dialog"]',
+    setup: async (page) => {
+      await page.waitForSelector('.example-content');
+      await page
+        .locator('.example-content cps-button')
+        .filter({ hasText: /Confirmation dialog/i })
+        .click();
+    }
+  },
+  {
+    route: '/dialog',
+    name: 'Regular dialog',
+    selector: '[role="dialog"]',
+    setup: async (page) => {
+      await page.waitForSelector('.example-content');
+      await page
+        .locator('.example-content cps-button')
+        .filter({ hasText: /Regular dialog/i })
+        .click();
+    }
+  },
+  {
+    route: '/dialog',
+    name: 'Draggable dialog',
+    selector: '[role="dialog"]',
+    setup: async (page) => {
+      await page.waitForSelector('.example-content');
+      await page
+        .locator('.example-content cps-button')
+        .filter({ hasText: /Draggable dialog/i })
+        .click();
+    }
+  },
+  {
+    route: '/dialog',
+    name: 'Resizable dialog',
+    selector: '[role="dialog"]',
+    setup: async (page) => {
+      await page.waitForSelector('.example-content');
+      await page
+        .locator('.example-content cps-button')
+        .filter({ hasText: /Resizable dialog/i })
+        .click();
+    }
+  },
+  {
+    route: '/dialog',
+    name: 'Dialog with blurred background and container autofocus',
+    selector: '[role="dialog"]',
+    setup: async (page) => {
+      await page.waitForSelector('.example-content');
+      await page
+        .locator('.example-content cps-button')
+        .filter({ hasText: /blurred background/i })
+        .click();
+    }
+  },
   // { route: '/divider', name: 'Divider', selector: 'cps-divider' },
   // {
   //   route: '/expansion-panel',

projects/composition/src/app/api-data/cps-dialog.json

@@ -124,49 +124,71 @@
                         "optional": true,
                         "readonly": false,
                         "type": "string",
-                        "description": "Identifies the element (or elements) that labels the element it is applied to."
+                        "description": "Identifies the element that labels the element it is applied to. Takes precedence over ariaLabel."
                     },
                     {
-                        "name": "width",
+                        "name": "ariaLabel",
                         "optional": true,
                         "readonly": false,
                         "type": "string",
-                        "description": "Width of the dialog."
+                        "description": "Defines a string value that labels the dialog for assistive technologies when no visible title or ariaLabelledBy is present."
                     },
                     {
-                        "name": "height",
+                        "name": "ariaDescribedBy",
                         "optional": true,
                         "readonly": false,
                         "type": "string",
-                        "description": "Height of the dialog."
+                        "description": "Identifies the element that describes the dialog content for assistive technologies."
+                    },
+                    {
+                        "name": "autoFocus",
+                        "optional": true,
+                        "readonly": false,
+                        "type": "string | boolean",
+                        "default": "true",
+                        "description": "Defines which element receives focus when the dialog opens.\n- 'dialog' - focuses the dialog container\n- 'first-tabbable' / true - focuses the first tabbable element\n- string (a CSS selector) - focuses the first matching element\n- false - disables auto-focus"
+                    },
+                    {
+                        "name": "width",
+                        "optional": true,
+                        "readonly": false,
+                        "type": "string | number",
+                        "description": "Width of the dialog, a number denoting pixels or a string."
+                    },
+                    {
+                        "name": "height",
+                        "optional": true,
+                        "readonly": false,
+                        "type": "string | number",
+                        "description": "Height of the dialog, a number denoting pixels or a string."
                     },
                     {
                         "name": "minWidth",
                         "optional": true,
                         "readonly": false,
-                        "type": "string",
-                        "description": "Min-width of the dialog."
+                        "type": "string | number",
+                        "description": "Min-width of the dialog, a number denoting pixels or a string."
                     },
                     {
                         "name": "minHeight",
                         "optional": true,
                         "readonly": false,
-                        "type": "string",
-                        "description": "Min-height of the dialog."
+                        "type": "string | number",
+                        "description": "Min-height of the dialog, a number denoting pixels or a string."
                     },
                     {
                         "name": "maxWidth",
                         "optional": true,
                         "readonly": false,
-                        "type": "string",
-                        "description": "Max-width of the dialog."
+                        "type": "string | number",
+                        "description": "Max-width of the dialog, a number denoting pixels or a string."
                     },
                     {
                         "name": "maxHeight",
                         "optional": true,
                         "readonly": false,
-                        "type": "string",
-                        "description": "Max-height of the dialog."
+                        "type": "string | number",
+                        "description": "Max-height of the dialog, a number denoting pixels or a string."
                     },
                     {
                         "name": "closeOnEscape",
@@ -284,15 +306,15 @@
                         "name": "minX",
                         "optional": true,
                         "readonly": false,
-                        "type": "number",
-                        "description": "Minimum value for the left coordinate of dialog in dragging."
+                        "type": "string | number",
+                        "description": "Minimum value for the left coordinate of dialog in dragging, a number denoting pixels or a string."
                     },
                     {
                         "name": "minY",
                         "optional": true,
                         "readonly": false,
-                        "type": "number",
-                        "description": "Minimum value for the top coordinate of dialog in dragging."
+                        "type": "string | number",
+                        "description": "Minimum value for the top coordinate of dialog in dragging, a number denoting pixels or a string."
                     },
                     {
                         "name": "maximizable",
@@ -319,6 +341,16 @@
             }
         ]
     },
+    "types": {
+        "description": "Defines the custom types used by the component or service.",
+        "values": [
+            {
+                "name": "CpsDialogAutoFocusTarget",
+                "value": "\"dialog\" | \"first-tabbable\"",
+                "description": "Defines the auto-focus target when the dialog opens.\n- 'dialog' - focuses the dialog container itself\n- 'first-tabbable' - focuses the first tabbable element inside the dialog"
+            }
+        ]
+    },
     "classes": {
         "description": "Defines classes exposed by the component or service.",
         "values": [
@@ -402,22 +434,22 @@
                     },
                     {
                         "name": "onDragStart",
-                        "type": "Observable<MouseEvent>",
+                        "type": "Observable<KeyboardEvent | MouseEvent>",
                         "description": "Event triggered on drag start."
                     },
                     {
                         "name": "onDragEnd",
-                        "type": "Observable<MouseEvent>",
+                        "type": "Observable<KeyboardEvent | MouseEvent>",
                         "description": "Event triggered on drag end."
                     },
                     {
                         "name": "onResizeStart",
-                        "type": "Observable<MouseEvent>",
+                        "type": "Observable<KeyboardEvent | MouseEvent>",
                         "description": "Event triggered on resize start."
                     },
                     {
                         "name": "onResizeEnd",
-                        "type": "Observable<MouseEvent>",
+                        "type": "Observable<KeyboardEvent | MouseEvent>",
                         "description": "Event triggered on resize end."
                     },
                     {

projects/composition/src/app/api-data/types_map.json

@@ -31,6 +31,7 @@
     "CpsTooltipPosition": "tooltip",
     "CpsTooltipOpenOn": "tooltip",
     "CpsDialogConfig": "dialog",
+    "CpsDialogAutoFocusTarget": "dialog",
     "CpsDialogRef": "dialog",
     "CpsNotificationConfig": "notification",
     "CpsNotificationAppearance": "notification",

projects/composition/src/app/components/dialog-content/dialog-content.component.scss

@@ -3,19 +3,19 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 12px;
+    padding: 0.75rem;
 
     &-icon {
-      width: 40px;
-      height: 40px;
+      width: 2.5rem;
+      height: 2.5rem;
     }
 
     &-title {
       font-weight: normal;
     }
 
     &-button {
-      margin-top: 24px;
+      margin-top: 1.5rem;
     }
   }
 }

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

@@ -6,7 +6,7 @@
       (clicked)="openConfirmationDialog()"></cps-button>
     <cps-button label="Regular dialog" (clicked)="openDialog()"></cps-button>
     <cps-button
-      label="Dialog with blurred background"
+      label="Dialog with blurred background and container autofocus"
       (clicked)="openBlurredBgDialog()"></cps-button>
     <cps-button
       label="Draggable dialog"

projects/composition/src/app/pages/dialog-page/dialog-page.component.ts

@@ -13,40 +13,40 @@
   host: { class: 'composition-page' },
   providers: [CpsDialogService]
 })
 export class DialogPageComponent {
   serviceData = ServiceData;
   // eslint-disable-next-line no-useless-constructor
   constructor(
     public _dialogService: CpsDialogService,
     @SkipSelf() public _dialogServiceRoot: CpsDialogService
   ) {}
 
   openConfirmationDialog() {
     const dialogRef = this._dialogService.openConfirmationDialog({
       data: {
         subtitle: 'Are you really sure you want to <u>break the law?</u>'
       }
     });
 
     dialogRef.onClose.subscribe((result: boolean) => {
       console.log(result);
     });
   }
 
   openDialog() {
     const dialogRef = this._dialogService.open(DialogContentComponent, {
       headerTitle: 'Regular dialog',
       data: {
         info: 'Greetings from the dialog content component',
         icon: 'like'
       }
     });
 
     dialogRef.onOpen.subscribe(() => {
       console.log('opened');
     });
 
     dialogRef.onClose.subscribe((res: any) => {
       console.log('closed', res);
     });
 
@@ -56,27 +56,28 @@
   }
 
   openBlurredBgDialog() {
     this._dialogService.open(DialogContentComponent, {
+      autoFocus: 'dialog',
       headerTitle: 'Dialog with blurred background',
       blurredBackground: true,
       data: {
         info: 'Greetings from the dialog content component',
         icon: 'like'
       }
     });
   }
 
   openDraggableDialog() {
     const dialogRef = this._dialogService.open(DialogContentComponent, {
       headerTitle: 'Draggable dialog',
-      minWidth: '600px',
+      minWidth: '37.5rem',
       showHeaderLeftBorder: false,
       draggable: true,
       data: {
         info: 'Greetings from the dialog content component',
         icon: 'like'
       }
     });
 
     dialogRef.onDragStart.subscribe((event) => {
       console.log('onDragStart', event);
@@ -105,23 +106,23 @@
   }
 
   openResizableDialog() {
     const dialogRef = this._dialogService.open(DialogContentComponent, {
       headerTitle: 'Resizable dialog',
-      minWidth: '200px',
-      minHeight: '200px',
-      maxWidth: '800px',
-      maxHeight: '800px',
+      minWidth: '12.5rem',
+      minHeight: '12.5rem',
+      maxWidth: '50rem',
+      maxHeight: '50rem',
       showHeaderLeftBorder: false,
       showHeaderBottomBorder: false,
       showCloseBtn: false,
       headerInfoTooltip: 'Drag left bottom corner to resize',
       headerInfoTooltipPosition: 'bottom',
       resizable: true,
       data: {
         info: 'Greetings from the dialog content component',
         icon: 'like'
       }
     });
 
     dialogRef.onResizeStart.subscribe((event) => {
       console.log('onResizeStart', event);

projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts

@@ -154,12 +154,14 @@ export class CpsButtonComponent implements OnChanges {
       this.cvtHeight = convertSize(this.height);
       if (this.cvtHeight) {
         const parsedHeight = parseSize(this.cvtHeight);
-        const unit = parsedHeight.unit;
-        const size = parsedHeight.value * 0.4;
-        const isPx = unit === 'px';
+        if (parsedHeight) {
+          const unit = parsedHeight.unit;
+          const size = parsedHeight.value * 0.4;
+          const isPx = unit === 'px';
 
-        this.cvtFontSize = `${isPx ? Math.floor(size) : size}${unit}`;
-        this.cvtIconSize = `${isPx ? Math.ceil(size) : size}${unit}`;
+          this.cvtFontSize = `${isPx ? Math.floor(size) : size}${unit}`;
+          this.cvtIconSize = `${isPx ? Math.ceil(size) : size}${unit}`;
+        }
       }
     } else {
       switch (this.size) {