feat(menu): supports basic wai-aria

CHANGELOG.en-US.md

@@ -7,6 +7,7 @@
 - `n-button` supports wai-aria.
 - `n-card` supports wai-aria.
 - `n-switch` supports wai-aria.
+- `n-menu` supports basic wai-aria.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -7,6 +7,7 @@
 - `n-button` 支持 wai-aria
 - `n-card` 支持 wai-aria
 - `n-switch` 支持 wai-aria
+- `n-menu` 部分支持 wai-aria
 
 ### Fixes
 

src/menu/src/Menu.tsx

@@ -335,12 +335,13 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix } = this
+    const { mergedClsPrefix, mode } = this
     return (
       <div
+        role={mode === 'horizontal' ? 'menubar' : 'menu'}
         class={[
           `${mergedClsPrefix}-menu`,
-          `${mergedClsPrefix}-menu--${this.mode}`,
+          `${mergedClsPrefix}-menu--${mode}`,
           this.mergedCollapsed && `${mergedClsPrefix}-menu--collapsed`
         ]}
         style={this.cssVars as CSSProperties}

src/menu/src/MenuOption.tsx

@@ -74,6 +74,7 @@ export default defineComponent({
     const { mergedClsPrefix } = this
     return (
       <div
+        role="menuitem"
         class={[
           `${mergedClsPrefix}-menu-item`,
           {

src/menu/src/MenuOptionContent.tsx

@@ -6,29 +6,14 @@ import { NBaseIcon } from '../../_internal'
 export default defineComponent({
   name: 'MenuOptionContent',
   props: {
-    collapsed: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
+    collapsed: Boolean,
+    disabled: Boolean,
     title: [String, Function],
     icon: Function,
     extra: [String, Function],
-    showArrow: {
-      type: Boolean,
-      default: false
-    },
-    childActive: {
-      type: Boolean,
-      default: false
-    },
-    hover: {
-      type: Boolean,
-      default: false
-    },
+    showArrow: Boolean,
+    childActive: Boolean,
+    hover: Boolean,
     paddingLeft: Number,
     maxIconSize: {
       type: Number,
@@ -66,34 +51,35 @@ export default defineComponent({
     }
   },
   render () {
-    const { clsPrefix: mergedClsPrefix } = this
+    const { clsPrefix } = this
     return (
       <div
         onClick={this.onClick}
+        role="none"
         class={[
-          `${mergedClsPrefix}-menu-item-content`,
+          `${clsPrefix}-menu-item-content`,
           {
-            [`${mergedClsPrefix}-menu-item-content--collapsed`]: this.collapsed,
-            [`${mergedClsPrefix}-menu-item-content--child-active`]: this
-              .childActive,
-            [`${mergedClsPrefix}-menu-item-content--disabled`]: this.disabled,
-            [`${mergedClsPrefix}-menu-item-content--hover`]: this.hover
+            [`${clsPrefix}-menu-item-content--collapsed`]: this.collapsed,
+            [`${clsPrefix}-menu-item-content--child-active`]: this.childActive,
+            [`${clsPrefix}-menu-item-content--disabled`]: this.disabled,
+            [`${clsPrefix}-menu-item-content--hover`]: this.hover
           }
         ]}
         style={this.style}
       >
         {this.icon ? (
           <div
-            class={`${mergedClsPrefix}-menu-item-content__icon`}
+            class={`${clsPrefix}-menu-item-content__icon`}
             style={this.iconStyle}
+            role="none"
           >
             <Render render={this.icon} />
           </div>
         ) : null}
-        <div class={`${mergedClsPrefix}-menu-item-content-header`}>
+        <div class={`${clsPrefix}-menu-item-content-header`} role="none">
           <Render render={this.title} />
           {this.extra ? (
-            <span class={`${mergedClsPrefix}-menu-item-content-header__extra`}>
+            <span class={`${clsPrefix}-menu-item-content-header__extra`}>
               {' '}
               <Render render={this.extra} />
             </span>
@@ -101,8 +87,9 @@ export default defineComponent({
         </div>
         {this.showArrow ? (
           <NBaseIcon
-            class={`${mergedClsPrefix}-menu-item-content__arrow`}
-            clsPrefix={mergedClsPrefix}
+            ariaHidden={true}
+            class={`${clsPrefix}-menu-item-content__arrow`}
+            clsPrefix={clsPrefix}
           >
             {{
               default: () => <ChevronDownFilledIcon />

src/menu/src/MenuOptionGroup.tsx

@@ -23,9 +23,8 @@ export const menuItemGroupProps = {
   }
 } as const
 
-export const menuItemGroupInjectionKey: InjectionKey<MenuOptionGroupInjection> = Symbol(
-  'menu-item-group'
-)
+export const menuItemGroupInjectionKey: InjectionKey<MenuOptionGroupInjection> =
+  Symbol('menu-item-group')
 
 export default defineComponent({
   name: 'MenuOptionGroup',
@@ -42,7 +41,7 @@ export default defineComponent({
       const { value: mergedClsPrefix } = mergedClsPrefixRef
       const paddingLeft = MenuChild.paddingLeft.value
       return (
-        <div class={`${mergedClsPrefix}-menu-item-group`}>
+        <div class={`${mergedClsPrefix}-menu-item-group`} role="group">
           <span
             class={`${mergedClsPrefix}-menu-item-group-title`}
             style={

src/menu/src/Submenu.tsx

@@ -38,9 +38,8 @@ export const submenuProps = {
   onClick: Function as PropType<() => void>
 } as const
 
-export const submenuInjectionKey: InjectionKey<SubmenuInjection> = Symbol(
-  'submenu'
-)
+export const submenuInjectionKey: InjectionKey<SubmenuInjection> =
+  Symbol('submenu')
 
 export default defineComponent({
   name: 'Submenu',
@@ -151,7 +150,7 @@ export default defineComponent({
             default: () => {
               const { tmNodes, collapsed } = this
               return !collapsed ? (
-                <div class={`${mergedClsPrefix}-submenu-children`}>
+                <div class={`${mergedClsPrefix}-submenu-children`} role="menu">
                   {tmNodes.map((item) => itemRenderer(item))}
                 </div>
               ) : null
@@ -178,7 +177,11 @@ export default defineComponent({
       >
         {{
           default: () => (
-            <div class={`${mergedClsPrefix}-submenu`}>
+            <div
+              class={`${mergedClsPrefix}-submenu`}
+              role="menuitem"
+              aria-expanded={!this.collapsed}
+            >
               {createSubmenuItem()}
               {this.isHorizontal ? null : createSubmenuChildren()}
             </div>
@@ -186,7 +189,11 @@ export default defineComponent({
         }}
       </NDropdown>
     ) : (
-      <div class={`${mergedClsPrefix}-submenu`}>
+      <div
+        class={`${mergedClsPrefix}-submenu`}
+        role="menuitem"
+        aria-expanded={!this.collapsed}
+      >
         {createSubmenuItem()}
         {createSubmenuChildren()}
       </div>