From 463687deac80c4cacdfd215c15cab020a222e62f Mon Sep 17 00:00:00 2001 From: Nickii Miaro Date: Mon, 1 Jul 2024 11:23:10 +0300 Subject: [PATCH] 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 --- ...elpers-npm-3.0.1-690f0e1b0d-8fc42574b2.zip | Bin 0 -> 33377 bytes package.json | 2 +- .../components/mgt-people/mgt-people.tests.ts | 39 +++++++++++++ .../src/components/mgt-people/mgt-people.ts | 54 ++++++++++++++---- .../components/people/people.html.stories.js | 10 ++++ yarn.lock | 13 ++++- 6 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 .yarn/cache/@open-wc-testing-helpers-npm-3.0.1-690f0e1b0d-8fc42574b2.zip create mode 100644 packages/mgt-components/src/components/mgt-people/mgt-people.tests.ts diff --git a/.yarn/cache/@open-wc-testing-helpers-npm-3.0.1-690f0e1b0d-8fc42574b2.zip b/.yarn/cache/@open-wc-testing-helpers-npm-3.0.1-690f0e1b0d-8fc42574b2.zip new file mode 100644 index 0000000000000000000000000000000000000000..6124139e3b3217dfcd2481a5542860b5accdc850 GIT binary patch literal 33377 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%0AJS=mOS)l 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 { + registerMgtPeopleComponent(); + Providers.globalProvider = new MockProvider(true); + + it('should render with overflow', async () => { + const mgtPeople = await fixture(html` + + `); + // @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' + ]); + }); +}); diff --git a/packages/mgt-components/src/components/mgt-people/mgt-people.ts b/packages/mgt-components/src/components/mgt-people/mgt-people.ts index 093454ba18..f9a066ec62 100644 --- a/packages/mgt-components/src/components/mgt-people/mgt-people.ts +++ b/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): 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` -
  • +
  • ${this.renderPerson(p)}
  • ` @@ -306,7 +324,7 @@ export class MgtPeople extends MgtTemplatedTaskComponent { people: this.people }) || html` -
  • +${extra}
  • +
  • +${extra}
  • ` ); } @@ -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` html` `; + +export const Events = () => html` + + +`; diff --git a/yarn.lock b/yarn.lock index 7f45718ae8..7b72b0efc5 100644 --- a/yarn.lock +++ b/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"