feat(suggest): announce status of current item

Author: gheorghitahurmuz

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

@@ -1171,6 +1171,7 @@ const sharedSpecifications = (
 
                 expect(fixture.debugElement.query(By.css('.mat-chip.mat-standard-chip span'))).toBeFalsy();
 
+                flush();
                 discardPeriodicTasks();
             }));
 

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

@@ -1056,6 +1056,8 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
                 this._focusChipInput();
             }
             this._pushEntry(value);
+
+            this._announceSelectStatus(value.text, true);
         }
 
         const alreadySelectedNormalValue = this.multiple &&
@@ -1065,6 +1067,8 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
 
         if (alreadySelectedNormalValue) {
             this._removeEntry(value);
+
+            this._announceSelectStatus(value.text, false);
         }
 
         if (closeAfterSelect) {
@@ -1248,14 +1252,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,
+            ),
         );
     }
 
@@ -1434,4 +1450,10 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
     private _getValueSummary() {
         return this.value.map(v => this.intl.translateLabel(v.text)).join(', ');
     }
+
+    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 '';
+    }
 }