fix(ListItemView): div -> li default list item html tag (#1698)

gravity-ui · Jul 15, 2024 · 07a16c9 · 07a16c9
1 parent f9650da
commit 07a16c9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/components/TreeList/__stories__/stories/WithDndListStory.tsx b/src/components/TreeList/__stories__/stories/WithDndListStory.tsx
@@ -28,6 +28,7 @@ const DraggableListItem = ({
             {...provided?.draggableProps}
             ref={provided?.innerRef}
             {...props}
+            role="option"
         />
     );
 };

diff --git a/src/components/useList/__stories__/components/ListWithDnd.tsx b/src/components/useList/__stories__/components/ListWithDnd.tsx
@@ -98,6 +98,7 @@ export const ListWithDnd = ({size, itemsCount, 'aria-label': ariaLabel}: ListWit
                                                     dragging={snapshot.isDragging}
                                                     ref={provided.innerRef}
                                                     endSlot={<Icon data={Grip} size={16} />}
+                                                    role="option"
                                                 />
                                             )}
                                         </Draggable>

diff --git a/src/components/useList/components/ListItemView/ListItemView.tsx b/src/components/useList/components/ListItemView/ListItemView.tsx
@@ -15,7 +15,7 @@ import './ListItemView.scss';
 
 const b = block('list-item-view');
 
-export interface ListItemViewProps<T extends React.ElementType = 'div'>
+export interface ListItemViewProps<T extends React.ElementType = 'li'>
     extends QAProps,
         ListItemCommonProps {
     /**
@@ -93,7 +93,7 @@ const renderSafeIndentation = (indentation?: number) => {
 };
 
 export const ListItemView = React.forwardRef(function ListItemView<
-    T extends React.ElementType = 'div',
+    T extends React.ElementType = 'li',
 >(
     {
         id,
@@ -120,7 +120,7 @@ export const ListItemView = React.forwardRef(function ListItemView<
     }: ListItemViewPropsWithTypedAttrs<T>,
     ref?: ListItemViewRef<T>,
 ) {
-    const as: React.ElementType = asProps || 'div';
+    const as: React.ElementType = asProps || 'li';
     const isGroup = typeof expanded === 'boolean';
     const onClick = disabled ? undefined : _onClick;
     const activeOnHover =
@@ -201,7 +201,7 @@ export const ListItemView = React.forwardRef(function ListItemView<
             {endSlot}
         </Flex>
     );
-}) as <C extends React.ElementType = 'div'>({
+}) as <C extends React.ElementType = 'li'>({
     ref,
     ...props
 }: ListItemViewPropsWithTypedAttrs<C> & {ref?: ListItemViewRef<C>}) => React.ReactElement;