fix: voice over for person in list (#2206)

Conditionally removes tabindex attribute allowing voice over to see inside the html for mgt-person when nested inside an html element with the role menuitem

Author: gavinbarron

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>
       `;

stories/components/person/person.properties.js

@@ -364,4 +364,26 @@ export const moreExamples = () => html`
       line2-property="officeLocation"
     ></mgt-person>
   </div>
+
+
+  <div>
+    <div>Lists of people</div>
+    <ul role="menu">
+      <li role="menuitem" data-is-focusable="true" class="ui-list__item" tabindex="0">
+        <mgt-person
+          person-query="me"
+          view="twoLines"
+          line2-property="jobTitle"
+        ></mgt-person>
+      </li>
+      <li role="menuitem" data-is-focusable="true" class="ui-list__item" tabindex="-1">
+        <mgt-person
+          user-id="2804bc07-1e1f-4938-9085-ce6d756a32d2"
+          view="twoLines"
+          line2-property="jobTitle"
+        ></mgt-person>
+      </li>
+    </ul>
+  </div>
+
 `;