Merge pull request #333 from UiPath/fix/a11y_suggest

fix(suggest): condition title display by input

Author: CatalinB7

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v14.7.6 (2023-05-09)
+* **suggest** condition title display by input
+
 # v14.7.5 (2023-05-05)
 * **grid** fix styling of resize icon
 * **suggest** change focus logic

package-lock.json

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

package.json

@@ -50,7 +50,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 }}:

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

@@ -93,6 +93,7 @@ class UiSuggestFixtureDirective {
     fetchStrategy: 'eager' | 'onOpen' = 'eager';
     searchSourceStrategy: 'default' | 'lazy' = 'default';
     minChars = 0;
+    shouldHideTitle = false;
 
     displayValueFactory?: (value: ISuggestValue[]) => string;
 
@@ -159,6 +160,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();
         });
@@ -2699,7 +2715,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

@@ -16,10 +16,10 @@ import {
 } from '@angular/core';
 import {
     ControlValueAccessor,
-    UntypedFormControl,
     FormGroupDirective,
     NgControl,
     NgForm,
+    UntypedFormControl,
 } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
@@ -103,6 +103,13 @@ export abstract class UiSuggestMatFormFieldDirective implements
         this.stateChanges.next();
     }
 
+    /**
+     * Hides the combo box title.
+     *
+     */
+    @Input()
+    shouldHideTitle = false;
+
     /**
      * 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": "14.7.5",
+    "version": "14.7.6",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",