fix: element type

Author: shiftpsh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.0.1-alpha.22",
+  "version": "0.0.1-alpha.23",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",

src/components/Button.tsx

@@ -106,6 +106,8 @@ export const Button = React.forwardRef(
     return (
       <ButtonContainer
         as={as}
+        role="button"
+        tabindex={0}
         ref={ref}
         disabled={disabled}
         circle={circle}
@@ -130,7 +132,7 @@ export const Button = React.forwardRef(
         }}
         {...rest}
       >
-        <div>{children}</div>
+        {children}
       </ButtonContainer>
     )
   }

src/components/Card.tsx

@@ -70,7 +70,7 @@ export const Card = React.forwardRef(
       padding = 'normal',
       style,
       children,
-      as,
+      as = 'div',
       ...rest
     } = props
 
@@ -80,7 +80,9 @@ export const Card = React.forwardRef(
     return (
       <CardContainer
         ref={ref}
-        as={as ?? (clickable ? 'button' : 'div')}
+        as={as}
+        role={clickable ? 'button' : undefined}
+        tabindex={clickable ? 0 : undefined}
         disabled={disabled && clickable}
         clickable={clickable}
         padding={padding}
@@ -96,7 +98,7 @@ export const Card = React.forwardRef(
         }}
         {...rest}
       >
-        <div>{children}</div>
+        {children}
       </CardContainer>
     )
   }

src/components/ListItem.tsx

@@ -81,7 +81,7 @@ export const ListItem = React.forwardRef(
       padding = 'normal',
       style,
       children,
-      as,
+      as = 'div',
       ...rest
     } = props
 
@@ -102,7 +102,9 @@ export const ListItem = React.forwardRef(
       >
         <ListItemContainer
           ref={ref}
-          as={as ?? (clickable ? 'button' : 'div')}
+          as={as}
+          role={clickable ? 'button' : undefined}
+          tabindex={clickable ? 0 : undefined}
           disabled={disabled && clickable}
           clickable={clickable}
           padding={padding}

src/components/PaginationItem.tsx

@@ -78,7 +78,7 @@ export const PaginationItem = React.forwardRef(
       hoverColor,
       activeColor,
       style,
-      as = 'button',
+      as = 'div',
       ...rest
     } = props
 
@@ -92,6 +92,8 @@ export const PaginationItem = React.forwardRef(
       <PaginationItemContainer
         ref={ref}
         as={as}
+        role="button"
+        tabindex={0}
         current={current}
         disabled={disabled}
         style={{

src/components/Tab.tsx

@@ -78,7 +78,7 @@ export const Tab = React.forwardRef(
       hoverColor,
       accentColor,
       style,
-      as = 'button',
+      as = 'div',
       ...rest
     } = props
 
@@ -93,6 +93,8 @@ export const Tab = React.forwardRef(
       <TabContainer
         ref={ref}
         as={as}
+        role="button"
+        tabindex={0}
         disabled={disabled}
         current={current}
         style={{

src/components/Tabs.tsx

@@ -10,14 +10,14 @@ interface TabsContainerProps {
   multiline: boolean
 }
 
-const TabsContainer = styled.div<TabsContainerProps>`
+const TabsContainer = styled.nav<TabsContainerProps>`
   overflow-x: auto;
   display: ${({ fullWidth }) => (fullWidth ? 'flex' : 'block')};
   white-space: ${({ multiline }) => (multiline ? 'nowrap' : 'normal')};
   flex-wrap: ${({ multiline }) => (multiline ? 'wrap' : 'nowrap')};
 `
 
-export type TabsProps<T extends ElementType = 'div'> = {
+export type TabsProps<T extends ElementType = 'nav'> = {
   fullWidth?: boolean
   multiline?: boolean
 } & PolymorphicProps<T>
@@ -27,7 +27,7 @@ export const Tabs = React.forwardRef(
     props: TabsProps<T>,
     ref?: PolymorphicRef<T>
   ): JSX.Element => {
-    const { fullWidth = false, multiline = false, as = 'div', ...rest } = props
+    const { fullWidth = false, multiline = false, as = 'nav', ...rest } = props
     return (
       <TabsContainer
         ref={ref}