fix(a11y): announce when no matches are found in people-picker (#3180)

* give feedback when no people are found

* revert to mgtHtml

* add aria-controlls to input field

* clear results when no userInput

* announce no results found

---------

Co-authored-by: Musale Martin <[email protected]>

Author: Mnickii

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -693,6 +693,8 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         slot="anchor"
         id="people-picker-input"
         role="combobox"
+        aria-live="assertive"
+        aria-atomic="true"
         placeholder=${this.hasMaxSelections ? this.strings.maxSelectionsPlaceHolder : placeholder}
         aria-label=${this.ariaLabel || maxSelectionsAriaLabel || placeholder || this.strings.selectContact}
         aria-expanded=${this.flyout?.isOpen ?? false}
@@ -809,7 +811,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
       mgtHtml`
          <div class="message-parent">
            <mgt-spinner></mgt-spinner>
-           <div aria-label="${this.strings.loadingMessage}" class="loading-text">
+           <div aria-label="${this.strings.loadingMessage}" aria-live="polite" role="alert" class="loading-text">
              ${this.strings.loadingMessage}
            </div>
          </div>
@@ -833,7 +835,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
       this.renderTemplate('no-data', null) ||
       html`
          <div class="message-parent">
-           <div aria-label=${this.strings.noResultsFound} class="search-error-text">
+           <div aria-label=${this.strings.noResultsFound} aria-live="polite" role="alert" class="search-error-text">
              ${this.strings.noResultsFound}
            </div>
          </div>
@@ -857,6 +859,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         class="searched-people-list"
         role="listbox"
         aria-live="polite"
+        aria-label="${this.strings.suggestionsTitle}"
         title=${this.strings.suggestionsTitle}
       >
         ${repeat(
@@ -1372,6 +1375,8 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         this.handleUserSearch();
       }
       this._setAnyEmail = false;
+    } else {
+      this._foundPeople = [];
     }
   };