fix: announce more options button on narrator in mgt-tasks

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

@@ -135,17 +135,13 @@ $task-new-dropdown-border-radius: var(--task-new-dropdown-border-radius, calc(va
         border-radius: $task-complete-border-radius;
         background: $task-complete-bg-color;
         padding: $task-complete-padding;
-
-        --dot-options-button-background-color: $task-complete-bg-color;
       }
 
       &.incomplete {
         border: $task-incomplete-border;
         border-radius: $task-complete-border-radius;
         background: $task-incomplete-bg-color;
         padding: $task-incomplete-padding;
-
-        --dot-options-button-background-color: $task-incomplete-bg-color;
       }
 
       .task-details-container {

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

@@ -12,4 +12,5 @@ export const strings = {
   due: 'Due ',
   addTaskDate: 'Add the task date',
   assign: 'Assign'
+``
 };

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

@@ -33,7 +33,7 @@ $dot-options-translatex: var(--dot-options-translatex, translateX(-50px));
   }
 
   .dot-menu {
-    &.open{
+    &.open {
       .menu {
         display: block;
       }
@@ -57,4 +57,10 @@ $dot-options-translatex: var(--dot-options-translatex, translateX(-50px));
       }
     }
   }
+
+  fluent-button {
+    &::part(control) {
+      background: inherit;
+    }
+  }
 }

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

@@ -10,6 +10,7 @@ import { MgtBaseComponent, customElement } from '@microsoft/mgt-element';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { strings } from './strings';
 import { registerFluentComponents } from '../../../utils/FluentComponents';
 import { styles } from './mgt-dot-options-css';
 
@@ -36,6 +37,18 @@ export class MgtDotOptions extends MgtBaseComponent {
   public static get styles() {
     return styles;
   }
+
+  /**
+   * Strings for localization
+   *
+   * @readonly
+   * @protected
+   * @memberof MgtDotOptions
+   */
+  protected get strings() {
+    return strings;
+  }
+
   /**
    * Determines if header menu is rendered or hidden.
    *
@@ -81,6 +94,7 @@ export class MgtDotOptions extends MgtBaseComponent {
     return html`
       <fluent-button
         appearance="stealth"
+        aria-label=${this.strings.dotOptionsTitle}
         @click=${this.onDotClick}
         @keydown=${this.onDotKeydown}
         class="dot-icon">\uE712</fluent-button>

packages/mgt-components/src/components/sub-components/mgt-dot-options/strings.ts

@@ -0,0 +1,9 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+export const strings = {
+  dotOptionsTitle: 'More options'
+};