Merge pull request #341 from UiPath/fix/suggest_a11y

Fix(suggest-a11y): add aria-label input

Author: CatalinB7

CHANGELOG.md

@@ -1,3 +1,7 @@
+# v13.7.9 (2023-05-11)
+* **suggest** add input for aria-label
+* **suggest** condition title display by input
+
 # v13.7.8 (2023-05-10)
 * **fix** display outline on suggest grid filter
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "13.7.8",
+  "version": "13.7.9",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

package.json

@@ -16,7 +16,7 @@
              [uiAutofocus]="!isOpen && focus"
              [refocus]="!isOpen && focus"
              [matRippleDisabled]="isFormControl"
-             [attr.aria-label]="placeholder"
+             [attr.aria-label]="ariaLabel ?? placeholder"
              [attr.aria-describedby]="describedBy"
              [attr.aria-required]="required"
              [attr.aria-disabled]="disabled || readonly"
@@ -44,7 +44,7 @@
             <ng-template #showDefaultValue>
                 <div [matTooltip]="tooltip ?? ''"
                      class="display-container text-ellipsis">
-                    <span *ngIf="!isFormControl && placeholder"
+                    <span *ngIf="!isFormControl && placeholder && !shouldHideTitle"
                           class="display-title"
                           aria-hidden="true">
                         {{ placeholder }}:
@@ -74,7 +74,7 @@
     <ng-template #chipsTemplate>
         <mat-chip-list #chipList
                        [attr.tabindex]="!disabled && !readonly ? 0 : null"
-                       [attr.aria-label]="placeholder"
+                       [attr.aria-label]="ariaLabel ?? placeholder"
                        [attr.aria-describedby]="describedBy"
                        [attr.aria-required]="required"
                        [attr.aria-disabled]="disabled || readonly"
@@ -116,7 +116,7 @@
                        [formControl]="inputControl"
                        [matChipInputFor]="chipList"
                        [attr.maxlength]="maxLength"
-                       [attr.aria-label]="placeholder"
+                       [attr.aria-label]="ariaLabel ?? placeholder"
                        selectionLocation="end"
                        autocomplete="off"
                        aria-autocomplete="list"

projects/angular/components/ui-suggest/src/ui-suggest.component.html

@@ -89,6 +89,7 @@ class UiSuggestFixtureDirective {
     displayPriority: 'default' | 'selected' = 'default';
     fetchStrategy: 'eager' | 'onOpen' = 'eager';
     minChars = 0;
+    shouldHideTitle = false;
 
     set value(value: ISuggestValue[] | undefined) {
         this._value = value;
@@ -148,6 +149,21 @@ const sharedSpecifications = (
     });
 
     describe('Behavior: standard usage', () => {
+        ([true, false].forEach(shouldHideTitle => {
+            it(`should ${shouldHideTitle ? 'not' : ''} display title if shouldHideTitle is ${shouldHideTitle}`, () => {
+                component.placeholder = 'some place holder';
+                component.shouldHideTitle = shouldHideTitle;
+
+                fixture.detectChanges();
+                const spanElem = document.querySelector('.display-title');
+                if (shouldHideTitle || uiSuggest.isFormControl) {
+                    expect(spanElem).toBeNull();
+                } else {
+                    expect(spanElem).toBeTruthy();
+                }
+            });
+        }));
+
         it('should be initialized', () => {
             expect(uiSuggest).toBeDefined();
         });
@@ -2464,7 +2480,8 @@ describe('Component: UiSuggest', () => {
                         [minChars]="minChars"
                         [drillDown]="drillDown"
                         [readonly]="readonly"
-                        [compact]="compact">
+                        [compact]="compact"
+                        [shouldHideTitle]="shouldHideTitle">
             </ui-suggest>
         `,
     })

projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts

@@ -103,6 +103,20 @@ export abstract class UiSuggestMatFormFieldDirective implements
         this.stateChanges.next();
     }
 
+    /**
+     * Hides the combo box title.
+     *
+     */
+    @Input()
+    shouldHideTitle = false;
+
+    /**
+     * Sets aria-label on input or mat-chip-list element.
+     *
+     */
+    @Input('aria-label')
+    ariaLabel: string | null = null;
+
     /**
      * Set a custom size for the list items.
      *

projects/angular/components/ui-suggest/src/ui-suggest.mat-form-field.ts

@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "13.7.8",
+    "version": "13.7.9",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",