From c22860a7e39a35b38605b88aed637c84ae053d13 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Mon, 4 Nov 2024 18:03:27 +0800
Subject: [PATCH] Menu: support ARIA attributes

---
 src/material/Menu.css |  5 +++++
 src/material/Menu.tsx | 44 +++++++++++++++++++++++++------------------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/material/Menu.css b/src/material/Menu.css
index 5c88653..1837db3 100644
--- a/src/material/Menu.css
+++ b/src/material/Menu.css
@@ -23,6 +23,11 @@
   &.e4 {
     box-shadow: var(--tutu-shadow-e12);
   }
+
+  &>.container {
+    background: var(--tutu-color-surface);
+    display: contents;
+  }
 }
 
 dialog.Menu::backdrop {
diff --git a/src/material/Menu.tsx b/src/material/Menu.tsx
index 916fc76..44628f9 100644
--- a/src/material/Menu.tsx
+++ b/src/material/Menu.tsx
@@ -3,6 +3,7 @@ import { MenuList } from "@suid/material";
 import {
   createEffect,
   createSignal,
+  splitProps,
   type Component,
   type JSX,
   type ParentProps,
@@ -16,11 +17,15 @@ import {
 
 export type Anchor = Pick<DOMRect, "top" | "left" | "right"> & { e?: number };
 
-export type MenuProps = ParentProps<{
-  open?: boolean;
-  onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
-  anchor: () => Anchor;
-}>;
+export type MenuProps = ParentProps<
+  {
+    open?: boolean;
+    onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
+    anchor: () => Anchor;
+
+    id?: string;
+  } & JSX.AriaAttributes
+>;
 
 function px(n?: number) {
   if (n) {
@@ -74,6 +79,7 @@ export function createManagedMenuState() {
 const Menu: Component<MenuProps> = (props) => {
   let root: HTMLDialogElement;
   const windowSize = useWindowSize();
+  const [, rest] = splitProps(props, ["open", "onClose", "anchor"]);
 
   const [anchorPos, setAnchorPos] = createSignal<{
     left?: number;
@@ -83,15 +89,16 @@ const Menu: Component<MenuProps> = (props) => {
 
   if (import.meta.env.DEV) {
     createEffect(() => {
-      switch (anchorPos().e) {
-        case 1:
-        case 2:
-        case 3:
-        case 3:
-          return;
-        default:
-          console.warn('value %s is invalid for param "e"', anchorPos().e);
-      }
+      if (anchorPos().e)
+        switch (anchorPos().e) {
+          case 1:
+          case 2:
+          case 3:
+          case 4:
+            return;
+          default:
+            console.warn('value %s is invalid for param "e"', anchorPos().e);
+        }
     });
   }
 
@@ -202,12 +209,13 @@ const Menu: Component<MenuProps> = (props) => {
         top: px(anchorPos().top),
         /* FIXME: the content may be overflow */
       }}
+      role="presentation"
+      tabIndex={-1}
+      {...rest}
     >
       <div
-        style={{
-          background: "var(--tutu-color-surface)",
-          display: "contents"
-        }}
+        class="container"
+        role="presentation"
       >
         <MenuList>{props.children}</MenuList>
       </div>