feat(suggest): announce status of current item

Author: gheorghitahurmuz

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

@@ -1195,6 +1195,57 @@ const sharedSpecifications = (
                 fixture.detectChanges();
                 expect(spy).toHaveBeenCalledWith(`${component.items[0].text} item 1 out of ${component.items.length}`);
             });
+
+            it(`should announce as highlighted and selected for first time`, () => {
+                component.items = generateSuggetionItemList('random');
+                component.value = [component.items[0]];
+                fixture.detectChanges();
+
+                const spy = spyOn((uiSuggest as any)._liveAnnouncer, 'announce');
+                const display = fixture.debugElement.query(By.css('.mat-chip-list'));
+                display.nativeElement.dispatchEvent(EventGenerator.click);
+
+                fixture.detectChanges();
+
+                expect(spy).toHaveBeenCalledWith(`${component.items[0].text} (selected) item 1 out of ${component.items.length}`);
+            });
+
+            it(`should announce status of item`, () => {
+                component.items = generateSuggetionItemList('random');
+                fixture.detectChanges();
+
+                const spy = spyOn((uiSuggest as any)._liveAnnouncer, 'announce');
+                const display = fixture.debugElement.query(By.css('.mat-chip-list'));
+                display.nativeElement.dispatchEvent(EventGenerator.click);
+
+                fixture.detectChanges();
+
+                const itemContainer = fixture.debugElement.query(By.css('.ui-suggest-dropdown-item-list-container'));
+                itemContainer.nativeElement.dispatchEvent(
+                    EventGenerator.keyDown(Key.Enter),
+                );
+                itemContainer.nativeElement.dispatchEvent(
+                    EventGenerator.keyDown(Key.ArrowDown),
+                );
+                itemContainer.nativeElement.dispatchEvent(
+                    EventGenerator.keyDown(Key.Enter),
+                );
+                itemContainer.nativeElement.dispatchEvent(
+                    EventGenerator.keyDown(Key.Enter),
+                );
+                itemContainer.nativeElement.dispatchEvent(
+                    EventGenerator.keyDown(Key.ArrowUp),
+                );
+
+                expect(spy.calls.allArgs()).toEqual([
+                    [`${component.items[0].text} item 1 out of ${component.items.length}`],
+                    [`${component.items[0].text} item is selected`],
+                    [`${component.items[1].text} item 2 out of ${component.items.length}`],
+                    [`${component.items[1].text} item is selected`],
+                    [`${component.items[1].text} item is removed from selection`],
+                    [`${component.items[0].text} (selected) item 1 out of ${component.items.length}`],
+                ]);
+            });
         });
 
         describe('With custom', () => {
@@ -1252,6 +1303,7 @@ const sharedSpecifications = (
 
                 expect(fixture.debugElement.query(By.css('.mat-chip.mat-standard-chip span'))).toBeFalsy();
 
+                flush();
                 discardPeriodicTasks();
             }));
 
@@ -2295,20 +2347,20 @@ const sharedSpecifications = (
             }));
 
             it('should load more data at bottom of the list', waitForAsync(async () => {
+                fixture.detectChanges();
                 const display = fixture.debugElement.query(By.css('.display'));
                 display.nativeElement.dispatchEvent(EventGenerator.click);
-                fixture.detectChanges();
 
+                fixture.detectChanges();
                 await fixture.whenStable();
 
                 expect(uiSuggest.items.length).toBe(NUMBER_OF_ITEMS_PER_VIEW + 1);
 
                 const itemContainer = fixture.debugElement.query(By.css('.ui-suggest-dropdown-item-list-container'));
-                for (let i = 0; i <= uiSuggest.items.length; i++) {
+                for (let i = 0; i <= uiSuggest.items.length + 1; i++) {
                     itemContainer.nativeElement.dispatchEvent(
                         EventGenerator.keyDown(Key.ArrowUp),
                     );
-
                 }
                 fixture.detectChanges();
                 await fixture.whenStable();
@@ -2321,9 +2373,10 @@ const sharedSpecifications = (
 
                 const display = fixture.debugElement.query(By.css('.display'));
                 display.nativeElement.dispatchEvent(EventGenerator.click);
-                fixture.detectChanges();
 
+                fixture.detectChanges();
                 await fixture.whenStable();
+
                 expect(spy).toHaveBeenCalledTimes(1);
 
                 const itemContainer = fixture.debugElement.query(By.css('.ui-suggest-dropdown-item-list-container'));
@@ -2335,6 +2388,8 @@ const sharedSpecifications = (
                 }
                 fixture.detectChanges();
                 await fixture.whenStable();
+                fixture.detectChanges();
+                await fixture.whenStable();
                 expect(spy).toHaveBeenCalledTimes(2);
             }));
         });

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

@@ -1214,6 +1214,8 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
                 this._focusChipInput();
             }
             this._pushEntry(value);
+
+            this._announceSelectStatus(value.text, true);
         }
 
         const alreadySelectedNormalValue = this.multiple &&
@@ -1223,6 +1225,8 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
 
         if (alreadySelectedNormalValue) {
             this._removeEntry(value);
+
+            this._announceSelectStatus(value.text, false);
         }
 
         if (closeAfterSelect) {
@@ -1471,14 +1475,26 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
             this._liveAnnouncer.announce(this.intl.noResultsLabel);
             return;
         }
+
+        const item = this.activeIndex < this.headerItems!.length
+            ? this.headerItems![this.activeIndex]
+            : this.items[this.activeIndex - this.headerItems!.length];
+
+        const isCurrentItemSelected = !this._isOnCustomValueIndex
+            ? this.isItemSelected(item)
+            : undefined;
+
         const textToAnnounce = !this._isOnCustomValueIndex
-            ? this.activeIndex < this.headerItems!.length
-                ? this.headerItems![this.activeIndex].text
-                : this.items[this.activeIndex - this.headerItems!.length].text
+            ? item.text
             : `${this.intl.customValueLiveLabel} ${this.customValueLabelTranslator(this.inputControl.value)}`;
 
         this._liveAnnouncer.announce(
-            this.intl.currentItemLabel(textToAnnounce, this.activeIndex + 1, this.headerItems!.length + this._items.length),
+            this.intl.currentItemLabel(
+                textToAnnounce,
+                this.activeIndex + 1,
+                this.headerItems!.length + this._items.length,
+                isCurrentItemSelected,
+            ),
         );
     }
 
@@ -1748,4 +1764,10 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
             end: this._items.length - 1,
         });
     }
+
+    private _announceSelectStatus(text: string, status: boolean) {
+        if (text) {
+            this._liveAnnouncer.announce(this.intl.currentItemSelectionStatus(text, status));
+        }
+    }
 }

projects/angular/components/ui-suggest/src/ui-suggest.intl.ts

@@ -54,7 +54,9 @@ export class UiSuggestIntl implements OnDestroy {
      * @param itemNo The current item index.
      * @param itemCount The total item count.
      */
-    currentItemLabel = (text: string, itemNo: number, itemCount: number) => `${text} item ${itemNo} out of ${itemCount}`;
+    currentItemLabel = (text: string, itemNo: number, itemCount: number, selectedStatus?: boolean) => `${text}${this._selectedStatusText(selectedStatus)} item ${itemNo} out of ${itemCount}`;
+
+    currentItemSelectionStatus = (text: string, isItemSelected: boolean) => `${text} item is ${isItemSelected ? 'selected' : 'removed from selection'}`;
 
     /**
      * Custom value label generator function.
@@ -86,4 +88,12 @@ export class UiSuggestIntl implements OnDestroy {
         this._destroyed$.complete();
         this.changes.complete();
     }
+
+    private _selectedStatusText(selectedStatus?: boolean) {
+        if (selectedStatus) {
+            return ' (selected)';
+        }
+
+        return '';
+    }
 }