refactor: use ol instead

Author: zombieJ

src/Step.tsx

@@ -98,8 +98,8 @@ export default function Step(props: StepProps) {
   const accessibilityProps: {
     role?: string;
     tabIndex?: number;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLLIElement>;
   } = {};
 
   if (clickable) {
@@ -233,7 +233,7 @@ export default function Step(props: StepProps) {
   );
 
   let stepNode: React.ReactNode = (
-    <div
+    <li
       {...restItemProps}
       {...accessibilityProps}
       className={classString}
@@ -244,7 +244,7 @@ export default function Step(props: StepProps) {
       }}
     >
       {itemWrapperRender ? itemWrapperRender(wrapperNode) : wrapperNode}
-    </div>
+    </li>
   );
 
   if (itemRender) {

src/Steps.tsx

@@ -43,7 +43,7 @@ export type StepItem = {
   title?: React.ReactNode;
   classNames?: Partial<Record<ItemSemanticName, string>>;
   styles?: Partial<Record<ItemSemanticName, React.CSSProperties>>;
-} & Pick<React.HtmlHTMLAttributes<HTMLDivElement>, 'onClick' | 'className' | 'style'>;
+} & Pick<React.HtmlHTMLAttributes<HTMLLIElement>, 'onClick' | 'className' | 'style'>;
 
 export type StepIconRender = (info: {
   index: number;
@@ -212,7 +212,7 @@ export default function Steps(props: StepsProps) {
   };
 
   return (
-    <div
+    <ol
       className={classString}
       style={{
         ...style,
@@ -223,6 +223,6 @@ export default function Steps(props: StepsProps) {
       <StepsContext.Provider value={stepIconContext}>
         {mergedItems.map<React.ReactNode>(renderStep)}
       </StepsContext.Provider>
-    </div>
+    </ol>
   );
 }