fix: make tasks header navigable with the keyboard.

gulpfile.js

@@ -11,12 +11,12 @@ scssFileHeader = `
 // ANY CHANGES WILL BE LOST DURING BUILD
 // MODIFY THE .SCSS FILE INSTEAD
 
-import { css } from 'lit';
+import { css, CSSResult } from 'lit';
 /**
  * exports lit-element css
  * @export styles
  */
-export const styles = [
+export const styles: CSSResult[] = [
   css\``;
 
 scssFileFooter = '`];';

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

@@ -71,11 +71,20 @@ $task-new-dropdown-border-radius: var(--task-new-dropdown-border-radius, calc(va
 
     .title {
       justify-content: left;
+      display: flex;
+      align-items: center;
 
       .shimmer {
         width: 80px;
         height: 20px;
       }
+
+      svg {
+        margin-top: 3px;
+        padding: 0px 4px;
+        width: 16px;
+        height: 16px;
+      }
     }
 
     .new-task-button {

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

@@ -21,7 +21,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { getMe } from '../../graph/graph.user';
-import { debounce, getShortDateString } from '../../utils/Utils';
+import { getShortDateString } from '../../utils/Utils';
 import { MgtPeoplePicker } from '../mgt-people-picker/mgt-people-picker';
 import { MgtPeople } from '../mgt-people/mgt-people';
 import '../mgt-person/mgt-person';
@@ -901,11 +901,13 @@ export class MgtTasks extends MgtTemplatedComponent {
           this._currentFolder = null;
         };
       }
-      const groupSelect = mgtHtml`
-        <mgt-arrow-options class="arrow-options" .options="${groupOptions}" .value="${currentGroup.title}"></mgt-arrow-options>
-      `;
+      const groupSelect: TemplateResult = mgtHtml`
+        <mgt-arrow-options
+          class="arrow-options"
+          .options="${groupOptions}"
+          .value="${currentGroup.title}"></mgt-arrow-options>`;
 
-      const divider = !this._currentGroup ? null : html`<fluent-divider></fluent-divider>`;
+      const separator = !this._currentGroup ? null : getSvg(SvgIcon.ChevronRight);
 
       const currentFolder = this._folders.find(d => d.id === this._currentFolder) || {
         name: this.res.BUCKETS_SELF_ASSIGNED
@@ -932,8 +934,8 @@ export class MgtTasks extends MgtTemplatedComponent {
           `;
 
       return html`
-        <div class="title">
-          ${groupSelect} ${divider} ${!this._currentGroup ? null : folderSelect}
+        <div class="Title">
+          ${groupSelect} ${separator} ${!this._currentGroup ? null : folderSelect}
         </div>
         ${addButton}
       `;

packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss

@@ -14,65 +14,33 @@ $arrow-options-left: var(--arrow-options-left, 0);
   position: relative;
   font-family: $font-family;
 
-  .arrow-icon {
-    font-family: $font-icon;
-    margin: 0 0 0 20px;
-    user-select: none;
-
-  }
-
   .header {
-    cursor: pointer;
+    text-decoration: none;
+    color: var(--accent-fill-rest);
+
+    &:hover{
+      color: var(--accent-fill-hover);
+    }
 
-    &:hover {
-      color: var(--theme-primary-color);
+    &:active{
+      color: var(--accent-fill-active);
+    }
+
+    &:focus{
+      color: var(--accent-fill-focus);
     }
   }
 
-  .menu {
+  .menu{
     position: absolute;
-    left: var(--arrow-options-left, 0);
-    box-shadow: set-var(box-shadow__color, $theme-default, $common) 0 0 40px 5px;
-    background: set-var(background-color, $theme-default, $common);
+    left: $arrow-options-left;
     z-index: 1;
     display: none;
-    color: set-var(color, $theme-default, $common);
-    white-space: nowrap;
-
-    &.open {
+
+    &.open{
       display: block;
+      width: max-content;
     }
   }
 
-  .menu-option {
-    padding: 20px;
-    cursor: pointer;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: stretch;
-    justify-items: stretch;
-
-    &:first {
-      padding: 12px 20px 20px;
-    }
-
-    &:hover {
-      background-color: set-var(background-color--hover, $theme-default, $common);
-    }
-
-    &:active {
-      background-color: set-var(background-color--active, $theme-default, $common);
-    }
-  }
-
-  .menu-option-check {
-    font-family: $font-icon;
-    color: rgb(0 0 0 / 0%);
-    margin-right: 10px;
-
-    &.current-value {
-      color: $comm-blue-primary;
-    }
-  }
 }

packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.ts

@@ -10,6 +10,9 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { MgtBaseComponent, customElement } from '@microsoft/mgt-element';
 import { styles } from './mgt-arrow-options-css';
+import { registerFluentComponents } from '../../../utils/FluentComponents';
+import { fluentMenu, fluentMenuItem } from '@fluentui/web-components';
+registerFluentComponents(fluentMenu, fluentMenuItem);
 
 /*
   Ok, the name here deserves a bit of explanation,
@@ -53,20 +56,20 @@ export class MgtArrowOptions extends MgtBaseComponent {
   @property({ type: String }) public value: string;
 
   /**
-   * Menu options to be rendered with an attached MouseEvent handler for expansion of details
+   * Menu options to be rendered with an attached UIEvent handler for expansion of details
    *
    * @type {object}
    * @memberof MgtArrowOptions
    */
-  @property({ type: Object }) public options: { [name: string]: (e: MouseEvent) => any | void };
+  @property({ type: Object }) public options: { [name: string]: (e: UIEvent) => any | void };
 
-  private _clickHandler: (e: MouseEvent) => void | any;
+  private _clickHandler: (e: UIEvent) => void | any;
 
   constructor() {
     super();
     this.value = '';
     this.options = {};
-    this._clickHandler = (e: MouseEvent) => (this.open = false);
+    this._clickHandler = () => (this.open = false);
   }
 
   // eslint-disable-next-line @typescript-eslint/tslint/config
@@ -84,10 +87,10 @@ export class MgtArrowOptions extends MgtBaseComponent {
   /**
    * Handles clicking for header menu, utilizing boolean switch open
    *
-   * @param {MouseEvent} e attaches to Header to open menu
+   * @param {UIEvent} e attaches to Header to open menu
    * @memberof MgtArrowOptions
    */
-  public onHeaderClick = (e: MouseEvent) => {
+  public onHeaderClick = (e: UIEvent) => {
     const keys = Object.keys(this.options);
     if (keys.length > 1) {
       e.preventDefault();
@@ -103,34 +106,35 @@ export class MgtArrowOptions extends MgtBaseComponent {
    */
   public render() {
     return html`
-      <span class="header" @click=${this.onHeaderClick}>
-        <span class="current-value">${this.value}</span>
-      </span>
-      <div class=${classMap({ menu: true, open: this.open, closed: !this.open })}>
-        ${this.getMenuOptions()}
-      </div>
-    `;
+      <a class="Header" @click=${this.onHeaderClick} href="javascript:void">${this.value}</a>
+      <fluent-menu
+        class=${classMap({ menu: true, open: this.open, closed: !this.open })}>
+          ${this.getMenuOptions()}
+      </fluent-menu>`;
   }
 
   private getMenuOptions() {
     const keys = Object.keys(this.options);
-    const funcs = this.options;
 
-    return keys.map(
-      opt => html`
-        <div
-          class="menu-option"
-          @click="${(e: MouseEvent) => {
-            this.open = false;
-            funcs[opt](e);
-          }}"
-        >
-          <span class=${classMap({ 'menu-option-check': true, 'current-value': this.value === opt })}>
-            \uE73E
-          </span>
-          <span class="menu-option-name">${opt}</span>
-        </div>
-      `
-    );
+    return keys.map((opt: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      const clickFn = (e: MouseEvent) => {
+        this.open = false;
+        this.options[opt](e);
+      };
+
+      const keyDownFn = (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          this.open = false;
+          this.options[opt](e);
+        }
+      };
+      return html`
+          <fluent-menu-item
+            @click=${clickFn}
+            @keydown=${keyDownFn}>
+              ${opt}
+          </fluent-menu-item>`;
+    });
   }
 }

packages/mgt-components/src/utils/SvgHelper.ts

@@ -633,8 +633,8 @@ export const getSvg = (svgIcon: SvgIcon, color?: string) => {
 
     case SvgIcon.ChevronRight:
       return html`
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
-          <path d="M8.46967 4.21967C8.17678 4.51256 8.17678 4.98744 8.46967 5.28033L15.1893 12L8.46967 18.7197C8.17678 19.0126 8.17678 19.4874 8.46967 19.7803C8.76256 20.0732 9.23744 20.0732 9.53033 19.7803L16.7803 12.5303C17.0732 12.2374 17.0732 11.7626 16.7803 11.4697L9.53033 4.21967C9.23744 3.92678 8.76256 3.92678 8.46967 4.21967Z" fill="none" />
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8.46967 4.21967C8.17678 4.51256 8.17678 4.98744 8.46967 5.28033L15.1893 12L8.46967 18.7197C8.17678 19.0126 8.17678 19.4874 8.46967 19.7803C8.76256 20.0732 9.23744 20.0732 9.53033 19.7803L16.7803 12.5303C17.0732 12.2374 17.0732 11.7626 16.7803 11.4697L9.53033 4.21967C9.23744 3.92678 8.76256 3.92678 8.46967 4.21967Z" fill="currentColor" />
         </svg>`;
 
     case SvgIcon.Delete: