Merge pull request #2213 from microsoftgraph/main-to-next-1

chore: merge main to next/fluentui

Author: gavinbarron

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @microsoftgraph/microsoft-graph-toolkit-write

CODE_OF_CONDUCT.md

@@ -0,0 +1,9 @@
+# Microsoft Open Source Code of Conduct
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
+
+Resources:
+
+- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
+- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
+- Contact [[email protected]](mailto:[email protected]) with questions or concerns

package.json

@@ -40,7 +40,7 @@
     "bootstrap": "lerna bootstrap --useWorkspaces",
     "clean": "lerna run --parallel --stream --scope @microsoft/* clean",
     "link": "lerna link --force-local",
-    "lint": "eslint -c .eslintrc.js  'packages/*/src/**/*.ts'",
+    "lint": "eslint -c .eslintrc.js --quiet 'packages/*/src/**/*.ts'",
     "pack": "shx rm -rf artifacts/*.tgz && lerna exec --stream --scope @microsoft/* -- npm pack",
     "prepare": "lerna bootstrap --force-local",
     "sass": "lerna run sass --scope @microsoft/*",

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

@@ -926,27 +926,31 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   protected renderSearchResults(people: IDynamicPerson[]) {
     const filteredPeople = people.filter(person => person.id);
-
     return html`
       <ul
         id="suggestions-list"
         class="searched-people-list"
         role="listbox"
-        aria-label="${this.strings.suggestedContacts}">
-          ${repeat(
-            filteredPeople,
-            person => person.id,
-            person => html`
-              <li
-              role="option"
-              id="${person.id}"
-              aria-label=" ${this.strings.suggestedContact} ${person.displayName}"
-              class="searched-people-list-result"
-              @click="${() => this.handleSuggestionClick(person)}">
-                ${this.renderPersonResult(person)}
-              </li>
-            `
-          )}
+        aria-live="polite"
+      >
+         ${repeat(
+           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="${ariaLabel}"
+                class="searched-people-list-result"
+                role="option"
+                @click="${e => this.handleSuggestionClick(person)}">
+                  ${this.renderPersonResult(person)}
+               </li>
+             `;
+           }
+         )}
        </ul>
      `;
   }
@@ -1753,7 +1757,8 @@ 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;
           }
         }
       }

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

@@ -113,7 +113,6 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
         border: $person-avatar-border;
         border-radius: $person-avatar-border-radius;
         margin-block-start: $person-avatar-top-spacing;
-        position: absolute;
       }
 
       .initials,

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

@@ -5,26 +5,26 @@
  * -------------------------------------------------------------------------------------------
  */
 
+import { MgtTemplatedComponent, ProviderState, Providers, customElement, mgtHtml } from '@microsoft/mgt-element';
 import { Contact, Presence } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
 import { getGroupImage, getPersonImage } from '../../graph/graph.photos';
 import { getUserPresence } from '../../graph/graph.presence';
-import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
 import { findUsers, getMe, getUser } from '../../graph/graph.user';
+import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
 import { AvatarSize, IDynamicPerson, ViewType } from '../../graph/types';
-import { Providers, ProviderState, MgtTemplatedComponent, mgtHtml, customElement } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
-import { getSvg, SvgIcon } from '../../utils/SvgHelper';
+import { SvgIcon, getSvg } from '../../utils/SvgHelper';
 import { MgtPersonCard } from '../mgt-person-card/mgt-person-card';
 import '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-person-css';
+import { MgtPersonConfig, PersonViewType, avatarType } from './mgt-person-types';
 import { strings } from './strings';
-import { PersonViewType, MgtPersonConfig, avatarType } from './mgt-person-types';
 
 export { PersonCardInteraction } from '../PersonCardInteraction';
 

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

@@ -195,7 +195,8 @@ export class MgtPicker extends MgtTemplatedComponent {
     if (this.isLoadingState && !this.response) {
       return this.renderTemplate('loading', null);
     } else if (this.hasTemplate('error')) {
-      return this.renderTemplate('error', this.error ? this.error : null, 'error');
+      const error = this.error ? (this.error as Error) : null;
+      return this.renderTemplate('error', { error }, 'error');
     } else if (this.hasTemplate('no-data')) {
       return this.renderTemplate('no-data', null);
     }

packages/mgt-components/src/components/mgt-search-box/mgt-search-box.ts

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { html, TemplateResult } from 'lit';
+import { CSSResult, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement, MgtBaseComponent } from '@microsoft/mgt-element';
 import { fluentSearch } from '@fluentui/web-components';