From 58aa32c7f07ae53f9b85867613bd86291ea9d950 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Mon, 13 May 2024 19:14:30 +0300
Subject: [PATCH 1/5] give feedback when no people are found

---
 .../src/components/mgt-people-picker/mgt-people-picker.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 3ddf64affc..8515e3cb00 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -806,10 +806,10 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   protected renderLoading = (): TemplateResult => {
     return (
       this.renderTemplate('loading', null) ||
-      mgtHtml`
+      html`
          <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" class="loading-text">
              ${this.strings.loadingMessage}
            </div>
          </div>
@@ -833,7 +833,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" class="search-error-text">
              ${this.strings.noResultsFound}
            </div>
          </div>

From b1f93bf384f94e775e8179f9ebe01d1cc18efb35 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Tue, 14 May 2024 11:19:09 +0300
Subject: [PATCH 2/5] revert to mgtHtml

---
 .../src/components/mgt-people-picker/mgt-people-picker.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 8515e3cb00..8174613617 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -806,7 +806,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   protected renderLoading = (): TemplateResult => {
     return (
       this.renderTemplate('loading', null) ||
-      html`
+      mgtHtml`
          <div class="message-parent">
            <mgt-spinner></mgt-spinner>
            <div aria-label="${this.strings.loadingMessage}" aria-live="polite" class="loading-text">

From dae3f232ee4ed3dbf86fc6dc2eff2100b2096239 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Thu, 23 May 2024 15:55:52 +0300
Subject: [PATCH 3/5] add aria-controlls to input field

---
 .../src/components/mgt-people-picker/mgt-people-picker.ts     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 8174613617..b1a9a44f88 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -692,7 +692,10 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         appearance="outline"
         slot="anchor"
         id="people-picker-input"
+        aria-controls="suggestions-list"
         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}
@@ -857,6 +860,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(

From b2494c1d41bdc517c74b394898c1461bcf647182 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Mon, 27 May 2024 18:27:05 +0300
Subject: [PATCH 4/5] clear results when no userInput

---
 .../src/components/mgt-people-picker/mgt-people-picker.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index b1a9a44f88..0ed43223c0 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -692,10 +692,8 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         appearance="outline"
         slot="anchor"
         id="people-picker-input"
-        aria-controls="suggestions-list"
         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}
@@ -1376,6 +1374,8 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         this.handleUserSearch();
       }
       this._setAnyEmail = false;
+    } else {
+      this._foundPeople = [];
     }
   };
 

From 62d5e89021d9e2d4e864580d45368d0f7370958b Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Wed, 29 May 2024 14:17:26 +0300
Subject: [PATCH 5/5] announce no results found

---
 .../src/components/mgt-people-picker/mgt-people-picker.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 0ed43223c0..1cb848b6ab 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -694,6 +694,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         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}
@@ -810,7 +811,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
       mgtHtml`
          <div class="message-parent">
            <mgt-spinner></mgt-spinner>
-           <div aria-label="${this.strings.loadingMessage}" aria-live="polite" class="loading-text">
+           <div aria-label="${this.strings.loadingMessage}" aria-live="polite" role="alert" class="loading-text">
              ${this.strings.loadingMessage}
            </div>
          </div>
@@ -834,7 +835,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
       this.renderTemplate('no-data', null) ||
       html`
          <div class="message-parent">
-           <div aria-label=${this.strings.noResultsFound} aria-live="polite" class="search-error-text">
+           <div aria-label=${this.strings.noResultsFound} aria-live="polite" role="alert" class="search-error-text">
              ${this.strings.noResultsFound}
            </div>
          </div>