@rainbow-oh/yee-c 0.7.0 → 0.8.1

package/src/Menu/menu.tsx

@@ -40,9 +40,15 @@ const MenuGroup = ({
   prefixCls: string;
   renderItems: (items: MenuItemType[]) => React.ReactNode[];
 }) => (
-  <li className={`${prefixCls}-item-group`}>
-    <div className={`${prefixCls}-item-group-title`}>{item.label}</div>
-    <ul className={`${prefixCls}-item-group-list`}>
+  <li className={`${prefixCls}-item-group`} role="none">
+    <div className={`${prefixCls}-item-group-title`} role="presentation" id={`${prefixCls}-group-${String(item.label)}`}>
+      {item.label}
+    </div>
+    <ul
+      className={`${prefixCls}-item-group-list`}
+      role="group"
+      aria-labelledby={`${prefixCls}-group-${String(item.label)}`}
+    >
       {renderItems(item.children)}
     </ul>
   </li>
@@ -112,11 +118,11 @@ const Menu = (props: InnerMenuProps) => {
   const rootStyle = root ? { ...style } : {};
 
   return (
-    <ul {...dataAttrs} className={cls} style={rootStyle} role="menu">
+    <ul {...dataAttrs} className={cls} style={rootStyle} role={root && mode === 'horizontal' ? 'menubar' : 'menu'}>
       <MenuCtx.Provider value={{ level, mode, classNames, styles }}>
         {getChildFromItems(items)}
         {level === 0 && footer && (
-          <li className={`${prefixCls}-footer`}>{footer}</li>
+          <li className={`${prefixCls}-footer`} role="none">{footer}</li>
         )}
       </MenuCtx.Provider>
     </ul>

package/src/Pagination/items.tsx

@@ -81,18 +81,19 @@ const Items: React.FC<PaginationItemsProps> = (props) => {
                 }
               }}
               role="button"
+              aria-label="Jump back 7 pages"
               key="turnleft"
             >
               {components?.jumpPrev ?? (
                 <>
-                  <span className={`${prefixCls}-jump-prev-ellipsis`}>
+                  <span className={`${prefixCls}-jump-prev-ellipsis`} aria-hidden="true">
                     <Ellipsis
                       className="ellipsis"
                       size={18}
                       strokeWidth={1.5}
                     />
                   </span>
-                  <span className={`${prefixCls}-jump-prev-icon`}>
+                  <span className={`${prefixCls}-jump-prev-icon`} aria-hidden="true">
                     <ChevronsLeft
                       className="turn"
                       size={18}
@@ -116,18 +117,19 @@ const Items: React.FC<PaginationItemsProps> = (props) => {
                 }
               }}
               role="button"
+              aria-label="Jump forward 7 pages"
               key="turn-right"
             >
               {components?.jumpNext ?? (
                 <>
-                  <span className={`${prefixCls}-jump-next-ellipsis`}>
+                  <span className={`${prefixCls}-jump-next-ellipsis`} aria-hidden="true">
                     <Ellipsis
                       className="ellipsis"
                       size={18}
                       strokeWidth={1.5}
                     />
                   </span>
-                  <span className={`${prefixCls}-jump-next-icon`}>
+                  <span className={`${prefixCls}-jump-next-icon`} aria-hidden="true">
                     <ChevronsRight
                       className="turn"
                       size={18}
@@ -159,6 +161,9 @@ const Items: React.FC<PaginationItemsProps> = (props) => {
                   onChange(number as number);
                 }
               }}
+              role="button"
+              aria-label={`Page ${number}`}
+              aria-current={current === number ? 'page' : undefined}
             >
               {number}
             </li>

package/src/Pagination/pagination.tsx

@@ -179,9 +179,12 @@ const Pagination = React.forwardRef(
               prevClick();
             }
           }}
+          role="button"
+          aria-label="Previous page"
+          aria-disabled={mergedCurrent === 1 || undefined}
           key="prev"
         >
-          {components?.prev ?? <ChevronLeft size={20} strokeWidth={1.5} />}
+          {components?.prev ?? <ChevronLeft size={20} strokeWidth={1.5} aria-hidden="true" />}
         </li>
       );
     };
@@ -204,9 +207,12 @@ const Pagination = React.forwardRef(
               nextClick();
             }
           }}
+          role="button"
+          aria-label="Next page"
+          aria-disabled={mergedCurrent === pageCount || undefined}
           key="next"
         >
-          {components?.next ?? <ChevronRight size={20} strokeWidth={1.5} />}
+          {components?.next ?? <ChevronRight size={20} strokeWidth={1.5} aria-hidden="true" />}
         </li>
       );
     };
@@ -249,13 +255,13 @@ const Pagination = React.forwardRef(
     }
 
     return (
-      <ul {...rest} className={cls} style={style} ref={ref}>
+      <ul {...rest} className={cls} style={style} ref={ref} role="navigation" aria-label="Pagination" aria-disabled={disabled || undefined}>
         {renderTotal()}
         {renderPrevious()}
         {simple ? (
           <li className={`${prefixCls}-simple`}>
             {renderNumber(false)}
-            <span className="split">/</span>
+            <span className="split" aria-hidden="true">/</span>
             <span className="total-page">{pageCount}</span>
           </li>
         ) : (

package/src/Radio/radio-group.tsx

@@ -61,6 +61,8 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
         style={{ ...style, gap: gap }}
         ref={ref}
         role="radiogroup"
+        aria-disabled={disabled || undefined}
+        {...rest}
       >
         <GroupCtx.Provider
           value={{ name, buttonStyle, onChange: handleChange }}
@@ -68,7 +70,6 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
           {options?.map((option, index) => (
             <Radio
               disabled={disabled}
-              {...rest}
               {...option}
               checked={option.value === mergedValue}
               key={option.value || index}

package/src/Radio/radio.tsx

@@ -67,7 +67,12 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     );
 
     return (
-      <label className={cls} style={style} onClick={handleClick}>
+      <label
+        className={cls}
+        style={style}
+        onClick={handleClick}
+        aria-disabled={disabled || undefined}
+      >
         <span
           className={clsx(prefixCls, {
             [`${prefixCls}-disabled`]: disabled,
@@ -83,12 +88,12 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
             checked={mergedChecked}
             disabled={disabled}
             onChange={handleChange}
-            aria-checked={mergedChecked}
           />
           {!buttonStyle && (
             <span
               className={clsx(`${prefixCls}-inner`, classNames?.inner)}
               style={styles?.inner}
+              aria-hidden="true"
             ></span>
           )}
         </span>

package/src/Rate/rate.tsx

@@ -106,6 +106,11 @@ const Rate = React.forwardRef<HTMLUListElement, RateProps>((baseprops, ref) => {
       ref={componentRef}
       role="radiogroup"
       aria-label="Rating"
+      aria-disabled={disabled || undefined}
+      aria-valuemin={0}
+      aria-valuemax={count}
+      aria-valuenow={mergedValue}
+      aria-valuetext={`${mergedValue} out of ${count} stars`}
     >
       {Array(count)
         .fill(0)

package/src/Rate/star.tsx

@@ -45,6 +45,7 @@ const Star: React.FC<StarProps> = (props) => {
           aria-checked={active}
           aria-posinset={index + 1}
           aria-setsize={count}
+          aria-label={`${index + 1} ${index + 1 === 1 ? 'star' : 'stars'}`}
           key={'star-' + index}
         >
           <div
@@ -57,6 +58,7 @@ const Star: React.FC<StarProps> = (props) => {
               }
             }}
             tabIndex={0}
+            aria-label={`${index + 0.5} stars`}
             key={'star-' + index + 'left'}
           >
             {character ? (
@@ -64,7 +66,7 @@ const Star: React.FC<StarProps> = (props) => {
                 {renderCharacter()}
               </span>
             ) : (
-              <StarHalf className={`${prefixCls}-star-half`} />
+              <StarHalf className={`${prefixCls}-star-half`} aria-hidden="true" />
             )}
           </div>
           <div
@@ -77,6 +79,7 @@ const Star: React.FC<StarProps> = (props) => {
               }
             }}
             tabIndex={0}
+            aria-label={`${index + 1} ${index + 1 === 1 ? 'star' : 'stars'}`}
             key={'star-' + index + 'right'}
           >
             {character ? (
@@ -84,7 +87,7 @@ const Star: React.FC<StarProps> = (props) => {
                 {renderCharacter()}
               </span>
             ) : (
-              <StarFull className={`${prefixCls}-star-full`} />
+              <StarFull className={`${prefixCls}-star-full`} aria-hidden="true" />
             )}
           </div>
         </li>
@@ -103,6 +106,7 @@ const Star: React.FC<StarProps> = (props) => {
           aria-checked={active}
           aria-posinset={index + 1}
           aria-setsize={count}
+          aria-label={`${index + 1} ${index + 1 === 1 ? 'star' : 'stars'}`}
           key={'star-' + index}
         >
           {character ? (
@@ -110,9 +114,9 @@ const Star: React.FC<StarProps> = (props) => {
               {renderCharacter()}
             </span>
           ) : active ? (
-            <StarFull className={`${prefixCls}-star-active`} />
+            <StarFull className={`${prefixCls}-star-active`} aria-hidden="true" />
           ) : (
-            <StarFull className={`${prefixCls}-star-inactive`} />
+            <StarFull className={`${prefixCls}-star-inactive`} aria-hidden="true" />
           )}
         </li>
       )}

package/src/Steps/step.tsx

@@ -43,6 +43,15 @@ const Step: React.FC<StepProps> = (props) => {
     status ??
     (index < current ? 'finish' : index === current ? 'process' : 'wait');
 
+  const statusLabel =
+    mergedStatus === 'finish'
+      ? 'completed'
+      : mergedStatus === 'process'
+        ? 'in progress'
+        : mergedStatus === 'error'
+          ? 'error'
+          : 'pending';
+
   const renderIcon = useMemo(() => {
     if (dot) return <span className={`${prefixCls}-item-dot`}></span>;
 
@@ -89,7 +98,7 @@ const Step: React.FC<StepProps> = (props) => {
   return (
     <>
       {type === 'ribbon' && (
-        <div className={`${prefixCls}-item-ribbon-end ${ribbonStatus}`} />
+        <div className={`${prefixCls}-item-ribbon-end ${ribbonStatus}`} aria-hidden="true" />
       )}
       <div
         className={cls}
@@ -97,11 +106,12 @@ const Step: React.FC<StepProps> = (props) => {
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         tabIndex={disabled ? -1 : onChange ? 0 : undefined}
-        role={onChange ? 'button' : undefined}
+        role={onChange ? 'button' : 'listitem'}
         aria-disabled={disabled}
         aria-current={index === current ? 'step' : undefined}
+        aria-label={`Step ${index + 1}${typeof title === 'string' ? `: ${title}` : ''}, ${statusLabel}`}
       >
-        <div className={`${prefixCls}-item-icon`}>{renderIcon}</div>
+        <div className={`${prefixCls}-item-icon`} aria-hidden="true">{renderIcon}</div>
         <div className={`${prefixCls}-item-content`}>
           <div className={`${prefixCls}-item-title`}>
             <span title={typeof title === 'string' ? title : undefined}>
@@ -117,12 +127,12 @@ const Step: React.FC<StepProps> = (props) => {
         </div>
       </div>
       {type === 'navigation' && (
-        <div className={`${prefixCls}-item-navi-arrow`}>
+        <div className={`${prefixCls}-item-navi-arrow`} aria-hidden="true">
           <ChevronRight />
         </div>
       )}
       {type === 'ribbon' && (
-        <div className={`${prefixCls}-item-ribbon-head ${ribbonStatus}`} />
+        <div className={`${prefixCls}-item-ribbon-head ${ribbonStatus}`} aria-hidden="true" />
       )}
     </>
   );

package/src/Steps/steps.tsx

@@ -71,7 +71,7 @@ const Steps = forwardRef<HTMLDivElement, StepsProps>((baseprops, ref) => {
   };
 
   return (
-    <div {...rest} className={cls} style={style} ref={ref}>
+    <div {...rest} className={cls} style={style} ref={ref} role="list" aria-label="Steps">
       <StepsContext.Provider value={contextValue}>
         {renderSteps()}
       </StepsContext.Provider>

package/src/Table/hooks/useColumns.ts

@@ -58,7 +58,7 @@ export default function useColumns({
     const tree = injectSelectionExpand(base, rowSelection, expandable);
     const leaves = flattenLeafColumns(tree);
     const wraped = handleColumns(leaves);
-    const rows = parseHeaderRows(tree);
+    const rows = parseHeaderRows(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
   }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
 

package/src/Table/style/index.less

@@ -49,6 +49,12 @@
           background-color: var(--yee-table-head-cell-split-line-color, #eee);
         }
       }
+
+      &-fixed-left,
+      &-fixed-right {
+        position: sticky;
+        z-index: 1;
+      }
     }
 
     &-cell {
@@ -84,6 +90,16 @@
     &-wrapper {
       overflow: auto;
       width: 100%;
+
+      &-scroll-left @{pls}-cell-fixed-left-last {
+        box-shadow: 6px 0 6px -4px
+          var(--yee-table-fixed-left-after-bs-color);
+      }
+
+      &-scroll-right @{pls}-cell-fixed-right-first {
+        box-shadow: -6px 0 6px -4px
+          var(--yee-table-fixed-right-after-bs-color);
+      }
     }
 
     > table {
@@ -101,10 +117,18 @@
     }
   }
 
+  &-row {
+    background-color: var(--yee-table-row-bg-color);
+  }
+
   &-even-row {
     background-color: var(--yee-table-even-row-bg-color);
   }
 
+  &-odd-row {
+    background-color: var(--yee-table-odd-row-bg-color);
+  }
+
   &-column-sorters {
     display: inline-flex;
     align-items: center;
@@ -137,7 +161,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
-      background-color: inherit;
+      background-color: var(--yee-table-fixed-column-bg-color);
     }
   }
 
@@ -163,17 +187,17 @@
     }
   }
 
-  &-odd-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-odd-row-bg-color);
-    }
-  }
+  // &-odd-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-odd-row-bg-color);
+  //   }
+  // }
 
-  &-even-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-even-row-bg-color);
-    }
-  }
+  // &-even-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-even-row-bg-color);
+  //   }
+  // }
 
   &-footer {
     display: flex;

package/src/Table/table.tsx

@@ -126,6 +126,36 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
 
   // Track previous values to determine what action triggered onChange
   const prevSortersRef = useRef<typeof sorters>({});
+  const contentWrapperRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [horizontalScroll, setHorizontalScroll] = React.useState({
+    left: false,
+    right: false,
+  });
+
+  const updateHorizontalScroll = React.useCallback(() => {
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content) return;
+
+    const scrollContainer =
+      content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
+    const maxScrollLeft =
+      scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    const hasHorizontalScroll = maxScrollLeft > 1;
+    const next = {
+      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
+      right:
+        hasHorizontalScroll &&
+        scrollContainer.scrollLeft < maxScrollLeft - 1,
+    };
+
+    setHorizontalScroll((current) =>
+      current.left === next.left && current.right === next.right
+        ? current
+        : next,
+    );
+  }, []);
 
   // Wrap onFilter to trigger onChange
   const onFilter = React.useCallback(
@@ -173,6 +203,25 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     }
   }, [sorters, current, pageSize, pageData, sortedData, onChange]);
 
+  useEffect(() => {
+    updateHorizontalScroll();
+
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content) return undefined;
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateHorizontalScroll);
+      return () => window.removeEventListener('resize', updateHorizontalScroll);
+    }
+
+    const resizeObserver = new ResizeObserver(updateHorizontalScroll);
+    resizeObserver.observe(wrapper);
+    resizeObserver.observe(content);
+
+    return () => resizeObserver.disconnect();
+  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll?.x]);
+
   const renderHeader = () => {
     return (
       <Header
@@ -259,13 +308,23 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     );
 
     return (
-      <div className={`${prefixCls}-content-wrapper`}>
+      <div
+        ref={contentWrapperRef}
+        className={clsx(`${prefixCls}-content-wrapper`, {
+          [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
+          [`${prefixCls}-content-wrapper-scroll-right`]:
+            horizontalScroll.right,
+        })}
+        onScroll={updateHorizontalScroll}
+      >
         <div
+          ref={contentRef}
           className={clsx(`${prefixCls}-content`, {
             [`${prefixCls}-${size}-size`]: size,
             [`${prefixCls}-fixed-header`]: scroll?.y,
           })}
           style={{ height: scroll?.y, width: scroll?.x }}
+          onScroll={updateHorizontalScroll}
         >
           {table}
         </div>

package/src/Table/tbody/cell.tsx

@@ -61,7 +61,7 @@ const TableCell: React.FC<BodyCellProps> = (props) => {
       {
         [`${prefixCls}-cell-fixed-${fixed}`]: fixed,
         [`${prefixCls}-cell-fixed-${fixed}-first`]: isFixedRightFirst,
-        [`${prefixCls}-fixed-${fixed}-last`]: isFixedLeftLast,
+        [`${prefixCls}-cell-fixed-${fixed}-last`]: isFixedLeftLast,
       },
       className,
     );

package/src/Table/util/header.ts

@@ -32,13 +32,17 @@ export function flattenLeafColumns(
  *
  * - Pass 1 (DFS): place each column into the row matching its depth; a group's
  *   colSpan equals the sum of its children's colSpans.
+ * - Fixed metadata from the resolved leaf columns is reused by leaf cells and
+ *   aggregated for group cells whose descendants share the same fixed side.
  * - Pass 2: leaf cells (no sub-columns) get rowSpan = rowCount - rowIndex so
  *   they stretch down to the last header row; group cells keep rowSpan = 1.
  */
 export function parseHeaderRows(
   rootColumns: WrapedColumnProps[],
+  resolvedLeafColumns: WrapedColumnProps[] = flattenLeafColumns(rootColumns),
 ): HeaderCell[][] {
   const rows: HeaderCell[][] = [];
+  let leafIndex = 0;
 
   const fillRowCells = (
     columns: WrapedColumnProps[],
@@ -46,17 +50,59 @@ export function parseHeaderRows(
   ): number => {
     rows[rowIndex] = rows[rowIndex] || [];
     let colSpanTotal = 0;
-    columns.filter(Boolean).forEach((column) => {
+    columns.filter(Boolean).forEach((sourceColumn) => {
+      let column = sourceColumn;
+      const subColumns = sourceColumn.children as
+        | WrapedColumnProps[]
+        | undefined;
+      const leafStartIndex = leafIndex;
       const cell: HeaderCell = {
         column,
         colSpan: 1,
         rowSpan: 1,
       };
-      const subColumns = column.children as WrapedColumnProps[] | undefined;
+
       if (subColumns && subColumns.length > 0) {
         cell.colSpan = fillRowCells(subColumns, rowIndex + 1);
         cell.hasSubColumns = true;
+
+        const groupLeaves = resolvedLeafColumns.slice(
+          leafStartIndex,
+          leafIndex,
+        );
+        const fixed = groupLeaves[0]?.fixed;
+        const isFixedGroup =
+          (fixed === 'left' || fixed === 'right') &&
+          groupLeaves.every((leaf) => leaf.fixed === fixed);
+
+        if (isFixedGroup) {
+          const offsetLeaf =
+            fixed === 'left'
+              ? groupLeaves[0]
+              : groupLeaves[groupLeaves.length - 1];
+          const boundaryLeaf =
+            fixed === 'left'
+              ? groupLeaves[groupLeaves.length - 1]
+              : groupLeaves[0];
+          column = {
+            ...sourceColumn,
+            fixed,
+            style: {
+              ...sourceColumn.style,
+              [fixed]: offsetLeaf.style?.[fixed],
+            },
+            isFixedLeftLast: fixed === 'left' && boundaryLeaf.isFixedLeftLast,
+            isFixedRightFirst:
+              fixed === 'right' && boundaryLeaf.isFixedRightFirst,
+          };
+          cell.column = column;
+        }
+      } else {
+        column = resolvedLeafColumns[leafIndex] || sourceColumn;
+        cell.column = column;
+        leafIndex += 1;
       }
+
       rows[rowIndex].push(cell);
       colSpanTotal += cell.colSpan;
     });

package/src/Tabs/tab-content.tsx

@@ -67,9 +67,11 @@ const TabContent: React.FC<TabContentProps> = ({
             className={`${prefixCls}-tab-content`}
             style={{ display: activeKey === key ? 'block' : 'none' }}
             key={key}
+            id={`tabpanel-${key}`}
             role="tabpanel"
             aria-labelledby={`tab-${key}`}
             aria-hidden={activeKey !== key}
+            tabIndex={activeKey === key ? 0 : -1}
           >
             {children}
           </div>

package/src/Tabs/tab-header/index.tsx

@@ -170,6 +170,8 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
             className={clsx(`${prefixCls}-nav-list`, classNames?.list)}
             style={styles?.list}
             ref={navList}
+            role="tablist"
+            aria-orientation={direction}
           >
             {items?.map((item: TabItemType, index: number) => (
               <TabHeaderTitle

package/src/Tabs/tab-header/tab-header-title.tsx

@@ -166,10 +166,12 @@ const TabHeaderTitle: React.FC<TabsItemProps> = (props) => {
       {...rest}
       ref={tabRef}
       role="tab"
+      id={`tab-${$key}`}
       aria-selected={activeKey === $key}
       aria-disabled={disabled}
+      aria-controls={`tabpanel-${$key}`}
       className={cls}
-      tabIndex={disabled ? -1 : 0}
+      tabIndex={disabled ? -1 : activeKey === $key ? 0 : -1}
       onClick={handleTabClick}
       onKeyDown={handleKeyDown}
     >

package/src/hooks/useDelayState.ts

@@ -4,10 +4,12 @@ export default function useDelayState<T>(state: T, delay = 0): T {
   const [delayState, setDelayState] = useState<T>();
 
   useEffect(() => {
-    setTimeout(() => {
+    const timer = window.setTimeout(() => {
       setDelayState(state);
     }, delay * 1000);
-  }, [state]);
+
+    return () => window.clearTimeout(timer);
+  }, [delay, state]);
 
   return delayState as T;
 }