fix(a11y): narrate person list position in mgt-agenda (#3221)

* fix person in list narration

* fix list item arrow interaction

* fix overflow

* add tests, bump test helpers

* fix narrator

package.json

@@ -76,7 +76,7 @@
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@microsoft/eslint-config-msgraph": "^3.0.3",
     "@open-wc/testing": "^4.0.0",
-    "@open-wc/testing-helpers": "^3.0.0",
+    "@open-wc/testing-helpers": "3.0.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",

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

@@ -0,0 +1,39 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import { MockProvider, Providers } from '@microsoft/mgt-element';
+import { MgtPeople, registerMgtPeopleComponent } from './mgt-people';
+
+describe('mgt-people - tests', () => {
+  registerMgtPeopleComponent();
+  Providers.globalProvider = new MockProvider(true);
+
+  it('should render with overflow', async () => {
+    const mgtPeople = await fixture(html`<mgt-people
+          people-queries="Lidia, Megan, Lynne, Brian, Joni">
+        </mgt-people>
+        `);
+    // @ts-expect-error TS2554 expects 3 arguments got 2 https://github.com/open-wc/open-wc/issues/2746
+    await oneEvent(mgtPeople, 'people-rendered');
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    expect(mgtPeople.shadowRoot.querySelector('.overflow')).to.not.be.null;
+    await expect(mgtPeople).shadowDom.to.be.accessible();
+  });
+
+  it('has required scopes', () => {
+    expect(MgtPeople.requiredScopes).to.have.members([
+      'user.readbasic.all',
+      'user.read.all',
+      'user.read',
+      'people.read',
+      'presence.read.all',
+      'presence.read',
+      'contacts.read'
+    ]);
+  });
+});

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

@@ -13,13 +13,18 @@ import { getPeople, getPeopleFromResource } from '../../graph/graph.people';
 import { getUsersPresenceByPeople } from '../../graph/graph.presence';
 import { findGroupMembers, getUsersForPeopleQueries, getUsersForUserIds } from '../../graph/graph.user';
 import { IDynamicPerson } from '../../graph/types';
-import { Providers, ProviderState, MgtTemplatedTaskComponent, mgtHtml } from '@microsoft/mgt-element';
+import {
+  Providers,
+  ProviderState,
+  MgtTemplatedTaskComponent,
+  registerComponent,
+  mgtHtml
+} from '@microsoft/mgt-element';
 import '../../styles/style-helper';
 import { type PersonCardInteraction, personCardConverter } from './../PersonCardInteraction';
 
 import { styles } from './mgt-people-css';
 import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person';
-import { registerComponent } from '@microsoft/mgt-element';
 
 /**
  * web component to display a group of people or contacts by using their photos or initials.
@@ -249,6 +254,19 @@ export class MgtPeople extends MgtTemplatedTaskComponent {
     return this.renderTemplate('default', { people: this.people, max: this.showMax }) || this.renderPeople();
   };
 
+  protected updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    super.updated(changedProperties);
+    this.checkPeopleListAndFireEvent();
+  }
+
+  private checkPeopleListAndFireEvent(): void {
+    const peopleList = this.shadowRoot?.querySelector('.people-list');
+
+    if (peopleList?.childElementCount > 0) {
+      this.fireCustomEvent('people-rendered');
+    }
+  }
+
   /**
    * Render the loading state.
    *
@@ -280,7 +298,7 @@ export class MgtPeople extends MgtTemplatedTaskComponent {
           maxPeople,
           p => (p.id ? p.id : p.displayName),
           p => html`
-            <li tabindex="-1" class="people-person">
+            <li class="people-person">
               ${this.renderPerson(p)}
             </li>
           `
@@ -306,7 +324,7 @@ export class MgtPeople extends MgtTemplatedTaskComponent {
         people: this.people
       }) ||
       html`
-        <li tabindex="-1" 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>
       `
     );
   }
@@ -320,22 +338,33 @@ export class MgtPeople extends MgtTemplatedTaskComponent {
     const peopleContainer: HTMLElement = this.shadowRoot.querySelector('.people-list');
     let person: HTMLElement;
     const peopleElements: HTMLCollection = peopleContainer?.children;
+    const keyName = event.key;
     // Default all tabindex values in li nodes to -1
     for (const element of peopleElements) {
       const el: HTMLElement = element as HTMLElement;
-      el.setAttribute('tabindex', '-1');
+      el.removeAttribute('tabindex');
+      person = el?.querySelector('mgt-person');
+      person = person?.shadowRoot.querySelector('.person-root');
+      person?.removeAttribute('tabindex');
       el.blur();
     }
+    if (event.target === peopleContainer && (keyName === 'Tab' || keyName === 'Escape')) {
+      this._arrowKeyLocation = -1;
+      peopleContainer?.blur();
+    }
 
-    const childElementCount = peopleContainer.childElementCount;
-    const keyName = event.key;
+    let childElementCount = peopleContainer?.childElementCount;
+    let overflow = peopleContainer?.querySelector('.overflow');
+    if (overflow) {
+      // account for overflow
+      overflow = overflow as HTMLElement;
+      overflow.removeAttribute('tabindex');
+      childElementCount--;
+    }
     if (keyName === 'ArrowRight') {
       this._arrowKeyLocation = (this._arrowKeyLocation + 1 + childElementCount) % childElementCount;
     } else if (keyName === 'ArrowLeft') {
       this._arrowKeyLocation = (this._arrowKeyLocation - 1 + childElementCount) % childElementCount;
-    } else if (keyName === 'Tab' || keyName === 'Escape') {
-      this._arrowKeyLocation = -1;
-      peopleContainer.blur();
     } else if (['Enter', 'space', ' '].includes(keyName)) {
       if (this.personCardInteraction !== 'none') {
         const personEl = peopleElements[this._arrowKeyLocation] as HTMLElement;
@@ -348,8 +377,10 @@ export class MgtPeople extends MgtTemplatedTaskComponent {
 
     if (this._arrowKeyLocation > -1) {
       person = peopleElements[this._arrowKeyLocation] as HTMLElement;
-      person.setAttribute('tabindex', '1');
+      person.setAttribute('tabindex', '0');
       person.focus();
+      person = person.querySelector('.people-person');
+      person?.shadowRoot.querySelector('.person-root').setAttribute('tabindex', '0');
     }
   };
 
@@ -377,7 +408,6 @@ export class MgtPeople extends MgtTemplatedTaskComponent {
       // query the image from the graph
       mgtHtml`
         <mgt-person
-          class="people-person"
           .personDetails=${person}
           .fetchImage=${true}
           .avatarSize=${avatarSize}

stories/components/people/people.html.stories.js

@@ -23,3 +23,13 @@ export const RTL = () => html`
     <mgt-people show-max="5"></mgt-people>
   </body>
 `;
+
+export const Events = () => html`
+<mgt-people people-queries="Megan Bowen"></mgt-people>
+<script>
+  const login = document.querySelector('mgt-people');
+  login.addEventListener('people-rendered', (e) => {
+    console.log("People rendered");
+  })
+</script>
+`;

yarn.lock

@@ -5393,6 +5393,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@open-wc/testing-helpers@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@open-wc/testing-helpers@npm:3.0.1"
+  dependencies:
+    "@open-wc/scoped-elements": "npm:^3.0.2"
+    lit: "npm:^2.0.0 || ^3.0.0"
+    lit-html: "npm:^2.0.0 || ^3.0.0"
+  checksum: 10/8fc42574b26796c34df7628fdbef93479d0f57be87bcfdaea521200ad97faa135145a0ad17a155e16c336303de46fa28318e3320f9d0c200a63d0c26618bf33c
+  languageName: node
+  linkType: hard
+
 "@open-wc/testing-helpers@npm:^1.8.12":
   version: 1.8.12
   resolution: "@open-wc/testing-helpers@npm:1.8.12"
@@ -21077,7 +21088,7 @@ __metadata:
     "@esm-bundle/chai": "npm:^4.3.4-fix.0"
     "@microsoft/eslint-config-msgraph": "npm:^3.0.3"
     "@open-wc/testing": "npm:^4.0.0"
-    "@open-wc/testing-helpers": "npm:^3.0.0"
+    "@open-wc/testing-helpers": "npm:3.0.1"
     "@rollup/plugin-babel": "npm:^6.0.4"
     "@rollup/plugin-commonjs": "npm:^25.0.7"
     "@rollup/plugin-json": "npm:^6.1.0"