@rainbow-oh/yee-c 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "yee basic components",
   "keywords": [
     "react",
@@ -10,13 +10,13 @@
     "design-system",
     "yee"
   ],
-  "homepage": "https://github.com/InsureMO/oh-yee/tree/main/packages/yee-c#readme",
+  "homepage": "https://github.com/insureMO/oh-yee/tree/main/packages/yee-c#readme",
   "bugs": {
-    "url": "https://github.com/InsureMO/oh-yee/issues"
+    "url": "https://github.com/insureMO/oh-yee/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/InsureMO/oh-yee.git",
+    "url": "https://github.com/insureMO/oh-yee.git",
     "directory": "packages/yee-c"
   },
   "license": "MIT",
@@ -94,6 +94,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@testing-library/react": "16.3.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -102,6 +103,7 @@
     "eslint": "^8.23.0",
     "father": "^4.1.0",
     "husky": "^8.0.1",
+    "jsdom": "25.0.1",
     "lint-staged": "^13.0.3",
     "prettier": "^3.6.2",
     "prettier-plugin-organize-imports": "^4.3.0",
@@ -109,7 +111,8 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "stylelint": "^14.16.1",
-    "stylelint-order": "^6.0.4"
+    "stylelint-order": "^6.0.4",
+    "vitest": "3.2.6"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -120,7 +123,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "authors": [
-    "InsureMO"
+    "insureMO"
   ],
   "scripts": {
     "build": "node scripts/generate-version.js && rm -rf dist && father build",
@@ -138,6 +141,7 @@
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\" --ignore-pattern \"src/style/color.*.css\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "start": "npm run dev",
+    "test": "vitest run",
     "watch": "father dev"
   }
 }

package/src/Anchor/anchor.tsx

@@ -139,8 +139,8 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
 
     // Scrolled above the first anchor — reset to the top item.
     if (nextActiveKey === undefined) {
-      const first = currentItems.find(
-        (item) => document.getElementById(item.key),
+      const first = currentItems.find((item) =>
+        document.getElementById(item.key),
       );
       nextActiveKey = first?.key;
     }

package/src/Card/card.tsx

@@ -73,12 +73,12 @@ const Card: FC<CardProps> = (baseprops) => {
         )}
         style={styles?.expandIcon}
         aria-expanded={mergedExpanded}
+        aria-label={mergedExpanded ? 'Collapse content' : 'Expand content'}
         icon={
           icon ? (
             icon
           ) : (
             <ChevronUp
-              aria-label="expanded"
               strokeWidth={1.5}
               size={16}
               style={{
@@ -134,6 +134,7 @@ const Card: FC<CardProps> = (baseprops) => {
           onKeyDown={handleKeyDown}
           tabIndex={headerClickable ? 0 : undefined}
           role={headerClickable ? 'button' : undefined}
+          aria-expanded={headerClickable ? mergedExpanded : undefined}
         >
           {iconPosition === 'left' ? renderExpandIcon() : null}
           {title ? (
@@ -154,6 +155,9 @@ const Card: FC<CardProps> = (baseprops) => {
         animate={mergedExpanded ? { height: 'auto' } : { height: 0 }}
         exit={{ height: 0, display: 'none' }}
         transition={{ duration: animationDuration }}
+        role="region"
+        aria-labelledby={title ? headerId : undefined}
+        aria-hidden={!mergedExpanded}
       >
         {children}
       </motion.div>

package/src/Carousel/carousel-item.tsx

@@ -7,17 +7,23 @@ const CarouselItem = (props: CarouselItemProps) => {
   const { style, className, children, index } = props;
   const { prefixCls, current } = React.useContext(CarouselCtx);
 
+  const isActive = index === current - 1;
+
   return (
     <div
       className={clsx(
         `${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 ?? 0) + 1}`}
+      aria-hidden={!isActive}
     >
       {children}
     </div>

package/src/Carousel/carousel.tsx

@@ -173,6 +173,9 @@ const Carousel = React.forwardRef(
         { [`${prefixCls}-arrows-visible`]: showArrow },
         className,
       ),
+      role: 'region' as const,
+      'aria-roledescription': 'carousel',
+      'aria-live': autoplay ? ('off' as const) : ('polite' as const),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
     };
@@ -198,6 +201,15 @@ const Carousel = React.forwardRef(
             )}
             style={styles?.prev}
             onClick={prev}
+            role="button"
+            aria-label="Previous slide"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                prev();
+              }
+            }}
           >
             {direction === 'vertical' ? <ChevronUp /> : <ChevronLeft />}
           </div>
@@ -211,6 +223,15 @@ const Carousel = React.forwardRef(
             )}
             style={styles?.next}
             onClick={next}
+            role="button"
+            aria-label="Next slide"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                next();
+              }
+            }}
           >
             {direction === 'vertical' ? <ChevronDown /> : <ChevronRight />}
           </div>
@@ -228,17 +249,22 @@ const Carousel = React.forwardRef(
             classNames?.dot,
           )}
           style={styles?.dot}
+          role="tablist"
+          aria-label="Slide controls"
         >
           {new Array(React.Children.count(children))
             .fill(0)
             .map((i, index: number) => {
+              const isActive =
+                current === index + 1 || (current === 0 && index === count - 1);
               return (
                 <li
                   className={clsx({
-                    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/src/Cascader/cascader.tsx

@@ -446,7 +446,11 @@ const Cascader = (baseprops: CascaderProps) => {
 
   const renderPopup = () => {
     return (
-      <div className={clsx(prefixCls)}>
+      <div
+        className={clsx(prefixCls)}
+        role="group"
+        aria-label="Cascader options"
+      >
         {isFilter ? (
           <SearchList
             prefixCls={prefixCls}

package/src/Cascader/column.tsx

@@ -11,7 +11,11 @@ export interface ColumnProps {
 const Column = (props: ColumnProps) => {
   const { prefixCls, data, index } = props;
   return (
-    <ul className={`${prefixCls}-menu`} role="menu">
+    <ul
+      className={`${prefixCls}-menu`}
+      role="listbox"
+      aria-label={`Level ${index + 1} options`}
+    >
       {Array.isArray(data) &&
         data.map((item, idx: number) => {
           return (

package/src/Cascader/node.tsx

@@ -107,12 +107,24 @@ const Node = (props: NodeProps) => {
       className={clsName}
       onMouseEnter={handleMouseEnter}
       onClick={(e: React.MouseEvent<HTMLElement>) => handleClick(false, e)}
+      role="option"
+      aria-disabled={disabled || undefined}
+      aria-selected={checked || expandedPath[level]?.key === uid}
+      aria-expanded={isParent ? expandedPath[level]?.key === uid : undefined}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick(false, e as unknown as React.MouseEvent<HTMLElement>);
+        }
+      }}
     >
       {multiple && (
         <Checkbox
           checked={isParent ? checkedAll : checked}
           onChange={isParent ? () => handleClick(true) : undefined}
           indeterminate={indeterminate}
+          aria-label={`Select ${typeof label === 'string' ? label : String(label)}`}
         />
       )}
       <span
@@ -125,9 +137,9 @@ const Node = (props: NodeProps) => {
       </span>
 
       {load === 1 ? (
-        <Spin size="small" />
+        <Spin size="small" aria-label="Loading" />
       ) : isLeaf === false ? (
-        <ChevronRight size={20} />
+        <ChevronRight size={20} aria-hidden="true" />
       ) : null}
     </li>
   );

package/src/Cascader/search-list.tsx

@@ -32,10 +32,15 @@ const SearchList = (props: SearchListProps) => {
   const { prefixCls, items, onClick } = props;
 
   return (
-    <ul className={`${prefixCls}-filter-menu`}>
+    <ul
+      className={`${prefixCls}-filter-menu`}
+      role="listbox"
+      aria-label="Search results"
+    >
       {items.length ? (
         items.map((item) => {
-          const title = item.data.$source?.title || item.data.labelPath.join(' / ');
+          const title =
+            item.data.$source?.title || item.data.labelPath.join(' / ');
 
           return (
             <li
@@ -43,13 +48,24 @@ const SearchList = (props: SearchListProps) => {
               title={typeof title === 'string' ? title : String(title)}
               onClick={() => onClick(item.data)}
               key={item.data.uid}
+              role="option"
+              aria-disabled={item.data.$source?.disabled || undefined}
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onClick(item.data);
+                }
+              }}
             >
               {renderHighlightText(item.matches)}
             </li>
           );
         })
       ) : (
-        <p>{'No result'}</p>
+        <li role="option" aria-disabled="true">
+          {'No result'}
+        </li>
       )}
     </ul>
   );

package/src/Cascader/utils/index.ts

@@ -340,7 +340,8 @@ export const changeToView = (
  * conversions share one collision-safe format.
  * @param val - The path array
  */
-export const formatKey = (val: Array<string | number>): string => pathToUid(val);
+export const formatKey = (val: Array<string | number>): string =>
+  pathToUid(val);
 
 /**
  * Check if a path has the same prefix as another path
@@ -441,11 +442,7 @@ export const flattenOptions = (
       });
       if (hasChild(node, children)) {
         seen.add(node);
-        dfs(
-          node[children] as Array<Record<string, unknown>>,
-          path,
-          labelPath,
-        );
+        dfs(node[children] as Array<Record<string, unknown>>, path, labelPath);
         seen.delete(node);
       }
     });

package/src/Checkbox/checkbox-group.tsx

@@ -63,7 +63,12 @@ const CheckboxGroup = (baseprops: CheckboxGroupProps) => {
   };
 
   return (
-    <div className={cls} style={style}>
+    <div
+      className={cls}
+      style={style}
+      role="group"
+      aria-disabled={disabled || undefined}
+    >
       <CheckboxGroupCtx.Provider
         value={{ name, buttonStyle, onChange: handleChange }}
       >

package/src/Checkbox/checkbox.tsx

@@ -51,6 +51,7 @@ const Checkbox = (baseprops: CheckboxProps) => {
         className,
       )}
       style={style}
+      aria-disabled={disabled || undefined}
     >
       <span
         className={clsx(`${prefixCls}`, {
@@ -68,10 +69,12 @@ const Checkbox = (baseprops: CheckboxProps) => {
           disabled={disabled}
           checked={mergedChecked}
           onChange={handleChange}
+          aria-checked={indeterminate ? 'mixed' : mergedChecked}
         />
         <span
           className={clsx(`${prefixCls}-inner`, classNames?.inner)}
           style={styles?.inner}
+          aria-hidden="true"
         ></span>
       </span>
       {children ? (

package/src/Collapse/panel.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ChevronRight } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
-import React, { useContext } from 'react';
+import React, { useContext, useId } from 'react';
 import Button from '../Button';
 import { CollapseContext } from './collapse';
 import type { PanelProps } from './interface';
@@ -12,6 +12,10 @@ const Panel: React.FC<PanelProps & { id: string | number }> = (props) => {
 
   const { prefixCls, activeKey, onExpand } = useContext(CollapseContext);
 
+  const panelId = useId();
+  const headerId = `${panelId}-header`;
+  const contentId = `${panelId}-content`;
+
   const expanded = activeKey.includes(id);
 
   const itemClassName = clsx(
@@ -28,7 +32,9 @@ const Panel: React.FC<PanelProps & { id: string | number }> = (props) => {
         className={clsx(`${prefixCls}-header`, classNames?.header)}
         role="button"
         style={styles?.header}
+        id={headerId}
         aria-expanded={expanded}
+        aria-controls={contentId}
         aria-disabled="false"
         tabIndex={0}
         onClick={() => onExpand(id)}
@@ -44,6 +50,7 @@ const Panel: React.FC<PanelProps & { id: string | number }> = (props) => {
           style={styles?.expandIcon}
           animate={{ rotate: expanded ? 90 : 0 }}
           transition={{ duration: 0.15 }}
+          aria-hidden="true"
         >
           <Button icon={<ChevronRight size={16} />} type="text" />
         </motion.div>
@@ -69,6 +76,9 @@ const Panel: React.FC<PanelProps & { id: string | number }> = (props) => {
           <motion.div
             className={clsx(`${prefixCls}-content`, classNames?.content)}
             style={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/src/Dialog/dialog.tsx

@@ -1,7 +1,14 @@
 import clsx from 'clsx';
 import { X } from 'lucide-react';
 import { motion } from 'motion/react';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
 import Button from '../Button';
 import { GlobalContext } from '../Config-Provider';
 import useEsc from '../hooks/useEsc';
@@ -55,7 +62,17 @@ const Dialog = (baseprops: DialogProps) => {
   } = props;
 
   const [delayOpen, setDelayOpen] = useState(open);
+  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(
+    null,
+  );
   const contentRef = useRef<HTMLDivElement>(null);
+  const setContentRef = useCallback((element: HTMLDivElement | null) => {
+    contentRef.current = element;
+    setContentElement(element);
+  }, []);
+  const dialogId = useId();
+  const titleId = `${dialogId}-title`;
+  const bodyId = `${dialogId}-body`;
 
   // When open changes and openResetLocation is true, reset position
   useEffect(() => {
@@ -71,7 +88,7 @@ const Dialog = (baseprops: DialogProps) => {
   });
 
   // lock focus in the dialog
-  useLockFocus(contentRef?.current ?? null, delayOpen);
+  useLockFocus(contentElement, delayOpen);
 
   // enable esc to close dialog
   useEsc({
@@ -81,8 +98,8 @@ const Dialog = (baseprops: DialogProps) => {
     },
   });
 
-  // manage focus
-  useFocusManage(contentRef.current as HTMLElement, delayOpen);
+  // manage focus once per open cycle
+  useFocusManage(contentElement, open);
 
   const cls = clsx(prefixCls, {
     [`${prefixCls}-open`]: delayOpen,
@@ -143,6 +160,7 @@ const Dialog = (baseprops: DialogProps) => {
         <div
           className={clsx(`${prefixCls}-mask`, classNames?.mask)}
           style={styles?.mask}
+          aria-hidden="true"
         ></div>
       )}
       <div
@@ -154,7 +172,11 @@ const Dialog = (baseprops: DialogProps) => {
           style={{ width: fullscreen ? '100%' : width, ...styles?.content }}
           tabIndex={0}
           onClick={(e) => e.stopPropagation()}
-          ref={contentRef}
+          ref={setContentRef}
+          role="dialog"
+          aria-modal={showMask ? true : undefined}
+          aria-labelledby={title ? titleId : undefined}
+          aria-describedby={bodyId}
         >
           {closable ? (
             <Button
@@ -175,12 +197,19 @@ const Dialog = (baseprops: DialogProps) => {
               className={clsx(`${prefixCls}-header`, classNames?.header)}
               style={styles?.header}
             >
-              <div className={`${prefixCls}-title`}>{title}</div>
+              {typeof title === 'string' ? (
+                <div className={`${prefixCls}-title`} id={titleId}>
+                  {title}
+                </div>
+              ) : (
+                title
+              )}
             </div>
           ) : null}
           <div
             className={clsx(`${prefixCls}-body`, classNames?.body)}
             style={styles?.body}
+            id={bodyId}
           >
             {children}
           </div>

package/src/Dialog/interface.ts

@@ -54,7 +54,7 @@ export interface DialogProps extends DataAttributeProps {
   /**
    * Title
    */
-  title?: string;
+  title?: string | React.ReactNode;
   /**
    * Cancel button text
    * @default Cancel

package/src/Dialog/style/index.less

@@ -37,7 +37,8 @@
   }
 
   &-title {
-    font-weight: 600;
+    font-size: var(--yee-dialog-title-font-size);
+    font-weight: var(--yee-dialog-title-font-weight);
   }
 
   &-content {

package/src/Drawer/drawer.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { X } from 'lucide-react';
 import { motion } from 'motion/react';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useId, useRef, useState } from 'react';
 import Button from '../Button';
 import { GlobalContext } from '../Config-Provider';
 import Portal from '../Portal';
@@ -81,6 +81,9 @@ const Drawer = (baseprops: DrawerProps) => {
 
   const [delayOpen, setDelayOpen] = useState(open);
   const contentRef = useRef<HTMLDivElement>(null);
+  const drawerId = useId();
+  const titleId = `${drawerId}-title`;
+  const bodyId = `${drawerId}-body`;
 
   useLockFocus(contentRef.current, delayOpen);
 
@@ -149,7 +152,7 @@ const Drawer = (baseprops: DrawerProps) => {
   const renderNode = () => {
     const { initial, animate, exit } = getAnimate(placement, open);
     return (
-      <div {...rest} className={cls} style={style} role="modal">
+      <div {...rest} className={cls} style={style}>
         {showMask && delayOpen && (
           <motion.div
             className={clsx(`${prefixCls}-mask`, classNames?.mask)}
@@ -159,6 +162,7 @@ const Drawer = (baseprops: DrawerProps) => {
             animate={open ? { opacity: 1 } : { opacity: 0 }}
             exit={{ opacity: 0 }}
             transition={{ duration: ANIMATION_DURATION }}
+            aria-hidden="true"
           ></motion.div>
         )}
         <motion.div
@@ -191,6 +195,10 @@ const Drawer = (baseprops: DrawerProps) => {
             tabIndex={0}
             style={styles?.content}
             ref={contentRef}
+            role="dialog"
+            aria-modal={showMask ? true : undefined}
+            aria-labelledby={title ? titleId : undefined}
+            aria-describedby={bodyId}
           >
             {renderClose()}
             {title ? (
@@ -198,12 +206,19 @@ const Drawer = (baseprops: DrawerProps) => {
                 className={clsx(`${prefixCls}-header`, classNames?.header)}
                 style={styles?.header}
               >
-                <div className={clsx(`${prefixCls}-title`, classNames?.title)} style={styles?.title}>{title}</div>
+                <div
+                  className={clsx(`${prefixCls}-title`, classNames?.title)}
+                  style={styles?.title}
+                  id={titleId}
+                >
+                  {title}
+                </div>
               </div>
             ) : null}
             <div
               className={clsx(`${prefixCls}-body`, classNames?.body)}
               style={styles?.body}
+              id={bodyId}
             >
               {children}
             </div>

package/src/Form/Group.tsx

@@ -9,10 +9,10 @@ import React, {
   useRef,
 } from 'react';
 import Grid from '../Grid';
-import { runValidator } from './utils/validate';
 import FieldContext from './FieldContext';
 import FormContext from './FormContext';
 import type { FieldGroupProps, NamePath, ValidateMessage } from './interface';
+import { runValidator } from './utils/validate';
 
 const Group: React.FC<FieldGroupProps> = (props) => {
   const { label, required, rules, cols, children, style, className } = props;
@@ -39,9 +39,7 @@ const Group: React.FC<FieldGroupProps> = (props) => {
   const [, forceValidate] = useReducer((x) => x + 1, 0); // eslint-disable-line @typescript-eslint/no-unused-vars
 
   // Group validation
-  const validate = async (
-    force: boolean,
-  ): Promise<ValidateMessage[]> => {
+  const validate = async (force: boolean): Promise<ValidateMessage[]> => {
     if (!required && (!rules || rules.length === 0)) return [];
 
     // Skip if not touched and not forced validation

package/src/Form/demo/tooltip.tsx

@@ -1,11 +1,4 @@
-import {
-  Button,
-  Form,
-  Grid,
-  Input,
-  Space,
-  TextArea,
-} from '@rainbow-oh/yee-c';
+import { Button, Form, Grid, Input, Space, TextArea } from '@rainbow-oh/yee-c';
 import { Info } from 'lucide-react';
 import React from 'react';
 
@@ -29,9 +22,7 @@ export default () => {
             name="username"
             label="Username"
             tooltip="Used for login. 4-20 characters."
-            rules={[
-              { required: true, message: 'Please input your username!' },
-            ]}
+            rules={[{ required: true, message: 'Please input your username!' }]}
           >
             <Input placeholder="Please input your username" />
           </Form.Field>

package/src/Form/utils/validate.ts

@@ -134,10 +134,7 @@ export async function runValidator(
  * Returns { passed, message? }. Sync rules short-circuit; the custom validator
  * is awaited so async validators are supported.
  */
-async function validate(
-  rule: Rule,
-  value: unknown,
-): Promise<ValidateResult> {
+async function validate(rule: Rule, value: unknown): Promise<ValidateResult> {
   if (rule.required && isEmpty(value)) {
     return { passed: false };
   }