@rainbow-oh/yee-c 0.8.0 → 0.8.2

package/src/List/hooks/useListKeyboard.ts

@@ -31,9 +31,9 @@ export default function useListKeyboard({
   onFocusChange,
   onClick,
 }: UseListKeyboardParams) {
-  const [internalFocusedKey, setInternalFocusedKey] = useState<
-    string | number
-  >('');
+  const [internalFocusedKey, setInternalFocusedKey] = useState<string | number>(
+    '',
+  );
 
   const isControlled = controlledFocusedKey !== undefined;
   const focusedKey = isControlled ? controlledFocusedKey : internalFocusedKey;

package/src/List/list.tsx

@@ -33,7 +33,8 @@ const List = forwardRef<HTMLUListElement, ListProps>((baseprops, ref) => {
   } = props;
 
   const multiColumn = columns > 1;
-  const useVirtual = virtual && height !== null && height !== undefined && Array.isArray(items);
+  const useVirtual =
+    virtual && height !== null && height !== undefined && Array.isArray(items);
   const safeItems = Array.isArray(items) ? items : [];
 
   // Keyboard navigation

package/src/Menu/menu-item.tsx

@@ -69,6 +69,10 @@ const MenuItem = (props: MenuItemProps) => {
         style={{ paddingLeft, ...styles?.item }}
         onClick={handleClick}
         title={isCollapsed && typeof label === 'string' ? label : undefined}
+        role="menuitem"
+        aria-disabled={disabled || undefined}
+        aria-current={selectedKeys?.includes(key) ? 'page' : undefined}
+        tabIndex={disabled ? -1 : 0}
       >
         {iconNode}
         {!isCollapsed && (
@@ -149,7 +153,7 @@ const MenuItem = (props: MenuItemProps) => {
     if (isCollapsed) return null;
     if (mode === 'vertical' || mode === 'horizontal') {
       return (
-        <span className={`${prefixCls}-item-switch`}>
+        <span className={`${prefixCls}-item-switch`} aria-hidden="true">
           <ChevronRight strokeWidth={2} size={18} />
         </span>
       );
@@ -159,6 +163,7 @@ const MenuItem = (props: MenuItemProps) => {
         className={`${prefixCls}-item-switch`}
         animate={{ rotateX: opened ? 180 : 0 }}
         transition={{ duration: 0.15 }}
+        aria-hidden="true"
       >
         <ChevronDown strokeWidth={2} size={18} />
       </motion.span>
@@ -167,7 +172,10 @@ const MenuItem = (props: MenuItemProps) => {
 
   const triggerNode = (
     <div
-      role="submenu"
+      role="menuitem"
+      aria-haspopup="true"
+      aria-expanded={opened}
+      aria-disabled={disabled || undefined}
       className={clsx(`${prefixCls}-submenu-title`, {
         [`${prefixCls}-submenu-open`]: opened,
         [`${prefixCls}-submenu-selected`]:
@@ -178,6 +186,7 @@ const MenuItem = (props: MenuItemProps) => {
       })}
       style={{ paddingLeft }}
       onClick={handleExpand}
+      tabIndex={disabled ? -1 : 0}
       title={isCollapsed && typeof label === 'string' ? label : undefined}
     >
       {iconNode}
@@ -203,7 +212,7 @@ const MenuItem = (props: MenuItemProps) => {
     mode === 'horizontal' && !isCollapsed ? 'bottomLeft' : 'rightTop';
 
   const childNode = (
-    <li className={cls}>
+    <li className={cls} role="none">
       {usePopup ? (
         <Trigger
           open={openKeys.includes(key)}

package/src/Menu/menu.tsx

@@ -40,9 +40,19 @@ 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 +122,18 @@ 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,25 @@ 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 +123,25 @@ 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 +173,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,14 @@ 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 +209,14 @@ 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 +259,23 @@ 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/PickerPanel/panels/DatePanel/DateBody.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import React from 'react';
 import useEvent from '../../../hooks/useEvent';
-import type { PanelSharedProps } from '../../interface';
 import panelConfig from '../../configs';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
 

package/src/PickerPanel/panels/DateTimePanel/index.tsx

@@ -1,6 +1,6 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
-import type { PickerType, PanelSharedProps } from '../../interface';
+import type { PanelSharedProps, PickerType } from '../../interface';
 import DatePanel from '../DatePanel';
 import TimePanel from '../TimePanel';
 

package/src/PickerPanel/panels/MonthPanel/MonthHeader.tsx

@@ -6,8 +6,13 @@ import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
 export default function MonthHeader(props: PanelSharedProps) {
-  const { prefixCls, viewDate, offsetYear = 0, onViewDateChange, onPanelChange } =
-    props;
+  const {
+    prefixCls,
+    viewDate,
+    offsetYear = 0,
+    onViewDateChange,
+    onPanelChange,
+  } = props;
 
   const year = pickerUtils.getYear(viewDate) + offsetYear;
 

package/src/PickerPanel/panels/PanelBody.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
-import pickerUtils from '../utils/pickerUtils';
 import type { PickerType } from '../interface';
+import pickerUtils from '../utils/pickerUtils';
 
 export interface PanelBodyProps {
   prefixCls?: string;

package/src/PickerPanel/panels/QuarterPanel/QuarterHeader.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
-import Header from '../Header';
 import type { PanelSharedProps } from '../../interface';
+import Header from '../Header';
 
 import pickerUtils from '../../utils/pickerUtils';
 

package/src/PickerPanel/panels/RangePanel/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { Dayjs } from 'dayjs';
 import type { PickerPanelProps } from '../../interface';
-import type { RangePanelProps } from './interface';
 import PickerPanel from '../../picker-panel';
 import pickerUtils from '../../utils/pickerUtils';
+import type { RangePanelProps } from './interface';
 
 function RangePanel(props: RangePanelProps) {
   const {

package/src/PickerPanel/panels/TimePanel/TimeBody.tsx

@@ -1,7 +1,7 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
-import type { PanelSharedProps, TimeUnit } from '../../interface';
 import panelConfig from '../../configs';
+import type { PanelSharedProps, TimeUnit } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import TimeColumn from './TimeColumn';
 

package/src/PickerPanel/panels/YearPanel/YearHeader.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
-import Header from '../Header';
 import type { PanelSharedProps } from '../../interface';
+import Header from '../Header';
 
 import pickerUtils from '../../utils/pickerUtils';
 

package/src/PickerPanel/utils/pickerUtils.ts

@@ -26,7 +26,8 @@ type PickerType =
 
 const d = {
   dayjs: dayjs,
-  init: (date?: dayjs.ConfigType, option?: dayjs.OptionType) => dayjs(date, option),
+  init: (date?: dayjs.ConfigType, option?: dayjs.OptionType) =>
+    dayjs(date, option),
   getNow: () => {
     return d.init(undefined);
   },

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/RangePicker/range-picker-mobile.tsx

@@ -306,9 +306,7 @@ const RangePickerMobile: FC<RangePickerProps> = (props) => {
               </Space>
             )}
             <Button block type="primary" onClick={handleTabConfirm}>
-              {activeTab === 'start'
-                ? rangepicker.next
-                : rangepicker.confirm}
+              {activeTab === 'start' ? rangepicker.next : rangepicker.confirm}
             </Button>
           </div>
         }

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,10 @@ 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 +82,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 +90,10 @@ 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 +112,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 +120,15 @@ 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/Segmented/demo/variant.tsx

@@ -9,8 +9,16 @@ export default () => (
       <Segmented variant="pill" options={['Daily', 'Weekly', 'Monthly']} />
     </Space>
     <Space block>
-      <Segmented variant="pill" size="small" options={['Small', 'Default', 'Large']} />
-      <Segmented variant="pill" size="large" options={['Small', 'Default', 'Large']} />
+      <Segmented
+        variant="pill"
+        size="small"
+        options={['Small', 'Default', 'Large']}
+      />
+      <Segmented
+        variant="pill"
+        size="large"
+        options={['Small', 'Default', 'Large']}
+      />
     </Space>
     <div style={{ width: 480 }}>
       <Segmented

package/src/Segmented/index.ts

@@ -1,12 +1,12 @@
 import InternalSegmented from './segmented';
 
 export type {
-  SegmentedOption,
   SegmentedLabeledOption,
+  SegmentedOption,
+  SegmentedProps,
   SegmentedRawOption,
   SegmentedSemanticDOM,
   SegmentedValue,
-  SegmentedProps,
 } from './interface';
 
 export default InternalSegmented;

package/src/Segmented/segmented.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import React, { useContext, useId, useMemo } from 'react';
 import { motion } from 'motion/react';
+import React, { useContext, useId, useMemo } from 'react';
 import { GlobalContext } from '../Config-Provider';
 import useMergedState from '../hooks/useMergedState';
 import mergeContextToProps from '../utils/mergeContextToProps';
@@ -13,9 +13,7 @@ import type {
 
 import './style/index.less';
 
-const normalizeOption = (
-  option: SegmentedOption,
-): SegmentedLabeledOption => {
+const normalizeOption = (option: SegmentedOption): SegmentedLabeledOption => {
   if (typeof option === 'string' || typeof option === 'number') {
     return { label: String(option), value: option };
   }
@@ -47,10 +45,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       ...rest
     } = props;
 
-    const items = useMemo(
-      () => options.map(normalizeOption),
-      [options],
-    );
+    const items = useMemo(() => options.map(normalizeOption), [options]);
 
     const firstValue = items[0]?.value;
 
@@ -104,9 +99,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
               ) : null}
               <span className={`${prefixCls}-item-inner`}>
                 {item.icon ? (
-                  <span className={`${prefixCls}-item-icon`}>
-                    {item.icon}
-                  </span>
+                  <span className={`${prefixCls}-item-icon`}>{item.icon}</span>
                 ) : null}
                 {item.label !== undefined && item.label !== null ? (
                   <span className={`${prefixCls}-item-label`}>

package/src/Select/interface.ts

@@ -277,4 +277,3 @@ export interface OptionsProps extends Omit<
     e?: React.MouseEvent | React.KeyboardEvent,
   ) => void;
 }
-

package/src/Select/option.tsx

@@ -7,8 +7,14 @@ import { OptionsCtx } from './options';
 
 const Option = (props: OptionProps) => {
   const { label, value, disabled, title, dataTestId, style } = props;
-  const { prefixCls, selectedKeys, focusedKey, multiple, looseMatch, onSelect } =
-    useContext(OptionsCtx);
+  const {
+    prefixCls,
+    selectedKeys,
+    focusedKey,
+    multiple,
+    looseMatch,
+    onSelect,
+  } = useContext(OptionsCtx);
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     if (!disabled) {

package/src/Select/options.tsx

@@ -117,13 +117,20 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
         const containerRect = container.getBoundingClientRect();
         const targetRect = targetElement.getBoundingClientRect();
         if (targetRect.bottom > containerRect.bottom) {
-          container.scrollTop +=
-            targetRect.bottom - containerRect.bottom;
+          container.scrollTop += targetRect.bottom - containerRect.bottom;
         } else if (targetRect.top < containerRect.top) {
           container.scrollTop -= containerRect.top - targetRect.top;
         }
       }
-    }, [focusedKey, virtual, options, scrollToIndex, rootRef, multiColumn, columns]);
+    }, [
+      focusedKey,
+      virtual,
+      options,
+      scrollToIndex,
+      rootRef,
+      multiColumn,
+      columns,
+    ]);
 
     const isEmpty = options.length === 0;
     const ctxValue = {
@@ -257,7 +264,7 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
         style={{
           ...popupStyle,
           ...(multiColumn
-            ? { '--yee-select-columns': columns } as React.CSSProperties
+            ? ({ '--yee-select-columns': columns } as React.CSSProperties)
             : undefined),
         }}
         ref={rootRef}

package/src/Select/select.tsx

@@ -97,9 +97,7 @@ const Select = (baseprops: SelectProps) => {
     virtualApiRef.current?.scrollToIndex(index);
   }, []);
 
-  const getOptions = (
-    keys: string | number | Array<string | number>,
-  ) => {
+  const getOptions = (keys: string | number | Array<string | number>) => {
     if (keys === '' || keys === null) {
       return undefined;
     }
@@ -133,7 +131,9 @@ const Select = (baseprops: SelectProps) => {
       setOpen(false);
     } else {
       if (keysIncludes(mergedValue, key, looseMatch)) {
-        keys = mergedValue.filter((k: string | number) => !matchValue(k, key, looseMatch));
+        keys = mergedValue.filter(
+          (k: string | number) => !matchValue(k, key, looseMatch),
+        );
       } else {
         keys = [...mergedValue, key];
       }