fix: people-picker set focus on list navigation (#2219)

sets focus on the currently selected item when using keyboard to chose a person
uses focus styling
fixes an issue which would cause the page to scroll when navigating in the suggestions list if the page had scroll space below the end of the suggestions list

Author: gavinbarron

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

@@ -126,7 +126,9 @@ mgt-people-picker .root {
               color: $dropdown-item__text__color--hover;
             }
           }
-          &.focused {
+
+          &:focus,
+          &:focus-within {
             background-color: $dropdown-item__background-color--hover;
             .people-person-text-area {
               color: $dropdown-item__text__color--hover;

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

@@ -572,7 +572,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private defaultPeople: IDynamicPerson[];
 
   // tracking of user arrow key input for selection
-  private _arrowSelectionCount: number = -1;
+  @state() private _arrowSelectionCount = -1;
+
   // List of people requested if group property is provided
   private _groupPeople: IDynamicPerson[];
   private _debouncedSearch: { (): void; (): void };
@@ -852,13 +853,18 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   protected renderFlyout(anchor: TemplateResult): TemplateResult {
     return html`
-       <mgt-flyout light-dismiss class="flyout">
-         ${anchor}
-         <div slot="flyout" class="flyout-root" @wheel=${(e: WheelEvent) => this.handleSectionScroll(e)}>
-           ${this.renderFlyoutContent()}
-         </div>
-       </mgt-flyout>
-     `;
+      <mgt-flyout light-dismiss class="flyout">
+        ${anchor}
+        <div
+          slot="flyout"
+          class="flyout-root"
+          @wheel=${(e: WheelEvent) => this.handleSectionScroll(e)}
+          @keydown=${(e: KeyboardEvent) => this.onUserKeyDown(e)}
+        >
+          ${this.renderFlyoutContent()}
+        </div>
+      </mgt-flyout>
+    `;
   }
 
   /**
@@ -1310,6 +1316,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (this.input) {
       this.input.setAttribute('aria-expanded', 'true');
     }
+    this._arrowSelectionCount = -1;
   }
 
   /**
@@ -1388,13 +1395,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private gainedFocus() {
     this.clearHighlighted();
     this._isFocused = true;
-    this.loadState();
+    void this.loadState();
+    this.showFlyout();
   }
 
   // handle input blur
   private lostFocus() {
     this._isFocused = false;
-    this._arrowSelectionCount = -1;
     if (this.input) {
       this.input.setAttribute('aria-expanded', 'false');
       this.input.setAttribute('aria-activedescendant', '');
@@ -1403,9 +1410,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     const peopleList = this.renderRoot.querySelector('.people-list');
 
     if (peopleList) {
-      for (let i = 0; i < peopleList.children.length; i++) {
-        peopleList.children[i].classList.remove('focused');
-        peopleList.children[i].setAttribute('aria-selected', 'false');
+      for (const el of peopleList.children) {
+        el.classList.remove('focused');
+        el.setAttribute('aria-selected', 'false');
       }
     }
 
@@ -1627,9 +1634,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       this.handleArrowSelection(event);
-      if (input.value.length > 0) {
-        event.preventDefault();
-      }
+      // prevent page from scrolling
+      event.preventDefault();
     }
 
     if (event.code === 'Enter') {
@@ -1863,28 +1869,31 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           if (this._arrowSelectionCount === -1) {
             this._arrowSelectionCount = 0;
           } else {
-            this._arrowSelectionCount = (this._arrowSelectionCount + 1) % peopleList.children.length;
+            this._arrowSelectionCount =
+              (this._arrowSelectionCount + 1 + peopleList.children.length) % peopleList.children.length;
           }
         }
       }
 
       // reset background color
       // reset aria-selected to false
-      // tslint:disable-next-line: prefer-for-of
-      for (let i = 0; i < peopleList.children.length; i++) {
-        peopleList.children[i].classList.remove('focused');
-        peopleList.children[i].setAttribute('aria-selected', 'false');
+      for (const person of peopleList?.children) {
+        const p = person as HTMLElement;
+        p.setAttribute('aria-selected', 'false');
+        p.removeAttribute('tabindex');
+        p.blur();
       }
 
       // set selected background
       // set aria-selected to true
       const focusedItem = peopleList.children[this._arrowSelectionCount] as HTMLElement;
 
       if (focusedItem) {
-        focusedItem.classList.add('focused');
+        focusedItem.setAttribute('tabindex', '0');
+        focusedItem.focus();
         focusedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
         focusedItem.setAttribute('aria-selected', 'true');
-        this.input.setAttribute('aria-activedescendant', peopleList.children[this._arrowSelectionCount].id);
+        this.input.setAttribute('aria-activedescendant', focusedItem.id);
       }
     }
   }

packages/mgt-components/tsconfig.json

@@ -4,7 +4,8 @@
     "outDir": "dist/es6",
     "sourceRoot": "src",
     "rootDir": "src",
-    "composite": true
+    "composite": true,
+    "lib": ["dom", "es5", "DOM.Iterable"]
   },
   "references": [{ "path": "../mgt-element" }],
   "include": ["src"],