From 504a7284593fe22bd34858a01f13e1b01901e6c5 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Wed, 29 Nov 2023 15:32:04 -0500
Subject: [PATCH] fixup: ensure menu is labeled

---
 .../context-menu/__tests__/floating-menu.spec.svelte  |  1 +
 .../lib/context-menu/__tests__/floating-menu.spec.ts  | 11 ++++++-----
 .../core/src/lib/context-menu/context-menu.svelte     |  8 ++++++++
 .../core/src/lib/context-menu/floating-menu.svelte    |  7 +++++--
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte b/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte
index 665ef35a..780f9cbd 100644
--- a/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte
+++ b/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.svelte
@@ -8,6 +8,7 @@ const handleChange = (nextIsOpen: boolean) => (isOpen = nextIsOpen);
 
 <FloatingMenu
   {isOpen}
+  label="cool menu"
   onChange={handleChange}
 >
   <span slot="control">
diff --git a/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.ts b/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.ts
index af154f3c..f58d9016 100644
--- a/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.ts
+++ b/packages/core/src/lib/context-menu/__tests__/floating-menu.spec.ts
@@ -14,7 +14,7 @@ describe('<FloatingMenu> component', () => {
   it('should open and close a menu when the control is clicked', async () => {
     render(Subject);
 
-    const control = screen.getByRole('button', { name: /open/iu });
+    const control = screen.getByRole('button', { name: /cool menu/iu });
     let menu = screen.queryByRole('menu');
     let item = screen.queryByRole('menuitem');
 
@@ -41,7 +41,7 @@ describe('<FloatingMenu> component', () => {
   it('should pass aria props to the control', async () => {
     render(Subject);
 
-    const control = screen.getByRole('button', { name: /open/iu });
+    const control = screen.getByRole('button', { name: /cool menu/iu });
 
     expect(control).toHaveAttribute('aria-haspopup', 'menu');
     expect(control).toHaveAttribute('aria-expanded', 'false');
@@ -50,6 +50,7 @@ describe('<FloatingMenu> component', () => {
     const menu = screen.getByRole('menu');
 
     expect(menu).toHaveAttribute('id', expect.any(String));
+    expect(menu).toHaveAccessibleName(/cool menu/iu);
     expect(control).toHaveAttribute('aria-controls', menu.id);
     expect(control).toHaveAttribute('aria-expanded', 'true');
   });
@@ -57,7 +58,7 @@ describe('<FloatingMenu> component', () => {
   it('should close the menu if escape is pressed', async () => {
     render(Subject);
 
-    const control = screen.getByRole('button', { name: /open/iu });
+    const control = screen.getByRole('button', { name: /cool menu/iu });
 
     await user.click(control);
     await user.keyboard('{Escape}');
@@ -69,7 +70,7 @@ describe('<FloatingMenu> component', () => {
   it('should close the menu on click outside', async () => {
     render(Subject);
 
-    const control = screen.getByRole('button', { name: /open/iu });
+    const control = screen.getByRole('button', { name: /cool menu/iu });
     const outside = screen.getByTestId('outside-element');
 
     await user.click(control);
@@ -82,7 +83,7 @@ describe('<FloatingMenu> component', () => {
   it('should pass a close menu handler to the items', async () => {
     render(Subject);
 
-    const control = screen.getByRole('button', { name: /open/iu });
+    const control = screen.getByRole('button', { name: /cool menu/iu });
     await user.click(control);
 
     const item = screen.getByRole('menuitem');
diff --git a/packages/core/src/lib/context-menu/context-menu.svelte b/packages/core/src/lib/context-menu/context-menu.svelte
index 348dea9f..c34b2e2d 100644
--- a/packages/core/src/lib/context-menu/context-menu.svelte
+++ b/packages/core/src/lib/context-menu/context-menu.svelte
@@ -17,6 +17,12 @@ import cx from 'classnames';
 /** ID attribute of the menu element. */
 export let id: string;
 
+/** Accessible label of the menu. */
+export let label: string | undefined = undefined;
+
+/** ID of the element ID that labels the menu. */
+export let labeledBy: string | undefined = undefined;
+
 /** Additional CSS classes to pass to the menu. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -24,6 +30,8 @@ export { extraClasses as cx };
 
 <div
   {id}
+  aria-label={label}
+  aria-labelledby={labeledBy}
   role="menu"
   class={cx(
     'border border-medium bg-white py-1 shadow-sm filter-none',
diff --git a/packages/core/src/lib/context-menu/floating-menu.svelte b/packages/core/src/lib/context-menu/floating-menu.svelte
index 98dafcf0..f404af25 100644
--- a/packages/core/src/lib/context-menu/floating-menu.svelte
+++ b/packages/core/src/lib/context-menu/floating-menu.svelte
@@ -6,14 +6,15 @@ import { floatingStyle, type FloatingMenuPlacement } from './floating-style';
 import ContextMenu from './context-menu.svelte';
 
 export let isOpen: boolean;
+export let label: string | undefined = undefined;
+export let describedBy: string | undefined = undefined;
 export let placement: FloatingMenuPlacement = 'bottom-start';
 export let offset = 0;
 export let buttonCX: cx.Argument = '';
 export let menuCX: cx.Argument = '';
-export let label: string | undefined = undefined;
-export let describedBy: string | undefined = undefined;
 export let onChange: (isOpen: boolean) => unknown;
 
+const buttonID = uniqueId('floating-menu-control');
 const menuID = uniqueId('floating-menu');
 const style = floatingStyle();
 const openMenu = () => onChange(true);
@@ -41,6 +42,7 @@ $: style.register({ controlElement, menuElement, placement, offset });
 <svelte:window on:keydown={isOpen ? handleEscape : undefined} />
 
 <button
+  id={buttonID}
   class={cx(buttonCX)}
   aria-haspopup="menu"
   aria-controls={menuID}
@@ -64,6 +66,7 @@ $: style.register({ controlElement, menuElement, placement, offset });
   >
     <ContextMenu
       id={menuID}
+      labeledBy={buttonID}
       cx={menuCX}
     >
       <slot name="items" />