@rainbow-oh/yee-c 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "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/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,23 @@ 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,7 @@ 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,7 @@ 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,7 +32,7 @@ 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(' / ');
@@ -43,13 +43,22 @@ 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/Checkbox/checkbox-group.tsx

@@ -63,7 +63,7 @@ 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,15 @@ const Dialog = (baseprops: DialogProps) => {
               className={clsx(`${prefixCls}-header`, classNames?.header)}
               style={styles?.header}
             >
-              <div className={`${prefixCls}-title`}>{title}</div>
+              <div className={`${prefixCls}-title`} id={titleId}>
+                {title}
+              </div>
             </div>
           ) : null}
           <div
             className={clsx(`${prefixCls}-body`, classNames?.body)}
             style={styles?.body}
+            id={bodyId}
           >
             {children}
           </div>

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,13 @@ 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/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,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>