Fix a11y issues in input component

playwright/cps-accessibility.spec.ts

@@ -106,7 +106,7 @@ const components: ComponentEntry[] = [
   { route: '/file-upload', name: 'File upload', selector: 'cps-file-upload' },
   // { route: '/icon', name: 'Icon', selector: 'cps-icon' },
   { route: '/info-circle', name: 'Info circle', selector: 'cps-info-circle' },
-  // { route: '/input', name: 'Input', selector: 'cps-input' },
+  { route: '/input', name: 'Input', selector: '.example-content cps-input' },
   // { route: '/loader', name: 'Loader', selector: 'cps-loader' },
   {
     route: '/menu',

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

@@ -13,6 +13,14 @@
                         "default": "",
                         "description": "Label of the datepicker element."
                     },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Aria label for the datepicker component, used for accessibility, it takes precedence over label."
+                    },
                     {
                         "name": "disabled",
                         "optional": false,

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

@@ -13,6 +13,14 @@
                         "default": "",
                         "description": "Label of the input element."
                     },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Aria label for the input component, used for accessibility, it takes precedence over label."
+                    },
                     {
                         "name": "hint",
                         "optional": false,
@@ -98,9 +106,17 @@
                         "optional": false,
                         "readonly": false,
                         "type": "iconSizeType",
-                        "default": "18px",
+                        "default": "1.125rem",
                         "description": "Size of icon before input value."
                     },
+                    {
+                        "name": "prefixIconAriaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Aria label for the clickable prefix icon, required when prefixIconClickable is true."
+                    },
                     {
                         "name": "prefixText",
                         "optional": false,

projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.html

@@ -13,6 +13,7 @@ <h3 class="list-title">Styles</h3>
   <div class="list">
     <h3 class="list-title">Components</h3>
     <cps-input
+      ariaLabel="Search a component"
       prefixIcon="search"
       placeholder="Search a component"
       appearance="underlined"

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

@@ -1,5 +1,6 @@
 <div class="search-input">
   <cps-input
+    ariaLabel="Search a color"
     placeholder="Search a color"
     (valueChanged)="onSearchChanged($event)"
     prefixIcon="search"

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

@@ -2,6 +2,7 @@
   <!-- Example of component's usage -->
   <div class="search-input">
     <cps-input
+      ariaLabel="Search an icon"
       placeholder="Search an icon"
       (valueChanged)="onSearchChanged($event)"
       hint="Click on any icon to copy its name"

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

@@ -43,17 +43,20 @@
         placeholder="Enter amount"></cps-input>
       <div class="sync-val-example">
         <cps-input
-          width="400"
+          width="25rem"
           label="Input with two-way binding, type something in"
           [(ngModel)]="syncVal"
-          hint="This input has a fixed width of 400px"
+          hint="This input has a fixed width of 25rem"
           [ngModelOptions]="{ standalone: true }">
           ></cps-input
         >
         <span class="sync-val">{{ syncVal }}</span>
       </div>
       <cps-input
-        label="Underlined input"
+        label="Underlined input with clickable prefix icon"
+        [prefixIconClickable]="true"
+        prefixIconAriaLabel="Search"
+        (prefixIconClicked)="onClickPrefixIcon()"
         prefixIcon="search"
         appearance="underlined"
         placeholder="Search something"

projects/composition/src/app/pages/input-page/input-page.component.scss

@@ -1,5 +1,5 @@
 .inputs-group {
-  gap: 24px;
+  gap: 1.5rem;
   display: flex;
   flex-direction: column;
 }
@@ -8,6 +8,6 @@
   display: flex;
   align-items: center;
   .sync-val {
-    margin-left: 24px;
+    margin-left: 1.5rem;
   }
 }

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

@@ -8,7 +8,7 @@
   ValidationErrors,
   Validators
 } from '@angular/forms';
-import { CpsInputComponent } from 'cps-ui-kit';
+import { CpsInputComponent, CpsNotificationService } from 'cps-ui-kit';
 
 import ComponentData from '../../api-data/cps-input.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
@@ -25,13 +25,16 @@
   styleUrls: ['./input-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class InputPageComponent implements OnInit {
   form!: UntypedFormGroup;
   syncVal = '';
   componentData = ComponentData;
 
   // eslint-disable-next-line no-useless-constructor
-  constructor(private _formBuilder: UntypedFormBuilder) {}
+  constructor(
+    private _notifService: CpsNotificationService,
+    private _formBuilder: UntypedFormBuilder
+  ) {}
 
   ngOnInit() {
     this.form = this._formBuilder.group({
@@ -55,4 +58,10 @@
     }
     return null;
   }
+
+  onClickPrefixIcon() {
+    this._notifService.info(`Prefix icon clicked`, undefined, {
+      timeout: 2000
+    });
+  }
 }

projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html

@@ -327,6 +327,7 @@
     role="combobox"
     aria-autocomplete="list"
     aria-haspopup="listbox"
+    [attr.aria-busy]="loading || validating ? true : null"
     [attr.aria-invalid]="error || externalError ? 'true' : null"
     [attr.aria-controls]="optionsListId"
     [attr.aria-activedescendant]="activeDescendantId"

projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.html

@@ -7,7 +7,9 @@
     [disabled]="disabled"
     [value]="stringDate"
     [label]="label"
+    [ariaLabel]="ariaLabel"
     prefixIcon="datepicker"
+    prefixIconAriaLabel="Open calendar"
     [placeholder]="placeholder"
     (prefixIconClicked)="onClickCalendarIcon()"
     [prefixIconClickable]="true"

projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.scss

@@ -13,8 +13,8 @@ $disabled-day-color: var(--cps-color-text-lightest);
     width: 100%;
     &.focused {
       ::ng-deep {
-        input {
-          border: 1px solid $color-calm !important;
+        .cps-input-wrap {
+          border-color: $color-calm !important;
         }
         .cps-input-prefix-icon {
           color: $color-calm !important;
@@ -82,8 +82,14 @@ $disabled-day-color: var(--cps-color-text-lightest);
     .p-datepicker .p-datepicker-header .p-datepicker-title {
       line-height: 2rem;
     }
-    .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,
-    .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month {
+    .p-datepicker
+      .p-datepicker-header
+      .p-datepicker-title
+      .p-datepicker-select-year,
+    .p-datepicker
+      .p-datepicker-header
+      .p-datepicker-title
+      .p-datepicker-select-month {
       color: $text-color;
       transition:
         background-color 0.2s,
@@ -102,7 +108,10 @@ $disabled-day-color: var(--cps-color-text-lightest);
       .p-datepicker-select-month:enabled:hover {
       color: $color-calm;
     }
-    .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month {
+    .p-datepicker
+      .p-datepicker-header
+      .p-datepicker-title
+      .p-datepicker-select-month {
       margin-right: 0.5rem;
     }
     .p-datepicker table {
@@ -206,7 +215,9 @@ $disabled-day-color: var(--cps-color-text-lightest);
       transition: box-shadow 0.2s;
       border-radius: 6px;
     }
-    .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected {
+    .p-datepicker
+      .p-datepicker-month-view
+      .p-datepicker-month.p-datepicker-day-selected {
       color: $color-calm;
       background: $color-selected-background;
       font-weight: bold;
@@ -219,7 +230,9 @@ $disabled-day-color: var(--cps-color-text-lightest);
       transition: box-shadow 0.2s;
       border-radius: 6px;
     }
-    .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected {
+    .p-datepicker
+      .p-datepicker-year-view
+      .p-datepicker-year.p-datepicker-day-selected {
       color: $color-calm;
       background: $color-selected-background;
       font-weight: bold;
@@ -254,7 +267,9 @@ $disabled-day-color: var(--cps-color-text-lightest);
     }
     .p-datepicker:not(.p-disabled)
       .p-datepicker-month-view
-      .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):hover {
+      .p-datepicker-month:not(.p-disabled):not(
+        .p-datepicker-day-selected
+      ):hover {
       background: $color-highlight;
     }
     .p-datepicker:not(.p-disabled)
@@ -266,7 +281,9 @@ $disabled-day-color: var(--cps-color-text-lightest);
     }
     .p-datepicker:not(.p-disabled)
       .p-yearpicker
-      .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover {
+      .p-datepicker-year:not(.p-disabled):not(
+        .p-datepicker-day-selected
+      ):hover {
       background: $color-highlight;
     }
     .p-datepicker:not(.p-disabled)

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

@@ -3,6 +3,7 @@
   Component,
   EventEmitter,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Optional,
@@ -43,15 +44,21 @@
   templateUrl: './cps-datepicker.component.html',
   styleUrls: ['./cps-datepicker.component.scss']
 })
 export class CpsDatepickerComponent
-  implements ControlValueAccessor, OnInit, OnDestroy
+  implements ControlValueAccessor, OnInit, OnChanges, OnDestroy
 {
   /**
    * Label of the datepicker element.
    * @group Props
    */
   @Input() label = '';
 
+  /**
+   * Aria label for the datepicker component, used for accessibility, it takes precedence over label.
+   * @group Props
+   */
+  @Input() ariaLabel = '';
+
   /**
    * Determines whether datepicker is disabled.
    * @group Props
@@ -208,6 +215,14 @@
     );
   }
 
+  ngOnChanges() {
+    if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsDatepickerComponent: unlabeled datepicker component must have an ariaLabel for accessibility.'
+      );
+    }
+  }
+
   ngOnDestroy() {
     this._statusChangesSubscription?.unsubscribe();
   }