@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/Tabs/Tabs.js

@@ -26,14 +26,15 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { debounce, isMini, throttle, useEventCallback } from "@bifrostui/utils";
-import clsx from "clsx";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { debounce, isMini, throttle, useEventCallback } from "@bifrostui/utils";
+import scrollLeftTo from "./utils/scroll";
 import Tab from "./Tab";
 import { TabsContextProvider } from "./TabsContext";
-import bound from "./utils/bound";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
+const duration = 300;
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
   const tabsRef = useRef(null);
@@ -46,27 +47,41 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
+  const getActiveTabElement = () => {
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
+      return;
+    const activeIndex = tabs.findIndex((item) => item.index === value);
+    if (tabs.length) {
+      return activeIndex > -1 ? tabsEl.childNodes[activeIndex + 1] : void 0;
+    }
+    return [...tabsEl.childNodes].find((child) => {
+      var _a2, _b;
+      if (isMini) {
+        return [...(_b = (_a2 = child == null ? void 0 : child.classList) == null ? void 0 : _a2.tokenList) != null ? _b : []].includes(
+          "bui-tab-miniapp-active"
+        );
+      }
+      return [...child.classList].includes("bui-tab-active");
+    });
+  };
+  const scrollIntoView = () => {
+    const tabsEl = tabsRef.current;
+    const activeTab = getActiveTabElement();
+    if (!tabsEl || !activeTab) {
+      return;
+    }
+    const to = activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2;
+    scrollLeftTo(tabsEl, to, duration);
+  };
   const animate = useEventCallback(() => {
-    const container = tabsRef.current;
-    if (!container)
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
       return;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === value);
     const activeLine = activeLineRef.current;
     if (!activeLine)
       return;
-    let activeTab;
-    if (tabs.length) {
-      activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
-    } else {
-      activeTab = [...container.childNodes].find((child) => {
-        if (isMini) {
-          return [...child.classList.tokenList].includes(
-            "bui-tab-miniapp-active"
-          );
-        }
-        return [...child.classList].includes("bui-tab-active");
-      });
-    }
+    const activeTab = getActiveTabElement();
     let activeTabLeft = 0;
     let activeTabWidth = 0;
     let containerWidth = 0;
@@ -76,8 +91,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (activeTab) {
       activeTabLeft = activeTab.offsetLeft;
       activeTabWidth = activeTab.offsetWidth;
-      containerWidth = container.offsetWidth;
-      containerScrollWidth = container.scrollWidth;
+      containerWidth = tabsEl.offsetWidth;
+      containerScrollWidth = tabsEl.scrollWidth;
       activeLineWidth = activeLine.offsetWidth;
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
@@ -88,24 +103,22 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0 || !activeTab)
       return;
-    const nextScrollLeft = bound(
-      activeTabLeft - (containerWidth - activeTabWidth) / 2,
-      0,
-      containerScrollWidth - containerWidth
-    );
-    if (tabsRef.current) {
-      tabsRef.current.scrollLeft = nextScrollLeft;
+    if (!isMini) {
+      scrollIntoView();
     }
   });
   const updateMask = useMemo(
     () => throttle(
       () => {
-        const container = tabsRef.current;
-        if (!container)
+        const tabsEl = tabsRef.current;
+        if (!tabsEl)
           return;
-        const scrollLeft = container == null ? void 0 : container.scrollLeft;
+        const scrollLeft = tabsEl == null ? void 0 : tabsEl.scrollLeft;
         const showLeftMask = scrollLeft > 0;
-        const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+        const rightRange = Math.abs(
+          tabsEl.scrollWidth - (scrollLeft + tabsEl.offsetWidth)
+        );
+        const showRightMask = rightRange > 1;
         setMaskData({
           leftMaskOpacity: showLeftMask ? 1 : 0,
           rightMaskOpacity: showRightMask ? 1 : 0
@@ -123,6 +136,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     animate();
   }, [value, tabs.length, React.Children.toArray(children).length]);
   useEffect(() => {
+    updateMask();
     const handleResize = debounce(() => {
       animate();
       updateMask();
@@ -132,30 +146,22 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  useEffect(() => {
-    updateMask();
-  }, []);
   const handleClick = (e, item) => {
     const { index, disabled = false } = item;
-    if (disabled)
-      return;
-    if (index === void 0 || index === null) {
+    if (disabled || [void 0, null].includes(index))
       return;
-    }
     if (index !== value) {
       onChange == null ? void 0 : onChange(e, { index });
     }
   };
-  const providerValue = useMemo(() => {
-    return { value, triggerChange: handleClick };
-  }, [value, children, handleClick]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
     "div",
     {
       className: clsx(`${prefixCls}-mask`, `${prefixCls}-mask-left`),
       style: {
         opacity: maskData.leftMaskOpacity
-      }
+      },
+      "aria-hidden": "true"
     }
   ), /* @__PURE__ */ React.createElement(
     "div",
@@ -163,31 +169,48 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       className: clsx(`${prefixCls}-mask`, `${prefixCls}-mask-right`),
       style: {
         opacity: maskData.rightMaskOpacity
-      }
+      },
+      "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-tabs`, ref: tabsRef, onScroll: updateMask }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: activeLineRef,
-      className: clsx(`${prefixCls}-indicator`, {
-        "bui-indicator-invisible": isMini || !indicatorData.hasActiveTab
-      }),
-      style: {
-        transition: "transform 0.3s ease-in-out",
-        transform: `translate(${indicatorData.x}px, 0px)`
-      }
-    }
-  ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {
-    return /* @__PURE__ */ React.createElement(
-      Tab,
+      className: `${prefixCls}-tabs`,
+      ref: tabsRef,
+      onScroll: updateMask,
+      role: "tablist",
+      "aria-orientation": "horizontal"
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
       {
-        key: item.index,
-        index: item == null ? void 0 : item.index,
-        disabled: item == null ? void 0 : item.disabled
-      },
-      item.title
-    );
-  }), children)));
+        ref: activeLineRef,
+        className: clsx(`${prefixCls}-indicator`, {
+          "bui-indicator-invisible": isMini || !indicatorData.hasActiveTab
+        }),
+        style: {
+          transition: "transform 0.3s ease-in-out",
+          transform: `translate(${indicatorData.x}px, 0px)`
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(TabsContextProvider, { value: { value, triggerChange: handleClick } }, !!tabs.length && tabs.map((item) => {
+      return /* @__PURE__ */ React.createElement(
+        Tab,
+        {
+          key: item.index,
+          index: item == null ? void 0 : item.index,
+          disabled: item == null ? void 0 : item.disabled,
+          role: "tab",
+          "aria-selected": value === item.index,
+          "aria-disabled": item == null ? void 0 : item.disabled,
+          tabIndex: (item == null ? void 0 : item.disabled) ? -1 : 0
+        },
+        item.title
+      );
+    }), children)
+  ));
 });
 Tabs.displayName = "BuiTabs";
 var Tabs_default = Tabs;

package/es/Tabs/Tabs.types.d.ts

@@ -1,5 +1,5 @@
-import { OverrideProps } from '@bifrostui/types';
 import React, { SyntheticEvent } from 'react';
+import { OverrideProps } from '@bifrostui/types';
 export interface TabHeaderItem {
     title: React.ReactNode;
     index: string;

package/es/Tabs/TabsContext.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { TabChangeEvent, TabsProps } from './Tabs.types';
-declare const TabsContext: React.Context<Omit<TabsProps<"div", {}>, "onChange"> & {
+type TabsContextValueType = Omit<TabsProps, 'onChange'> & {
     triggerChange: TabChangeEvent;
-}>;
-export declare const TabsContextProvider: React.Provider<Omit<TabsProps<"div", {}>, "onChange"> & {
-    triggerChange: TabChangeEvent;
-}>;
+};
+declare const TabsContext: React.Context<TabsContextValueType>;
+export declare const TabsContextProvider: React.Provider<TabsContextValueType>;
 export default TabsContext;

package/es/Tabs/TabsContext.js

@@ -1,5 +1,7 @@
 import React from "react";
-const TabsContext = React.createContext(void 0);
+const TabsContext = React.createContext(
+  void 0
+);
 if (process.env.NODE_ENV !== "production") {
   TabsContext.displayName = "BuiTabsContext";
 }

package/es/Tabs/index.css

@@ -3,7 +3,7 @@ page,
 xhs-page {
   --bui-tabs-height: 39px;
   --bui-tabs-font-weight: var(--bui-font-weight-medium);
-  --bui-tabs-indicator-background: var(--bui-color-primary);
+  --bui-tabs-indicator-bg: var(--bui-color-primary);
   --bui-tabs-indicator-height: 3PX;
   --bui-tabs-indicator-width: 24px;
   --bui-tabs-indicator-border-radius: 3px 3px 0 0;
@@ -42,7 +42,7 @@ xhs-page {
   bottom: var(--bui-tabs-indicator-bottom);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
-  background: var(--bui-tabs-indicator-background);
+  background: var(--bui-tabs-indicator-bg);
   border-radius: var(--bui-tabs-indicator-border-radius);
   box-shadow: var(--bui-tabs-indicator-box-shadow);
 }

package/es/Tabs/utils/scroll.d.ts

@@ -0,0 +1,2 @@
+declare const scrollLeftTo: (scroller: HTMLElement, to: number, duration: number) => void;
+export default scrollLeftTo;

package/es/Tabs/utils/scroll.js

@@ -0,0 +1,36 @@
+const root = window || global;
+let rafId;
+let prev = Date.now();
+const rafPolyfill = (fn) => {
+  const curr = Date.now();
+  const ms = Math.max(0, 16 - (curr - prev));
+  const id = setTimeout(fn, ms);
+  prev = curr + ms;
+  return id;
+};
+const cancelRaf = (id) => {
+  const cancelAnimationFrame = (root == null ? void 0 : root.cancelAnimationFrame) || (root == null ? void 0 : root.clearTimeout) || clearTimeout;
+  cancelAnimationFrame.call(root, id);
+};
+const raf = (fn) => {
+  const requestAnimationFrame = (root == null ? void 0 : root.requestAnimationFrame) || rafPolyfill;
+  return requestAnimationFrame.call(root, fn);
+};
+const scrollLeftTo = (scroller, to, duration) => {
+  cancelRaf(rafId);
+  let count = 0;
+  const from = scroller.scrollLeft;
+  const frames = duration === 0 ? 1 : Math.round(duration / 16);
+  function animate() {
+    scroller.scrollLeft += (to - from) / frames;
+    count += 1;
+    if (count < frames) {
+      rafId = raf(animate);
+    }
+  }
+  animate();
+};
+var scroll_default = scrollLeftTo;
+export {
+  scroll_default as default
+};

package/es/Tag/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * 自定义 Tag 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicTagDemo: () => React.JSX.Element;
+export declare const variantTagDemo: () => React.JSX.Element;
+export declare const ClickableTagDemo: () => React.JSX.Element;
+export declare const customColorTagDemo: () => React.JSX.Element;
+export declare const ariaLabelTagDemo: () => React.JSX.Element;
+export declare const complexTagListDemo: () => React.JSX.Element;
+declare const _default: {
+    basicTagDemo: () => React.JSX.Element;
+    variantTagDemo: () => React.JSX.Element;
+    ClickableTagDemo: () => React.JSX.Element;
+    customColorTagDemo: () => React.JSX.Element;
+    ariaLabelTagDemo: () => React.JSX.Element;
+    complexTagListDemo: () => React.JSX.Element;
+};
+export default _default;

package/es/Tag/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,160 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useState } from "react";
+import Tag from "../../Tag";
+const basicTagDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { color: "primary" }, "\u4E3B\u8981\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "success" }, "\u6210\u529F\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "warning" }, "\u8B66\u544A\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "danger" }, "\u5371\u9669\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "info" }, "\u4FE1\u606F\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "neutral" }, "\u4E2D\u6027\u6807\u7B7E"));
+};
+const variantTagDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { variant: "filled", color: "primary" }, "\u586B\u5145\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { variant: "outlined", color: "success" }, "\u8FB9\u6846\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { variant: "subtle", color: "warning" }, "\u8F7B\u91CF\u6807\u7B7E"));
+};
+const ClickableTagDemo = () => {
+  const [clicked, setClicked] = useState([]);
+  const handleTagClick = (tag) => {
+    setClicked(
+      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+    console.log(`\u70B9\u51FB\u4E86\u6807\u7B7E: ${tag}`);
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      color: "primary",
+      onClick: () => handleTagClick("tag1"),
+      style: {
+        opacity: clicked.includes("tag1") ? 0.6 : 1,
+        margin: "4px"
+      }
+    },
+    "\u53EF\u70B9\u51FB\u6807\u7B7E 1"
+  ), /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      color: "success",
+      onClick: () => handleTagClick("tag2"),
+      style: {
+        opacity: clicked.includes("tag2") ? 0.6 : 1,
+        margin: "4px"
+      }
+    },
+    "\u53EF\u70B9\u51FB\u6807\u7B7E 2"
+  ), /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      color: "warning",
+      onClick: () => handleTagClick("tag3"),
+      style: {
+        opacity: clicked.includes("tag3") ? 0.6 : 1,
+        margin: "4px"
+      }
+    },
+    "\u53EF\u70B9\u51FB\u6807\u7B7E 3"
+  ), clicked.length > 0 && /* @__PURE__ */ React.createElement("p", null, "\u5DF2\u70B9\u51FB\u7684\u6807\u7B7E: ", clicked.join(", ")));
+};
+const customColorTagDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#ff6b6b", variant: "filled" }, "\u81EA\u5B9A\u4E49\u7EA2\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#4ecdc4", variant: "outlined" }, "\u81EA\u5B9A\u4E49\u9752\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#45b7d1", variant: "subtle" }, "\u81EA\u5B9A\u4E49\u84DD\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "rgb(255, 193, 7)", variant: "filled" }, "RGB \u9EC4\u8272"));
+};
+const ariaLabelTagDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      color: "primary",
+      onClick: () => {
+        console.log("\u5220\u9664\u7528\u6237");
+      },
+      "aria-label": "\u5220\u9664\u7528\u6237\u6807\u7B7E"
+    },
+    "\u7528\u6237"
+  ), /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      color: "success",
+      onClick: () => {
+        console.log("\u7F16\u8F91\u9879\u76EE");
+      },
+      "aria-label": "\u7F16\u8F91\u9879\u76EE\u6807\u7B7E"
+    },
+    "\u9879\u76EE"
+  ), /* @__PURE__ */ React.createElement(Tag, { color: "info", "aria-label": "\u53EA\u8BFB\u7684\u8BBE\u7F6E\u4FE1\u606F" }, "\u8BBE\u7F6E"));
+};
+const ComplexTagListDemo = () => {
+  const [tags, setTags] = useState([
+    { id: 1, name: "React", active: true, color: "primary" },
+    { id: 2, name: "Vue", active: false, color: "success" },
+    { id: 3, name: "Angular", active: false, color: "warning" },
+    { id: 4, name: "Svelte", active: true, color: "info" },
+    { id: 5, name: "TypeScript", active: true, color: "danger" }
+  ]);
+  const toggleTag = (id) => {
+    setTags(
+      (prevTags) => prevTags.map(
+        (tag) => tag.id === id ? __spreadProps(__spreadValues({}, tag), { active: !tag.active }) : tag
+      )
+    );
+  };
+  const activeTags = tags.filter((tag) => tag.active);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h4", null, "\u6280\u672F\u6807\u7B7E\u9009\u62E9\u5668"), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "10px" } }, tags.map((tag) => /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      key: tag.id,
+      color: tag.color,
+      variant: tag.active ? "filled" : "outlined",
+      onClick: () => toggleTag(tag.id),
+      "aria-label": `${tag.active ? "\u53D6\u6D88\u9009\u62E9" : "\u9009\u62E9"} ${tag.name} \u6280\u672F\u6807\u7B7E`,
+      style: {
+        margin: "2px",
+        cursor: "pointer",
+        opacity: tag.active ? 1 : 0.7
+      }
+    },
+    tag.name
+  ))), /* @__PURE__ */ React.createElement("p", null, "\u5DF2\u9009\u62E9\u7684\u6280\u672F:", " ", activeTags.length > 0 ? activeTags.map((tag) => tag.name).join(", ") : "\u65E0"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setTags(
+          (prevTags) => prevTags.map((tag) => __spreadProps(__spreadValues({}, tag), { active: false }))
+        );
+      }
+    },
+    "\u6E05\u9664\u6240\u6709\u9009\u62E9"
+  ));
+};
+const complexTagListDemo = () => {
+  return /* @__PURE__ */ React.createElement(ComplexTagListDemo, null);
+};
+var A11yDemos_default = {
+  basicTagDemo,
+  variantTagDemo,
+  ClickableTagDemo,
+  customColorTagDemo,
+  ariaLabelTagDemo,
+  complexTagListDemo
+};
+export {
+  ClickableTagDemo,
+  ariaLabelTagDemo,
+  basicTagDemo,
+  complexTagListDemo,
+  customColorTagDemo,
+  A11yDemos_default as default,
+  variantTagDemo
+};

package/es/TextArea/TextArea.js

@@ -31,12 +31,14 @@ var __objRest = (source, exclude) => {
 };
 import { isMini, useForkRef, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useLocaleText } from "../locales";
 import "./index.css";
 const prefixCls = "bui-textarea";
 const DEFAULT_ROWS = 2;
 const TextArea = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
+    const textareaText = useLocaleText("textarea");
     const _a = props, {
       className,
       value,
@@ -47,10 +49,19 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       placeholder,
       disabled,
       rows = DEFAULT_ROWS,
-      maxLength,
+      maxLength: maxLength,
       autoSize = false,
-      autoFocus = false,
-      showCount = false,
+      autoFocus: autoFocus = false,
+      showCount: showCount = false,
+      // 是否展示字数统计
+      // 无障碍属性
+      "aria-label": ariaLabel = textareaText.labelName,
+      "aria-hidden": ariaHidden,
+      "aria-details": ariaDetails,
+      "aria-required": ariaRequired,
+      "aria-readonly": ariaReadonly,
+      "aria-rowindex": ariaRowindex,
+      "aria-colcount": ariaColcount,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -62,10 +73,20 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       "placeholder",
       "disabled",
       "rows",
+      // 默认行数
       "maxLength",
       "autoSize",
+      // 是否自适应高度
       "autoFocus",
+      // 是否自动聚焦
       "showCount",
+      "aria-label",
+      "aria-hidden",
+      "aria-details",
+      "aria-required",
+      "aria-readonly",
+      "aria-rowindex",
+      "aria-colcount",
       "onChange"
     ]);
     const [textAreaValue, triggerChange] = useValue({
@@ -80,7 +101,7 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       if (autoFocus && internalRef.current) {
         internalRef.current.focus();
       }
-    }, [internalRef]);
+    }, [autoFocus]);
     const handleAutoHeight = (height) => {
       if (typeof autoSize === "object") {
         const { maxHeight, minHeight } = autoSize;
@@ -110,8 +131,7 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
       const textArea = internalRef.current;
       const { height, lineCount } = (e == null ? void 0 : e.detail) || {};
       const line = lineCount <= 1 ? rows : lineCount;
-      let textAreaHeight = line * (height / lineCount + 4);
-      textAreaHeight = handleAutoHeight(textAreaHeight);
+      const textAreaHeight = handleAutoHeight(line * (height / lineCount));
       if (!initLock.current && !autoSize && rows === DEFAULT_ROWS) {
         textArea.style.height = `${textAreaHeight}px`;
         initLock.current = true;
@@ -121,12 +141,29 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
         textArea.style.height = `${textAreaHeight}px`;
       }
     };
+    const [ariaDescription, setAriaDescription] = useState("");
     let nativeProps = {
-      [isMini ? "maxlength" : "maxLength"]: maxLength != null ? maxLength : -1
+      [isMini ? "maxlength" : "maxLength"]: maxLength != null ? maxLength : -1,
+      "aria-description": ariaDescription
     };
+    const accessibilityProps = {
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      "aria-details": ariaDetails,
+      "aria-required": ariaRequired,
+      "aria-readonly": ariaReadonly,
+      "aria-rowindex": ariaRowindex,
+      "aria-colcount": ariaColcount
+    };
+    Object.keys(accessibilityProps).forEach((key) => {
+      if (accessibilityProps[key] !== void 0) {
+        nativeProps[key] = accessibilityProps[key];
+      }
+    });
     if (isMini) {
       nativeProps = __spreadProps(__spreadValues({}, nativeProps), {
         onLineChange: handleLineChange,
+        // 小程序行高变化事件
         placeholderClass: "bui-mini-placeholder",
         autoFocus,
         focus: autoFocus
@@ -162,6 +199,12 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
           },
           onInput: (e) => {
             var _a2;
+            if (showCount) {
+              const remaining = maxLength - e.target.value.length;
+              setAriaDescription(
+                `${textareaText.remaining} ${remaining} ${textareaText.characters}`
+              );
+            }
             if (isMini) {
               triggerChange(e, e.target.value);
             }

package/es/TextArea/TextArea.types.d.ts

@@ -64,6 +64,34 @@ export type TextAreaProps<D extends React.ElementType = 'div', P = {}> = Overrid
         onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>, data: {
             value: string;
         }) => void;
+        /**
+         * 无障碍功能：ARIA标签
+         */
+        'aria-label'?: string;
+        /**
+         * 无障碍功能：是否隐藏元素
+         */
+        'aria-hidden'?: boolean;
+        /**
+         * 无障碍功能：元素在无障碍树中的细节程度
+         */
+        'aria-details'?: string;
+        /**
+         * 无障碍功能：当前元素是否为必填
+         */
+        'aria-required'?: boolean;
+        /**
+         * 无障碍功能：当前元素是否为只读
+         */
+        'aria-readonly'?: boolean;
+        /**
+         * 无障碍功能：多行文本框的第一行索引
+         */
+        'aria-rowindex'?: number;
+        /**
+         * 无障碍功能：多行文本框的列数
+         */
+        'aria-colcount'?: number;
     };
     defaultComponent: D;
 }, D>;