@rainbow-oh/yee-c 0.8.0 → 0.8.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 InsureMO
+Copyright (c) 2026 insureMO
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@rainbow-oh/yee-c.svg)](https://www.npmjs.com/package/@rainbow-oh/yee-c) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
 
-65+ foundational React UI components for building modern enterprise applications. Part of the [Yee](https://github.com/InsureMO/oh-yee) component library.
+65+ foundational React UI components for building modern enterprise applications. Part of the [Yee](https://github.com/insureMO/oh-yee) component library.
 
 ## Features
 
@@ -24,7 +24,16 @@ Requires `react >= 18` and `react-dom >= 18` as peer dependencies.
 ## Usage
 
 ```tsx
-import { Button, Form, Input, Table, Card, Select, Dialog, message } from '@rainbow-oh/yee-c';
+import {
+  Button,
+  Form,
+  Input,
+  Table,
+  Card,
+  Select,
+  Dialog,
+  message,
+} from '@rainbow-oh/yee-c';
 ```
 
 Import styles:
@@ -54,10 +63,16 @@ function UserForm() {
     <>
       {messageHolder}
       <Form form={form} onFinish={handleSubmit}>
-        <Form.Field label="Name" name="name" rules={[{ required: true, message: 'Please enter name' }]}>
+        <Form.Field
+          label="Name"
+          name="name"
+          rules={[{ required: true, message: 'Please enter name' }]}
+        >
           <Input />
         </Form.Field>
-        <Button type="primary" htmlType="submit">Submit</Button>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
       </Form>
     </>
   );
@@ -98,31 +113,31 @@ ConfigProvider, Portal
 
 20+ utility hooks for common React patterns:
 
-| Hook | Description |
-|---|---|
-| `useDebounceFunction` | Debounced function execution |
-| `useDebounceValue` | Debounced state value |
-| `useDeepCompareEffect` | Effect with deep comparison |
-| `useDeepCompareMemo` | Memo with deep comparison |
-| `useMergedState` | Controlled/uncontrolled state |
-| `useLatest` | Always-current ref value |
-| `useMount` | Mount lifecycle hook |
-| `useUpdateEffect` | Skip-first-run effect |
-| `useResizeObserver` | Element resize observation |
-| `useElementSize` | Element dimensions tracking |
-| `useEvent` | Stable event handler |
-| `useFocusManage` | Focus management |
-| `useKeyControl` | Keyboard control |
-| `useVirtualForm` | Virtual scrolling for forms |
+| Hook                   | Description                   |
+| ---------------------- | ----------------------------- |
+| `useDebounceFunction`  | Debounced function execution  |
+| `useDebounceValue`     | Debounced state value         |
+| `useDeepCompareEffect` | Effect with deep comparison   |
+| `useDeepCompareMemo`   | Memo with deep comparison     |
+| `useMergedState`       | Controlled/uncontrolled state |
+| `useLatest`            | Always-current ref value      |
+| `useMount`             | Mount lifecycle hook          |
+| `useUpdateEffect`      | Skip-first-run effect         |
+| `useResizeObserver`    | Element resize observation    |
+| `useElementSize`       | Element dimensions tracking   |
+| `useEvent`             | Stable event handler          |
+| `useFocusManage`       | Focus management              |
+| `useKeyControl`        | Keyboard control              |
+| `useVirtualForm`       | Virtual scrolling for forms   |
 
 ## Theming
 
 Use built-in color themes by importing the corresponding CSS file:
 
 ```tsx
-import '@rainbow-oh/yee-c/variables.css';   // Base variables
-import '@rainbow-oh/yee-c/color.blue.css';  // Blue theme
-import '@rainbow-oh/yee-c/color.dark.css';  // Dark theme
+import '@rainbow-oh/yee-c/variables.css'; // Base variables
+import '@rainbow-oh/yee-c/color.blue.css'; // Blue theme
+import '@rainbow-oh/yee-c/color.dark.css'; // Dark theme
 ```
 
 Available themes: `blue`, `crimson`, `dark`, `green`, `jam`, `navy`, `peach`, `pine`, `pitaya`, `pumpkin`, `ruby`.
@@ -145,8 +160,8 @@ pnpm lint
 
 ## Contributing
 
-See the root [Contributing Guide](https://github.com/InsureMO/oh-yee/blob/main/CONTRIBUTING.md).
+See the root [Contributing Guide](https://github.com/insureMO/oh-yee/blob/main/CONTRIBUTING.md).
 
 ## License
 
-[MIT](./LICENSE) © [InsureMO](https://github.com/InsureMO)
+[MIT](./LICENSE) © [insureMO](https://github.com/insureMO)

package/dist/cjs/Card/card.js

@@ -140,10 +140,10 @@ var Card = (baseprops) => {
         ),
         style: styles == null ? void 0 : styles.expandIcon,
         "aria-expanded": mergedExpanded,
+        "aria-label": mergedExpanded ? "Collapse content" : "Expand content",
         icon: icon ? icon : /* @__PURE__ */ import_react2.default.createElement(
           import_lucide_react.ChevronUp,
           {
-            "aria-label": "expanded",
             strokeWidth: 1.5,
             size: 16,
             style: {
@@ -187,7 +187,8 @@ var Card = (baseprops) => {
         onClick: headerClickable ? handleExpand : void 0,
         onKeyDown: handleKeyDown,
         tabIndex: headerClickable ? 0 : void 0,
-        role: headerClickable ? "button" : void 0
+        role: headerClickable ? "button" : void 0,
+        "aria-expanded": headerClickable ? mergedExpanded : void 0
       },
       iconPosition === "left" ? renderExpandIcon() : null,
       title ? /* @__PURE__ */ import_react2.default.createElement(
@@ -208,7 +209,10 @@ var Card = (baseprops) => {
         style: __spreadProps(__spreadValues({}, styles == null ? void 0 : styles.content), { overflow: "hidden" }),
         animate: mergedExpanded ? { height: "auto" } : { height: 0 },
         exit: { height: 0, display: "none" },
-        transition: { duration: animationDuration }
+        transition: { duration: animationDuration },
+        role: "region",
+        "aria-labelledby": title ? headerId : void 0,
+        "aria-hidden": !mergedExpanded
       },
       children
     )

package/dist/cjs/Carousel/carousel-item.js

@@ -38,18 +38,23 @@ var import_carousel = require("./carousel");
 var CarouselItem = (props) => {
   const { style, className, children, index } = props;
   const { prefixCls, current } = import_react.default.useContext(import_carousel.CarouselCtx);
+  const isActive = index === current - 1;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_clsx.default)(
         `${prefixCls}-item`,
         {
-          [`${prefixCls}-item-active`]: index === current - 1
+          [`${prefixCls}-item-active`]: isActive
         },
         className
       ),
       "data-index": index,
-      style
+      style,
+      role: "tabpanel",
+      "aria-roledescription": "slide",
+      "aria-label": `Slide ${(index != null ? index : 0) + 1}`,
+      "aria-hidden": !isActive
     },
     children
   );

package/dist/cjs/Carousel/carousel.js

@@ -211,6 +211,9 @@ var Carousel = import_react.default.forwardRef(
         { [`${prefixCls}-arrows-visible`]: showArrow },
         className
       ),
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-live": autoplay ? "off" : "polite",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave
     });
@@ -233,7 +236,16 @@ var Carousel = import_react.default.forwardRef(
             classNames == null ? void 0 : classNames.prev
           ),
           style: styles == null ? void 0 : styles.prev,
-          onClick: prev
+          onClick: prev,
+          role: "button",
+          "aria-label": "Previous slide",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              prev();
+            }
+          }
         },
         direction === "vertical" ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, null) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronLeft, null)
       ), /* @__PURE__ */ import_react.default.createElement(
@@ -247,7 +259,16 @@ var Carousel = import_react.default.forwardRef(
             classNames == null ? void 0 : classNames.next
           ),
           style: styles == null ? void 0 : styles.next,
-          onClick: next
+          onClick: next,
+          role: "button",
+          "aria-label": "Next slide",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              next();
+            }
+          }
         },
         direction === "vertical" ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, null) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, null)
       ));
@@ -262,15 +283,21 @@ var Carousel = import_react.default.forwardRef(
             [`${prefixCls}-bar-${dotPosition}`],
             classNames == null ? void 0 : classNames.dot
           ),
-          style: styles == null ? void 0 : styles.dot
+          style: styles == null ? void 0 : styles.dot,
+          role: "tablist",
+          "aria-label": "Slide controls"
         },
         new Array(import_react.default.Children.count(children)).fill(0).map((i, index) => {
+          const isActive = current === index + 1 || current === 0 && index === count - 1;
           return /* @__PURE__ */ import_react.default.createElement(
             "li",
             {
               className: (0, import_clsx.default)({
-                active: current === index + 1 || current === 0 && index === count
+                active: isActive
               }),
+              role: "tab",
+              "aria-selected": isActive,
+              "aria-label": `Slide ${index + 1}`,
               tabIndex: 0,
               onClick: () => handleIndicator(index + 1, "click"),
               onKeyDown: (e) => {

package/dist/cjs/Cascader/cascader.js

@@ -409,7 +409,7 @@ var Cascader = (baseprops) => {
     );
   };
   const renderPopup = () => {
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(prefixCls) }, isFilter ? /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(prefixCls), role: "group", "aria-label": "Cascader options" }, isFilter ? /* @__PURE__ */ import_react.default.createElement(
       import_search_list.default,
       {
         prefixCls,

package/dist/cjs/Cascader/column.js

@@ -53,7 +53,7 @@ var import_react = __toESM(require("react"));
 var import_node = __toESM(require("./node"));
 var Column = (props) => {
   const { prefixCls, data, index } = props;
-  return /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-menu`, role: "menu" }, Array.isArray(data) && data.map((item, idx) => {
+  return /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-menu`, role: "listbox", "aria-label": `Level ${index + 1} options` }, Array.isArray(data) && data.map((item, idx) => {
     return /* @__PURE__ */ import_react.default.createElement(
       import_node.default,
       __spreadProps(__spreadValues({}, item), {

package/dist/cjs/Cascader/node.js

@@ -41,7 +41,7 @@ var import_isEqual = __toESM(require("../utils/isEqual"));
 var import_cascader = require("./cascader");
 var import_utils = require("./utils");
 var Node = (props) => {
-  var _a;
+  var _a, _b, _c;
   const { uid, value, disabled, label, $source, isLeaf, path, level } = props;
   const {
     prefixCls,
@@ -120,14 +120,26 @@ var Node = (props) => {
     {
       className: clsName,
       onMouseEnter: handleMouseEnter,
-      onClick: (e) => handleClick(false, e)
+      onClick: (e) => handleClick(false, e),
+      role: "option",
+      "aria-disabled": disabled || void 0,
+      "aria-selected": checked || ((_b = expandedPath[level]) == null ? void 0 : _b.key) === uid,
+      "aria-expanded": isParent ? ((_c = expandedPath[level]) == null ? void 0 : _c.key) === uid : void 0,
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick(false, e);
+        }
+      }
     },
     multiple && /* @__PURE__ */ import_react.default.createElement(
       import_Checkbox.default,
       {
         checked: isParent ? checkedAll : checked,
         onChange: isParent ? () => handleClick(true) : void 0,
-        indeterminate
+        indeterminate,
+        "aria-label": `Select ${typeof label === "string" ? label : String(label)}`
       }
     ),
     /* @__PURE__ */ import_react.default.createElement(
@@ -140,7 +152,7 @@ var Node = (props) => {
       },
       label
     ),
-    load === 1 ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { size: "small" }) : isLeaf === false ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { size: 20 }) : null
+    load === 1 ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { size: "small", "aria-label": "Loading" }) : isLeaf === false ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { size: 20, "aria-hidden": "true" }) : null
   );
 };
 var node_default = (0, import_react.memo)(Node);

package/dist/cjs/Cascader/search-list.js

@@ -45,8 +45,8 @@ var renderHighlightText = (matches) => {
 };
 var SearchList = (props) => {
   const { prefixCls, items, onClick } = props;
-  return /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-filter-menu` }, items.length ? items.map((item) => {
-    var _a;
+  return /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-filter-menu`, role: "listbox", "aria-label": "Search results" }, items.length ? items.map((item) => {
+    var _a, _b;
     const title = ((_a = item.data.$source) == null ? void 0 : _a.title) || item.data.labelPath.join(" / ");
     return /* @__PURE__ */ import_react.default.createElement(
       "li",
@@ -54,10 +54,19 @@ var SearchList = (props) => {
         className: `${prefixCls}-filter-menu-item`,
         title: typeof title === "string" ? title : String(title),
         onClick: () => onClick(item.data),
-        key: item.data.uid
+        key: item.data.uid,
+        role: "option",
+        "aria-disabled": ((_b = item.data.$source) == null ? void 0 : _b.disabled) || void 0,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick(item.data);
+          }
+        }
       },
       renderHighlightText(item.matches)
     );
-  }) : /* @__PURE__ */ import_react.default.createElement("p", null, "No result"));
+  }) : /* @__PURE__ */ import_react.default.createElement("li", { role: "option", "aria-disabled": "true" }, "No result"));
 };
 var search_list_default = import_react.default.memo(SearchList);

package/dist/cjs/Checkbox/checkbox-group.js

@@ -100,7 +100,7 @@ var CheckboxGroup = (baseprops) => {
     setMergedValue(newValue);
     onChange == null ? void 0 : onChange(newValue);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: cls, style }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: cls, style, role: "group", "aria-disabled": disabled || void 0 }, /* @__PURE__ */ import_react.default.createElement(
     CheckboxGroupCtx.Provider,
     {
       value: { name, buttonStyle, onChange: handleChange }

package/dist/cjs/Checkbox/checkbox.js

@@ -119,7 +119,8 @@ var Checkbox = (baseprops) => {
         },
         className
       ),
-      style
+      style,
+      "aria-disabled": disabled || void 0
     },
     /* @__PURE__ */ import_react.default.createElement(
       "span",
@@ -139,14 +140,16 @@ var Checkbox = (baseprops) => {
           value,
           disabled,
           checked: mergedChecked,
-          onChange: handleChange
+          onChange: handleChange,
+          "aria-checked": indeterminate ? "mixed" : mergedChecked
         })
       ),
       /* @__PURE__ */ import_react.default.createElement(
         "span",
         {
           className: (0, import_clsx.default)(`${prefixCls}-inner`, classNames == null ? void 0 : classNames.inner),
-          style: styles == null ? void 0 : styles.inner
+          style: styles == null ? void 0 : styles.inner,
+          "aria-hidden": "true"
         }
       )
     ),

package/dist/cjs/Collapse/panel.js

@@ -41,6 +41,9 @@ var import_collapse = require("./collapse");
 var Panel = (props) => {
   const { children, title, id, className, style, extra, classNames, styles } = props;
   const { prefixCls, activeKey, onExpand } = (0, import_react2.useContext)(import_collapse.CollapseContext);
+  const panelId = (0, import_react2.useId)();
+  const headerId = `${panelId}-header`;
+  const contentId = `${panelId}-content`;
   const expanded = activeKey.includes(id);
   const itemClassName = (0, import_clsx.default)(
     `${prefixCls}-item`,
@@ -55,7 +58,9 @@ var Panel = (props) => {
       className: (0, import_clsx.default)(`${prefixCls}-header`, classNames == null ? void 0 : classNames.header),
       role: "button",
       style: styles == null ? void 0 : styles.header,
+      id: headerId,
       "aria-expanded": expanded,
+      "aria-controls": contentId,
       "aria-disabled": "false",
       tabIndex: 0,
       onClick: () => onExpand(id),
@@ -72,7 +77,8 @@ var Panel = (props) => {
         className: (0, import_clsx.default)(`${prefixCls}-expand-icon`, classNames == null ? void 0 : classNames.expandIcon),
         style: styles == null ? void 0 : styles.expandIcon,
         animate: { rotate: expanded ? 90 : 0 },
-        transition: { duration: 0.15 }
+        transition: { duration: 0.15 },
+        "aria-hidden": "true"
       },
       /* @__PURE__ */ import_react2.default.createElement(import_Button.default, { icon: /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronRight, { size: 16 }), type: "text" })
     ),
@@ -99,6 +105,9 @@ var Panel = (props) => {
     {
       className: (0, import_clsx.default)(`${prefixCls}-content`, classNames == null ? void 0 : classNames.content),
       style: styles == null ? void 0 : styles.content,
+      id: contentId,
+      role: "region",
+      "aria-labelledby": headerId,
       initial: { height: 0, opacity: 0 },
       animate: { height: "auto", opacity: 1 },
       exit: { height: 0, opacity: 0 },

package/dist/cjs/Dialog/dialog.js

@@ -80,7 +80,6 @@ var ANIMATION_DURATION = 0.2;
 var CLOSE_ICON_SIZE = 16;
 var CLOSE_ICON_STROKE_WIDTH = 1.5;
 var Dialog = (baseprops) => {
-  var _b;
   const { dialog } = (0, import_react2.useContext)(import_Config_Provider.GlobalContext);
   const props = (0, import_mergeContextToProps.default)(baseprops, dialog);
   const { locale } = (0, import_locale.useLocale)();
@@ -137,7 +136,17 @@ var Dialog = (baseprops) => {
     "onConfirm"
   ]);
   const [delayOpen, setDelayOpen] = (0, import_react2.useState)(open);
+  const [contentElement, setContentElement] = (0, import_react2.useState)(
+    null
+  );
   const contentRef = (0, import_react2.useRef)(null);
+  const setContentRef = (0, import_react2.useCallback)((element) => {
+    contentRef.current = element;
+    setContentElement(element);
+  }, []);
+  const dialogId = (0, import_react2.useId)();
+  const titleId = `${dialogId}-title`;
+  const bodyId = `${dialogId}-body`;
   (0, import_react2.useEffect)(() => {
     var _a2;
     if (open && draggable && openResetLocation) {
@@ -149,14 +158,14 @@ var Dialog = (baseprops) => {
     element: contentRef,
     bounds: dragLimitInWindow ? () => document.body : void 0
   });
-  (0, import_useLockFocus.default)((_b = contentRef == null ? void 0 : contentRef.current) != null ? _b : null, delayOpen);
+  (0, import_useLockFocus.default)(contentElement, delayOpen);
   (0, import_useEsc.default)({
     enabled: keyboard,
     onEsc: () => {
       onCancel == null ? void 0 : onCancel();
     }
   });
-  (0, import_useFocusManage.default)(contentRef.current, delayOpen);
+  (0, import_useFocusManage.default)(contentElement, open);
   const cls = (0, import_clsx.default)(prefixCls, {
     [`${prefixCls}-open`]: delayOpen,
     [`${prefixCls}-fullscreen`]: fullscreen
@@ -208,7 +217,8 @@ var Dialog = (baseprops) => {
       "div",
       {
         className: (0, import_clsx.default)(`${prefixCls}-mask`, classNames == null ? void 0 : classNames.mask),
-        style: styles == null ? void 0 : styles.mask
+        style: styles == null ? void 0 : styles.mask,
+        "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ import_react2.default.createElement(
@@ -224,7 +234,11 @@ var Dialog = (baseprops) => {
           style: __spreadValues({ width: fullscreen ? "100%" : width }, styles == null ? void 0 : styles.content),
           tabIndex: 0,
           onClick: (e) => e.stopPropagation(),
-          ref: contentRef
+          ref: setContentRef,
+          role: "dialog",
+          "aria-modal": showMask ? true : void 0,
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-describedby": bodyId
         },
         closable ? /* @__PURE__ */ import_react2.default.createElement(
           import_Button.default,
@@ -248,13 +262,14 @@ var Dialog = (baseprops) => {
             className: (0, import_clsx.default)(`${prefixCls}-header`, classNames == null ? void 0 : classNames.header),
             style: styles == null ? void 0 : styles.header
           },
-          /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-title` }, title)
+          /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-title`, id: titleId }, title)
         ) : null,
         /* @__PURE__ */ import_react2.default.createElement(
           "div",
           {
             className: (0, import_clsx.default)(`${prefixCls}-body`, classNames == null ? void 0 : classNames.body),
-            style: styles == null ? void 0 : styles.body
+            style: styles == null ? void 0 : styles.body,
+            id: bodyId
           },
           children
         ),

package/dist/cjs/Drawer/drawer.js

@@ -152,6 +152,9 @@ var Drawer = (baseprops) => {
   ]);
   const [delayOpen, setDelayOpen] = (0, import_react2.useState)(open);
   const contentRef = (0, import_react2.useRef)(null);
+  const drawerId = (0, import_react2.useId)();
+  const titleId = `${drawerId}-title`;
+  const bodyId = `${drawerId}-body`;
   (0, import_useLockFocus.default)(contentRef.current, delayOpen);
   (0, import_useEsc.default)({
     enabled: keyboard,
@@ -207,7 +210,7 @@ var Drawer = (baseprops) => {
   };
   const renderNode = () => {
     const { initial, animate, exit } = getAnimate(placement, open);
-    return /* @__PURE__ */ import_react2.default.createElement("div", __spreadProps(__spreadValues({}, rest), { className: cls, style, role: "modal" }), showMask && delayOpen && /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react2.default.createElement("div", __spreadProps(__spreadValues({}, rest), { className: cls, style }), showMask && delayOpen && /* @__PURE__ */ import_react2.default.createElement(
       import_react.motion.div,
       {
         className: (0, import_clsx.default)(`${prefixCls}-mask`, classNames == null ? void 0 : classNames.mask),
@@ -216,7 +219,8 @@ var Drawer = (baseprops) => {
         initial: { opacity: 0 },
         animate: open ? { opacity: 1 } : { opacity: 0 },
         exit: { opacity: 0 },
-        transition: { duration: ANIMATION_DURATION }
+        transition: { duration: ANIMATION_DURATION },
+        "aria-hidden": "true"
       }
     ), /* @__PURE__ */ import_react2.default.createElement(
       import_react.motion.div,
@@ -247,7 +251,11 @@ var Drawer = (baseprops) => {
           className: (0, import_clsx.default)(`${prefixCls}-content`, classNames == null ? void 0 : classNames.content),
           tabIndex: 0,
           style: styles == null ? void 0 : styles.content,
-          ref: contentRef
+          ref: contentRef,
+          role: "dialog",
+          "aria-modal": showMask ? true : void 0,
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-describedby": bodyId
         },
         renderClose(),
         title ? /* @__PURE__ */ import_react2.default.createElement(
@@ -256,13 +264,14 @@ var Drawer = (baseprops) => {
             className: (0, import_clsx.default)(`${prefixCls}-header`, classNames == null ? void 0 : classNames.header),
             style: styles == null ? void 0 : styles.header
           },
-          /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-title`, classNames == null ? void 0 : classNames.title), style: styles == null ? void 0 : styles.title }, title)
+          /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-title`, classNames == null ? void 0 : classNames.title), style: styles == null ? void 0 : styles.title, id: titleId }, title)
         ) : null,
         /* @__PURE__ */ import_react2.default.createElement(
           "div",
           {
             className: (0, import_clsx.default)(`${prefixCls}-body`, classNames == null ? void 0 : classNames.body),
-            style: styles == null ? void 0 : styles.body
+            style: styles == null ? void 0 : styles.body,
+            id: bodyId
           },
           children
         ),

package/dist/cjs/Menu/menu-item.js

@@ -100,7 +100,11 @@ var MenuItem = (props) => {
         ),
         style: __spreadValues({ paddingLeft }, styles == null ? void 0 : styles.item),
         onClick: handleClick,
-        title: isCollapsed && typeof label === "string" ? label : void 0
+        title: isCollapsed && typeof label === "string" ? label : void 0,
+        role: "menuitem",
+        "aria-disabled": disabled || void 0,
+        "aria-current": (selectedKeys == null ? void 0 : selectedKeys.includes(key)) ? "page" : void 0,
+        tabIndex: disabled ? -1 : 0
       },
       iconNode,
       !isCollapsed && /* @__PURE__ */ import_react2.default.createElement(
@@ -167,14 +171,15 @@ var MenuItem = (props) => {
     if (isCollapsed)
       return null;
     if (mode === "vertical" || mode === "horizontal") {
-      return /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-item-switch` }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronRight, { strokeWidth: 2, size: 18 }));
+      return /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-item-switch`, "aria-hidden": "true" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronRight, { strokeWidth: 2, size: 18 }));
     }
     return /* @__PURE__ */ import_react2.default.createElement(
       import_react.motion.span,
       {
         className: `${prefixCls}-item-switch`,
         animate: { rotateX: opened ? 180 : 0 },
-        transition: { duration: 0.15 }
+        transition: { duration: 0.15 },
+        "aria-hidden": "true"
       },
       /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.ChevronDown, { strokeWidth: 2, size: 18 })
     );
@@ -182,7 +187,10 @@ var MenuItem = (props) => {
   const triggerNode = /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
-      role: "submenu",
+      role: "menuitem",
+      "aria-haspopup": "true",
+      "aria-expanded": opened,
+      "aria-disabled": disabled || void 0,
       className: (0, import_clsx.default)(`${prefixCls}-submenu-title`, {
         [`${prefixCls}-submenu-open`]: opened,
         [`${prefixCls}-submenu-selected`]: selectedKeys.includes(key) || selectedKeys.find(
@@ -191,6 +199,7 @@ var MenuItem = (props) => {
       }),
       style: { paddingLeft },
       onClick: handleExpand,
+      tabIndex: disabled ? -1 : 0,
       title: isCollapsed && typeof label === "string" ? label : void 0
     },
     iconNode,
@@ -207,7 +216,7 @@ var MenuItem = (props) => {
   );
   const usePopup = mode === "vertical" || mode === "horizontal" || isCollapsed;
   const placement = mode === "horizontal" && !isCollapsed ? "bottomLeft" : "rightTop";
-  const childNode = /* @__PURE__ */ import_react2.default.createElement("li", { className: cls }, usePopup ? /* @__PURE__ */ import_react2.default.createElement(
+  const childNode = /* @__PURE__ */ import_react2.default.createElement("li", { className: cls, role: "none" }, usePopup ? /* @__PURE__ */ import_react2.default.createElement(
     import_Trigger.default,
     {
       open: openKeys.includes(key),

package/dist/cjs/Menu/menu.js

@@ -63,7 +63,15 @@ var MenuGroup = ({
   item,
   prefixCls,
   renderItems
-}) => /* @__PURE__ */ import_react.default.createElement("li", { className: `${prefixCls}-item-group` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-item-group-title` }, item.label), /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-item-group-list` }, renderItems(item.children)));
+}) => /* @__PURE__ */ import_react.default.createElement("li", { className: `${prefixCls}-item-group`, role: "none" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-item-group-title`, role: "presentation", id: `${prefixCls}-group-${String(item.label)}` }, item.label), /* @__PURE__ */ import_react.default.createElement(
+  "ul",
+  {
+    className: `${prefixCls}-item-group-list`,
+    role: "group",
+    "aria-labelledby": `${prefixCls}-group-${String(item.label)}`
+  },
+  renderItems(item.children)
+));
 var Menu = (props) => {
   const {
     items,
@@ -122,7 +130,7 @@ var Menu = (props) => {
     }
   );
   const rootStyle = root ? __spreadValues({}, style) : {};
-  return /* @__PURE__ */ import_react.default.createElement("ul", __spreadProps(__spreadValues({}, dataAttrs), { className: cls, style: rootStyle, role: "menu" }), /* @__PURE__ */ import_react.default.createElement(MenuCtx.Provider, { value: { level, mode, classNames, styles } }, getChildFromItems(items), level === 0 && footer && /* @__PURE__ */ import_react.default.createElement("li", { className: `${prefixCls}-footer` }, footer)));
+  return /* @__PURE__ */ import_react.default.createElement("ul", __spreadProps(__spreadValues({}, dataAttrs), { className: cls, style: rootStyle, role: root && mode === "horizontal" ? "menubar" : "menu" }), /* @__PURE__ */ import_react.default.createElement(MenuCtx.Provider, { value: { level, mode, classNames, styles } }, getChildFromItems(items), level === 0 && footer && /* @__PURE__ */ import_react.default.createElement("li", { className: `${prefixCls}-footer`, role: "none" }, footer)));
 };
 Menu.displayName = "Menu";
 var menu_default = Menu;