fix(a11y): add keyboard accessibility in mgt-person line event story

Author: Mnickii

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

@@ -939,15 +939,17 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
       // Render the line1 template
       const template = this.renderTemplate('line1', { person });
       details.push(html`
-           <div class="line1" part="detail-line" @click=${() =>
-             this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${template}</div>
+           <div class="line1" part="detail-line" @click=${() => this.handleLine1Clicked()}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine1Clicked()}
+            role="presentation" aria-label="${line1text}">${template}</div>
          `);
     } else {
       // Render the line1 property value
       if (line1text) {
         details.push(html`
-             <div class="line1" part="detail-line" @click=${() =>
-               this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${line1text}</div>
+             <div class="line1" part="detail-line" @click=${() => this.handleLine1Clicked()}
+               @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine1Clicked()}
+              role="presentation" aria-label="${line1text}">${line1text}</div>
            `);
       }
     }
@@ -959,15 +961,17 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line2 template
         const template = this.renderTemplate('line2', { person });
         details.push(html`
-           <div class="line2" part="detail-line" @click=${() =>
-             this.handleLine2Clicked()} role="presentation" aria-label="${text}">${template}</div>
+           <div class="line2" part="detail-line" @click=${() => this.handleLine2Clicked()}
+             @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine2Clicked()}
+              role="presentation" aria-label="${text}">${template}</div>
          `);
       } else {
         // Render the line2 property value
         if (text) {
           details.push(html`
-             <div class="line2" part="detail-line" @click=${() =>
-               this.handleLine2Clicked()} role="presentation" aria-label="${text}">${text}</div>
+             <div class="line2" part="detail-line" @click=${() => this.handleLine2Clicked()}
+               @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine2Clicked()}
+                role="presentation" aria-label="${text}">${text}</div>
            `);
         }
       }
@@ -980,15 +984,17 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line3 template
         const template = this.renderTemplate('line3', { person });
         details.push(html`
-           <div class="line3" part="detail-line" @click=${() =>
-             this.handleLine3Clicked()} role="presentation" aria-label="${text}">${template}</div>
+           <div class="line3" part="detail-line" @click=${() => this.handleLine3Clicked()}
+             @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine3Clicked()}
+              role="presentation" aria-label="${text}">${template}</div>
          `);
       } else {
         // Render the line3 property value
         if (text) {
           details.push(html`
-             <div class="line3" part="detail-line" @click=${() =>
-               this.handleLine3Clicked()} role="presentation" aria-label="${text}">${text}</div>
+             <div class="line3" part="detail-line" @click=${() => this.handleLine3Clicked()}
+               @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine3Clicked()}
+                role="presentation" aria-label="${text}">${text}</div>
            `);
         }
       }
@@ -1001,15 +1007,17 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line4 template
         const template = this.renderTemplate('line4', { person });
         details.push(html`
-          <div class="line4" part="detail-line" @click=${() =>
-            this.handleLine4Clicked()} role="presentation" aria-label="${text}">${template}</div>
+          <div class="line4" part="detail-line" @click=${() => this.handleLine4Clicked()}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine4Clicked()}
+            role="presentation" aria-label="${text}">${template}</div>
         `);
       } else {
         // Render the line4 property value
         if (text) {
           details.push(html`
-            <div class="line4" part="detail-line" @click=${() =>
-              this.handleLine4Clicked()} role="presentation" aria-label="${text}">${text}</div>
+            <div class="line4" part="detail-line" @click=${() => this.handleLine4Clicked()}
+              @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleLine4Clicked()}
+              role="presentation" aria-label="${text}">${text}</div>
           `);
         }
       }

stories/components/person/person.html.stories.js

@@ -27,11 +27,32 @@ export const person = () => html`
 `;
 
 export const events = () => html`
+  <!-- Check JS tab to see event listeners -->
   <div style="margin-bottom: 10px">Click on each line</div>
   <div class="example">
-    <mgt-person person-query="me" view="fourlines"></mgt-person>
+    <mgt-person person-query="me" view="fourlines">
+      <template data-type="line1">
+        <div tabindex="0">
+          Hello, my name is: {{person.displayName}}
+        </div>
+      </template>
+      <template data-type="line2">
+        <div tabindex="0">
+          ✨ {{person.jobTitle}}
+        </div>
+      </template>
+      <template data-type="line3">
+        <div tabindex="0">
+          👀 {{person.department}}
+        </div>
+      </template>
+      <template data-type="line4">
+        <div tabindex="0">
+          📍{{person.mail}}
+        </div>
+      </template>
+    </mgt-person>
   </div>
-
   <div class="output">no line clicked</div>
 
   <script>