fix: update accessibility features of the people picker component (#1922)

* Initial changes to update aria attrs

* update people picker a11y

* Removing commented out code

* clean up styles

* clean up key press logic

* Clean up

* Updating the down arrow behavior to be more consistent and cleaning up some styles

* Removing console.log

Co-authored-by: Patrick Moore <[email protected]>

Author: aslynblohm

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

@@ -40,21 +40,113 @@ mgt-people-picker .root {
   &.disabled {
     pointer-events: none;
   }
+
   padding: 6px 0 0;
 
-  .selected-list {
-    flex: 1 0 auto;
+  .people-picker-inner {
+    flex: 1 1 auto;
     display: flex;
     flex-wrap: wrap;
     vertical-align: middle;
     list-style-type: none;
     font-style: normal;
     font-weight: normal;
     overflow: hidden;
+  }
+
+  .flyout {
+    .search-box {
+      margin: 1px 2px 8px;
+
+      &.search-box-start {
+        line-height: normal;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+      }
+
+      &__input {
+        box-sizing: border-box;
+        border-width: 0;
+        border-style: none;
+        width: 100%;
+        display: flex;
+        flex: 1 0 auto;
+        font-family: $font-family;
+        position: relative;
+        outline: none;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        background-color: $input__background-color;
+        color: $color;
+        word-spacing: inherit;
+        text-indent: inherit;
+        letter-spacing: inherit;
+        &::placeholder {
+          color: $placeholder__color;
+        }
+      }
+    }
+
+    .flyout-root {
+      padding: 0;
+      border-radius: 2px;
+      min-width: 260px;
+      overflow-y: auto;
+      text-align: left;
+      list-style-type: none;
+      background-color: $dropdown__background-color;
+      max-height: var(--mgt-flyout-set-height, unset);
+      border-radius: 8px;
+      li {
+        cursor: pointer;
+      }
 
-    &__options {
-      display: contents;
+      .people-list {
+        list-style: none;
+        padding: 0;
+        .list-person {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 12px;
+          font-style: normal;
+          font-weight: 600;
+          font-size: 14px;
+          margin: var(--file-item-margin, 4px);
+          border-radius: 4px;
+          &:hover {
+            background-color: $dropdown-item__background-color--hover;
+          }
+          &.focused {
+            background-color: $dropdown-item__background-color--hover;
+          }
+          .people-person-text-area {
+            margin-left: 13px;
+            flex: 1 1 0;
+            max-height: 40px;
+            overflow: hidden;
+            color: $color;
+
+            .people-person-text {
+              font-size: 14px;
+              font-weight: normal;
+              margin: 0;
+              padding: 0;
+              &.highlight-search-text {
+                font-weight: bold;
+              }
+            }
+          }
+        }
+      }
     }
+  }
+
+  .selected-list {
+    list-style: none;
+    padding: 0;
+    display: contents;
 
     &__person-wrapper {
       display: flex;
@@ -143,93 +235,6 @@ mgt-people-picker .root {
       @extend .selected-list__person-wrapper-highlighted;
       background-color: #006cbe;
     }
-
-    .flyout {
-      .search-box {
-        margin: 1px 2px 8px;
-
-        &.search-box-start {
-          line-height: normal;
-          margin-inline-start: 0px;
-          margin-inline-end: 0px;
-        }
-
-        &__input {
-          box-sizing: border-box;
-          border-width: 0;
-          border-style: none;
-          width: 100%;
-          display: flex;
-          flex: 1 0 auto;
-          font-family: $font-family;
-          position: relative;
-          outline: none;
-          font-style: normal;
-          font-weight: normal;
-          font-size: 14px;
-          background-color: $input__background-color;
-          color: $color;
-          word-spacing: inherit;
-          text-indent: inherit;
-          letter-spacing: inherit;
-          &::placeholder {
-            color: $placeholder__color;
-          }
-        }
-      }
-
-      .flyout-root {
-        padding: 0;
-        border-radius: 2px;
-        min-width: 260px;
-        overflow-y: auto;
-        text-align: left;
-        list-style-type: none;
-        background-color: $dropdown__background-color;
-        max-height: var(--mgt-flyout-set-height, unset);
-        border-radius: 8px;
-        li {
-          cursor: pointer;
-        }
-
-        .people-list {
-          .list-person {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            padding: 12px;
-            font-style: normal;
-            font-weight: 600;
-            font-size: 14px;
-            margin: var(--file-item-margin, 4px);
-            border-radius: 4px;
-            &:hover {
-              background-color: $dropdown-item__background-color--hover;
-            }
-            &.focused {
-              background-color: $dropdown-item__background-color--hover;
-            }
-            .people-person-text-area {
-              margin-left: 13px;
-              flex: 1 1 0;
-              max-height: 40px;
-              overflow: hidden;
-              color: $color;
-
-              .people-person-text {
-                font-size: 14px;
-                font-weight: normal;
-                margin: 0;
-                padding: 0;
-                &.highlight-search-text {
-                  font-weight: bold;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
   }
 }