@rainbow-oh/yee-c 0.8.0 → 0.8.1

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/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;
 }

package/src/hooks/useFocusManage.ts

@@ -1,20 +1,36 @@
-import { useEffect } from 'react';
-import { popFocus, pushFocus } from '../utils/focusStack';
-import useDelayState from './useDelayState';
-
-export default function useFocusManage(ele: HTMLElement, open: boolean) {
-  const delayOpen = useDelayState(open);
-
+import { useEffect, useRef } from 'react';
+import { type FocusStackEntry, popFocus, pushFocus } from '../utils/focusStack';
+export default function useFocusManage(
+  element: HTMLElement | null,
+  open: boolean,
+) {
+  const entryRef = useRef<FocusStackEntry | null>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const openCycleRef = useRef(false);
+  const releaseEntry = () => {
+    if (entryRef.current) {
+      popFocus(entryRef.current);
+      entryRef.current = null;
+    }
+  };
+  const endOpenCycle = () => {
+    releaseEntry();
+    previousFocusRef.current = null;
+    openCycleRef.current = false;
+  };
+  useEffect(() => {
+    if (open && !openCycleRef.current) {
+      openCycleRef.current = true;
+      previousFocusRef.current = document.activeElement as HTMLElement | null;
+    } else if (!open && openCycleRef.current) {
+      endOpenCycle();
+    }
+  }, [open]);
   useEffect(() => {
-    if (!ele) return;
-    if (delayOpen) {
-      pushFocus(ele);
-    } else {
-      popFocus();
+    if (!open || !openCycleRef.current || !element || entryRef.current) {
+      return;
     }
-
-    return () => {
-      popFocus();
-    };
-  }, [ele, delayOpen]);
+    entryRef.current = pushFocus(element, previousFocusRef.current);
+  }, [element, open]);
+  useEffect(() => releaseEntry, []);
 }

package/src/utils/focusStack.ts

@@ -1,22 +1,65 @@
-// focusStack.ts
 type Focusable = HTMLElement | null;
 
-const stack: Focusable[] = [];
+export interface FocusStackEntry {
+  container: HTMLElement;
+  previous: Focusable;
+}
+
+const focusableSelector = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'details',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+const stack: FocusStackEntry[] = [];
 let raf = 0;
 
-const schedule = (el: Focusable) => {
+const schedule = (callback: () => void) => {
   cancelAnimationFrame(raf);
-  raf = requestAnimationFrame(() => el?.focus());
+  raf = requestAnimationFrame(callback);
 };
 
-export const pushFocus = (el: Focusable) => {
-  const prev = document.activeElement as HTMLElement;
-  if (prev && prev !== el) stack.push(prev);
-  schedule(el);
+const focusInitialElement = (entry: FocusStackEntry) => {
+  if (stack[stack.length - 1] !== entry || !entry.container.isConnected) {
+    return;
+  }
+
+  const activeElement = document.activeElement;
+  if (activeElement && entry.container.contains(activeElement)) {
+    return;
+  }
+
+  const firstFocusable =
+    entry.container.querySelector<HTMLElement>(focusableSelector);
+  (firstFocusable ?? entry.container).focus();
 };
 
-export const popFocus = () => {
-  const el = stack.pop();
-  if (!el) return;
-  schedule(el);
+export const pushFocus = (
+  container: HTMLElement,
+  previous: Focusable = document.activeElement as HTMLElement | null,
+): FocusStackEntry => {
+  const entry = { container, previous };
+  stack.push(entry);
+  schedule(() => focusInitialElement(entry));
+  return entry;
+};
+
+export const popFocus = (entry: FocusStackEntry) => {
+  const index = stack.lastIndexOf(entry);
+  if (index === -1) return;
+
+  const isTopEntry = index === stack.length - 1;
+  stack.splice(index, 1);
+
+  if (!isTopEntry) return;
+
+  schedule(() => {
+    if (entry.previous?.isConnected) {
+      entry.previous.focus();
+    }
+  });
 };

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.0";
+export const version = "0.8.1";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;