fix(a11y): announce expanded/collapsed state of options menu in mgt-planner (#3186)

* announce expanded/collapsed state of options menu

* fix menu item hover

* fix narration

---------

Co-authored-by: Musale Martin <[email protected]>

Author: Mnickii

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

@@ -8,6 +8,7 @@
 @import '../../../styles/shared-styles';
 @import '../../../styles/shared-sass-variables';
 @import '../../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
+@import './mgt-dot-options.theme';
 
 $dot-options-translatey: var(--dot-options-translatey, translateY(32px));
 
@@ -26,8 +27,8 @@ $dot-options-translatey: var(--dot-options-translatey, translateY(32px));
 
   .menu {
     position: absolute;
-    box-shadow: var(--neutral-fill-rest) 0 0 40px 5px;
-    background: var(--neutral-fill-rest);
+    box-shadow: $dot-options-menu-shadow-color 0 0 40px 5px;
+    background: $dot-options-menu-background-color;
     z-index: 1;
     display: none;
     white-space: nowrap;
@@ -43,4 +44,14 @@ $dot-options-translatey: var(--dot-options-translatey, translateY(32px));
       background: inherit;
     }
   }
+
+  fluent-menu > fluent-menu-item {
+    &::part(content) {
+      color: $dot-options-menu-item-color;
+    }
+
+    &:hover {
+      background: $dot-options-menu-item-hover-background-color;
+    }
+  }
 }

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

@@ -0,0 +1,16 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../../styles/shared-styles';
+
+$dot-options-menu-background-color: var(--dot-options-menu-background-color, var(--fill-color));
+$dot-options-menu-shadow-color: var(--dot-options-menu-shadow-color, var(--fill-color));
+$dot-options-menu-item-color: var(--dot-options-menu-item-color, var(--neutral-foreground-hint));
+$dot-options-menu-item-hover-background-color: var(
+  --dot-options-menu-item-hover-background-color,
+  var(--neutral-fill-input-hover)
+);

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

@@ -32,6 +32,11 @@ export const registerMgtDotOptionsComponent = () => {
  * @export MgtDotOptions
  * @class MgtDotOptions
  * @extends {MgtBaseComponent}
+ *
+ * @cssprop --dot-options-menu-background-color - {Color} The color of the background of the menu.
+ * @cssprop --dot-options-menu-shadow-color - {Color} The color of the shadow of the menu.
+ * @cssprop --dot-options-menu-item-color - {Color} The color of the menu items.
+ * @cssprop --dot-options-menu-item-hover-background-color - {Color} The color of the menu items when hovered.
  */
 
 export class MgtDotOptions extends MgtBaseTaskComponent {
@@ -90,10 +95,11 @@ export class MgtDotOptions extends MgtBaseTaskComponent {
       <fluent-button
         appearance="stealth"
         aria-label=${this.strings.dotOptionsTitle}
+        aria-expanded=${this.open}
         @click=${this.onDotClick}
         @keydown=${this.onDotKeydown}
         class="dot-icon">${getSvg(SvgIcon.Dot)}</fluent-button>
-      <fluent-menu class=${classMap({ menu: true, open: this.open })}>
+      <fluent-menu class=${classMap({ menu: true, open: this.open })} aria-expanded=${this.open} aria-label=${this.strings.dotOptionsTitle}>
         ${menuOptions.map(opt => this.getMenuOption(opt, this.options[opt]))}
       </fluent-menu>`;
   };

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

@@ -470,7 +470,7 @@ export const getSvg = (svgIcon: SvgIcon, color?: string) => {
     case SvgIcon.Dot:
       return html`
         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6.25 10C6.25 10.6904 5.69036 11.25 5 11.25C4.30964 11.25 3.75 10.6904 3.75 10C3.75 9.30964 4.30964 8.75 5 8.75C5.69036 8.75 6.25 9.30964 6.25 10ZM11.25 10C11.25 10.6904 10.6904 11.25 10 11.25C9.30964 11.25 8.75 10.6904 8.75 10C8.75 9.30964 9.30964 8.75 10 8.75C10.6904 8.75 11.25 9.30964 11.25 10ZM15 11.25C15.6904 11.25 16.25 10.6904 16.25 10C16.25 9.30964 15.6904 8.75 15 8.75C14.3096 8.75 13.75 9.30964 13.75 10C13.75 10.6904 14.3096 11.25 15 11.25Z" fill="#242424"/>
+          <path d="M6.25 10C6.25 10.6904 5.69036 11.25 5 11.25C4.30964 11.25 3.75 10.6904 3.75 10C3.75 9.30964 4.30964 8.75 5 8.75C5.69036 8.75 6.25 9.30964 6.25 10ZM11.25 10C11.25 10.6904 10.6904 11.25 10 11.25C9.30964 11.25 8.75 10.6904 8.75 10C8.75 9.30964 9.30964 8.75 10 8.75C10.6904 8.75 11.25 9.30964 11.25 10ZM15 11.25C15.6904 11.25 16.25 10.6904 16.25 10C16.25 9.30964 15.6904 8.75 15 8.75C14.3096 8.75 13.75 9.30964 13.75 10C13.75 10.6904 14.3096 11.25 15 11.25Z" fill="currentColor"/>
         </svg>
         `;
 

stories/components/planner/planner.style.stories.js

@@ -102,6 +102,12 @@ export const customCSSProperties = () => html`
 
         --task-new-person-icon-text-color: blue;
         --task-new-person-icon-color: blue;
+
+        /** affects the options menu */
+        --dot-options-menu-background-color: yellow;
+        --dot-options-menu-shadow-color: yellow;
+        --dot-options-menu-item-color: maroon;
+        --dot-options-menu-item-hover-background-color: white;
       }
   </style>
   <mgt-planner class="tasks"></mgt-planner>