Change HTML structure for ValidationStatus component

Author: Hector Arce De Las Heras

src/components/validationStatus/validationStatus.styled.ts

@@ -8,10 +8,10 @@ type ValidationStatusProps = {
   styles: ValidationStatusStylesProps;
 };
 
-export const ValidationStatusFrame = styled.div<ValidationStatusProps>`
+export const ValidationStatusFrame = styled.ul<ValidationStatusProps>`
   ${props => getStyles(props.styles.container)}
 `;
 
-export const ValidationStatusRow = styled.div<ValidationStatusProps>`
+export const ValidationStatusRow = styled.li<ValidationStatusProps>`
   ${props => getStyles(props.styles.row)}
 `;

src/components/validationStatus/validationStatus.tsx

@@ -16,7 +16,7 @@ const VALIDATION_STATUS_STYLES = 'VALIDATION_STATUS_STYLES';
 const ValidationStatusComponent = React.forwardRef(
   <V extends string | unknown>(
     { variant, ctv, ...props }: IValidationStatus<V>,
-    ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+    ref: React.ForwardedRef<HTMLUListElement> | undefined | null
   ): JSX.Element => {
     const styles = useStyles<ValidationStatusStylesProps, V>(
       VALIDATION_STATUS_STYLES,
@@ -31,7 +31,7 @@ ValidationStatusComponent.displayName = 'ValidationStatusComponent';
 
 const ValidationStatusBoundary = <V extends string | unknown>(
   props: IValidationStatus<V>,
-  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+  ref: React.ForwardedRef<HTMLUListElement> | undefined | null
 ): JSX.Element => (
   <ErrorBoundary
     fallBackComponent={

src/components/validationStatus/validationStatusStandAlone.tsx

@@ -14,7 +14,7 @@ const maxItems = 6;
 
 const ValidationStatusStandAloneComponent = (
   { maxItemsAllowed = maxItems, ...props }: IValidationStatusStandAlone,
-  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+  ref: React.ForwardedRef<HTMLUListElement> | undefined | null
 ): JSX.Element => {
   const itemsLimited: ValidationStatusItemType[] =
     props.items.length > maxItemsAllowed ? props.items.slice(0, maxItemsAllowed) : props.items;