Merge pull request #2220 from microsoftgraph/main

release v2.10.1

Author: gavinbarron

package.json

@@ -1,7 +1,7 @@
 {
   "name": "root",
   "private": true,
-  "version": "2.10.0",
+  "version": "2.10.1",
   "workspaces": [
     "packages/*",
     "packages/providers/*",

packages/mgt-components/package.json

@@ -27,7 +27,7 @@
     "build": "npm-run-all clean build:compile",
     "build:compile": "npm-run-all sass compile",
     "build:watch": "npm-run-all -p sass:watch compile:watch",
-    "clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.tsbuildinfo",
+    "clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.tsbuildinfo && shx rm 'src/**/*-css.ts' || shx true",
     "compile": "tsc -b",
     "compile:watch": "tsc -w",
     "lint": "tslint -c ../../tslint.json 'src/**/*.ts'",

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>
+    `;
   }
 
   /**
@@ -937,7 +943,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   protected renderSearchResults(people: IDynamicPerson[]) {
     const filteredPeople = people.filter(person => person.id);
-
     return html`
       <ul
         id="suggestions-list"
@@ -950,14 +955,16 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
            filteredPeople,
            person => person.id,
            person => {
+             const lineTwo = person.jobTitle || (person as User).mail;
+             const ariaLabel = `${this.strings.suggestedContact} ${person.displayName} ${lineTwo ?? ''}`;
              return html`
                <li
                 id="${person.id}"
-                aria-label=" ${this.strings.suggestedContact} ${person.displayName}"
+                aria-label="${ariaLabel}"
                 class="list-person"
                 role="option"
                 @click="${e => this.handleSuggestionClick(person)}">
-                 ${this.renderPersonResult(person)}
+                  ${this.renderPersonResult(person)}
                </li>
              `;
            }
@@ -1309,6 +1316,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (this.input) {
       this.input.setAttribute('aria-expanded', 'true');
     }
+    this._arrowSelectionCount = -1;
   }
 
   /**
@@ -1387,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', '');
@@ -1402,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');
       }
     }
 
@@ -1626,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') {
@@ -1862,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/src/components/mgt-person/mgt-person.ts

@@ -8,6 +8,7 @@
 import { Contact, Presence } from '@microsoft/microsoft-graph-types';
 import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
 import { getGroupImage, getPersonImage } from '../../graph/graph.photos';
 import { getUserPresence } from '../../graph/graph.presence';
@@ -586,7 +587,10 @@ export class MgtPerson extends MgtTemplatedComponent {
       };
 
       personTemplate = html`
-        <div class=${classMap(rootClasses)} tabindex="0">
+        <div 
+          class=${classMap(rootClasses)}
+          tabindex=${ifDefined(this.personCardInteraction === PersonCardInteraction.click ? '0' : undefined)}
+        >
           ${imageWithPresenceTemplate} ${detailsTemplate}
         </div>
       `;