release: v2.6.2

Author: gavinbarron

.github/workflows/pr-storybook.yml

@@ -38,7 +38,6 @@ jobs:
           branch: gh-pages
           folder: storybook-static
           target-folder: next/pr/${{ github.event.number }}
-          token: ${{ secrets.ACCESS_TOKEN }}
 
       - name: Comment PR
         uses: thollander/actions-comment-pull-request@v1

.storybook/manager-head.html

@@ -44,7 +44,7 @@
     }
 
     // This is a fix for an accessibility issue: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/1085
-    sidebarHeader[0].innerHTML = '<h1 tabindex="0" class="css-1su1ft1">' + '<a href="https://aka.ms/mgt" target="_blank" class="css-ixbm00">' + "Microsoft Graph Toolkit Playground</a>" + "</h1>";
+    sidebarHeader[0].innerHTML = '<h1 tabindex="-1" class="css-1su1ft1">' + '<a href="https://aka.ms/mgt" target="_blank" class="css-ixbm00">' + "Microsoft Graph Toolkit Playground</a>" + "</h1>";
 
     const sidebarNode = sidebarHeader[0].parentNode;
 
@@ -417,6 +417,7 @@
     color: #717171 !important;
   }
 
+  .sto-ulso1l,
   .css-1en6m26 {
     color: #616159 !important;
   }
@@ -425,4 +426,12 @@
   .css-8ktt77 {
     display: none;
   }
+
+  .css-14o7vtb {
+    border: 2px solid transparent;
+  }
+
+  .css-14o7vtb:focus-visible {
+    outline: auto;
+  }
 </style>

.storybook/preview-body.html

@@ -76,14 +76,18 @@
   }
 
   .css-19nbuh3,
-  .css-1m7olli * .token.attr-value {
+  .css-zj0253 * .token.attr-value {
     color: #0360B9 !important;
   }
 
-  .css-1m7olli * .token.attr-name{
+  .css-zj0253 * .token.attr-name {
     color: #e50000 !important;
   }
 
+  .css-3ltsna:focus-visible {
+    outline: auto;
+  }
+
   @media (max-width: 768px) {
     .story-mgt-root {
       flex-direction: column;

SECURITY.md

@@ -4,7 +4,7 @@
 
 Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
 
-If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
+If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://learn.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
 
 ## Reporting Security Issues
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "root",
   "private": true,
-  "version": "2.6.1",
+  "version": "2.6.2",
   "workspaces": [
     "packages/*",
     "packages/providers/*",
@@ -116,7 +116,7 @@
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-microsoft-contrib": "^6.2.0",
-    "typescript": "^3.7.5",
+    "typescript": "^4.8.2",
     "web-component-analyzer": "^1.1.6",
     "whatwg-fetch": "^3.5.0"
   },
@@ -134,6 +134,7 @@
   },
   "resolutions": {
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "responselike": "2.0.0"
   }
 }

packages/mgt-components/README.md

@@ -13,18 +13,18 @@ You can explore components and samples with the [playground](https://mgt.dev) po
 
 The Toolkit currently includes the following components:
 
-* [mgt-login](https://docs.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://docs.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://docs.microsoft.com/graph/toolkit/components/person-card)
-* [mgt-people](https://docs.microsoft.com/graph/toolkit/components/people)
-* [mgt-people-picker](https://docs.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://docs.microsoft.com/graph/toolkit/components/agenda)
-* [mgt-tasks](https://docs.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://docs.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://docs.microsoft.com/graph/toolkit/components/get)
-* [mgt-teams-channel-picker](https://docs.microsoft.com/en-us/graph/toolkit/components/teams-channel-picker)
-
-The components work best when used with a [provider](https://docs.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.
+* [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
+* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
+* [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
+* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
+* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
+* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+* [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+
+The components work best when used with a [provider](https://learn.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.
 
 ## Get started
 

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts

@@ -312,6 +312,7 @@ export class MgtFileUpload extends MgtBaseComponent {
         <div>
           <input
             id="file-upload-input"
+            aria-label="file upload input"
             type="file"
             multiple="true"
             @change="${this.onFileUploadChange}"

packages/mgt-components/src/components/mgt-login/mgt-login.scss

@@ -72,6 +72,10 @@ mgt-login .login-button {
   &.no-click {
     pointer-events: none;
   }
+
+  &:focus-visible {
+    outline: auto;
+  }
 }
 
 :host .login-icon,

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

@@ -756,7 +756,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                    aria-label="close-icon"
                    class="selected-list__person-wrapper__overflow__close-icon"
                    @click="${e => this.removePerson(person, e)}"
-                   @keydown="${e => this.removePerson(person, e)}"
+                   @keydown="${e => this.handleRemovePersonKeyDown(person, e)}"
                  >
                    \uE711
                  </div>
@@ -899,10 +899,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
              };
              return html`
                <li
-                role="option"
+                role="listitem"
                 @keydown="${this.onUserKeyDown}"
                 aria-label=" ${this.strings.suggestedContact} ${person.displayName}"
-                id="${person.displayName}"
                 tabindex="0"
                 class="${classMap(listPersonClasses)}"
                 @click="${e => this.onPersonClick(person)}">
@@ -974,7 +973,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     const input = this.userInput.toLowerCase();
     const provider = Providers.globalProvider;
 
-    if (!people && provider && provider.state === ProviderState.SignedIn) {
+    if (people) {
+      if (input) {
+        const displayNameMatch = people.filter(person => person?.displayName.toLowerCase().includes(input));
+        people = displayNameMatch;
+      }
+      this._showLoading = false;
+    } else if (!people && provider && provider.state === ProviderState.SignedIn) {
       const graph = provider.graph.forComponent(this);
 
       if (!input.length && this._isFocused) {
@@ -1242,7 +1247,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * Removes person from selected people
    * @param person - person and details pertaining to user selected
    */
-  protected removePerson(person: IDynamicPerson, e: MouseEvent): void {
+  protected removePerson(person: IDynamicPerson, e: UIEvent): void {
     e.stopPropagation();
     const filteredPersonArr = this.selectedPeople.filter(p => {
       if (!person.id && p.displayName) {
@@ -1255,6 +1260,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.fireCustomEvent('selectionChanged', this.selectedPeople);
   }
 
+  /**
+   * Checks if key pressed is an `Enter` key before removing person
+   * @param person
+   * @param e
+   */
+  protected handleRemovePersonKeyDown(person: IDynamicPerson, e: KeyboardEvent): void {
+    if (e.key === 'Enter') {
+      this.removePerson(person, e);
+    }
+  }
+
   /**
    * Tracks when user selects person from picker
    * @param person - contains details pertaining to selected user

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

@@ -358,7 +358,7 @@ export class MgtPeople extends MgtTemplatedComponent {
         people: this.people
       }) ||
       html`
-        <li tabindex=0 aria-label="and ${extra} more attendees" class="overflow"><span>+${extra}<span></li>
+        <li aria-label="and ${extra} more attendees" class="overflow"><span>+${extra}<span></li>
       `
     );
   }