Add ac11y support for the people-picker to narrate selected people (#1439)

* Add ac11y support for the p-picker to narrate selected people

* Update the aria-orientation to vertical

Co-authored-by: Nicolas Vogt <[email protected]>

Author: musale

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

@@ -53,6 +53,10 @@ mgt-people-picker .root {
     font-weight: normal;
     overflow: hidden;
 
+    &__options {
+      display: contents;
+    }
+
     &__person-wrapper {
       display: flex;
       margin: 0 5px 6px 0;

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

@@ -620,10 +620,19 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       return null;
     }
     return html`
-       ${selectedPeople.slice(0, selectedPeople.length).map(
-         person =>
-           html`
-             <div class="selected-list__person-wrapper">
+       <div
+        tabindex="0"
+        aria-label="selected-people"
+        aria-orientation="vertical"
+        role="listbox"
+        class="selected-list__options">${selectedPeople.slice(0, selectedPeople.length).map(
+          person =>
+            html`
+             <div
+             role="option"
+             tabindex="0"
+             aria-label=${person.displayName}
+             class="selected-list__person-wrapper">
                ${
                  this.renderTemplate(
                    'selected-person',
@@ -635,6 +644,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                <div class="selected-list__person-wrapper__overflow">
                  <div class="selected-list__person-wrapper__overflow__gradient"></div>
                  <div
+                   tabindex="0"
+                   aria-label="close-icon"
                    class="selected-list__person-wrapper__overflow__close-icon"
                    @click="${e => this.removePerson(person, e)}"
                  >
@@ -643,7 +654,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                </div>
              </div>
            `
-       )}
+        )}</div>
      `;
   }
   /**