feat: added comboboxes aria labels (#48)

* feat: added comboxes aria labels * feat: updated snaps * chore: linting * fix: issue with eslint cache?
reapit · Mar 6, 2024 · 7f3eafd · 7f3eafd
1 parent be15c2c
commit 7f3eafd
Show file tree

Hide file tree

Showing 24 changed files with 342 additions and 308 deletions.
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
@@ -14,13 +14,13 @@ export interface BreadCrumbProps extends HTMLAttributes<HTMLDivElement> {
   defaultActiveIndex?: number
 }
 
-export const handleNext = (setActive: Dispatch<SetStateAction<number>>, onClick: () => void, index: number) => (
-  e: MouseEvent<HTMLDivElement>,
-) => {
-  e.preventDefault()
-  setActive(index)
-  onClick()
-}
+export const handleNext =
+  (setActive: Dispatch<SetStateAction<number>>, onClick: () => void, index: number) =>
+  (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setActive(index)
+    onClick()
+  }
 
 export const BreadCrumb: FC<BreadCrumbProps> = ({ items, defaultActiveIndex = 0, ...rest }) => {
   const [active, setActive] = useState<number>(defaultActiveIndex)

diff --git a/src/components/card/__tests__/card-components.test.tsx b/src/components/card/__tests__/card-components.test.tsx
@@ -96,7 +96,7 @@ describe('handleToggleContextMenu', () => {
       stopPropagation: jest.fn(),
     }
 
-    curried((event as unknown) as MouseEvent)
+    curried(event as unknown as MouseEvent)
 
     expect(mockSetValue).toHaveBeenCalledTimes(1)
     expect(mockSetValue).toHaveBeenCalledWith(true)
@@ -113,7 +113,7 @@ describe('handleToggleMainMobileOpen', () => {
       stopPropagation: jest.fn(),
     }
 
-    curried((event as unknown) as MouseEvent)
+    curried(event as unknown as MouseEvent)
 
     expect(mockSetValue).toHaveBeenCalledTimes(1)
     expect(mockSetValue).toHaveBeenCalledWith(true)
@@ -130,7 +130,7 @@ describe('handleToggleListMobileOpen', () => {
       stopPropagation: jest.fn(),
     }
 
-    curried((event as unknown) as MouseEvent)
+    curried(event as unknown as MouseEvent)
 
     expect(mockSetValue).toHaveBeenCalledTimes(1)
     expect(mockSetValue).toHaveBeenCalledWith(true)
@@ -149,7 +149,7 @@ describe('handleToggleBothMobileOpen', () => {
       stopPropagation: jest.fn(),
     }
 
-    curried((event as unknown) as MouseEvent)
+    curried(event as unknown as MouseEvent)
 
     expect(mockSetValue).toHaveBeenCalledTimes(1)
     expect(mockSetValue).toHaveBeenCalledWith(true)

diff --git a/src/components/card/card-components.tsx b/src/components/card/card-components.tsx
@@ -70,50 +70,44 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   isSelected?: boolean // Does the card have the blue selected border
 }
 
-export const handleToggleContextMenu = (
-  contextMenuOpen: boolean,
-  setContextMenuOpen: Dispatch<SetStateAction<boolean>>,
-) => (event: MouseEvent) => {
-  event.stopPropagation()
-  setContextMenuOpen(!contextMenuOpen)
-}
+export const handleToggleContextMenu =
+  (contextMenuOpen: boolean, setContextMenuOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => {
+    event.stopPropagation()
+    setContextMenuOpen(!contextMenuOpen)
+  }
 
-export const handleToggleMainMobileOpen = (
-  mainMobileOpen: boolean,
-  setMainMobileOpen: Dispatch<SetStateAction<boolean>>,
-) => (event: MouseEvent) => {
-  event.stopPropagation()
-  deprecateFunction('handleToggleMainMobileOpen')
-  setMainMobileOpen(!mainMobileOpen)
-}
+export const handleToggleMainMobileOpen =
+  (mainMobileOpen: boolean, setMainMobileOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => {
+    event.stopPropagation()
+    deprecateFunction('handleToggleMainMobileOpen')
+    setMainMobileOpen(!mainMobileOpen)
+  }
 
-export const handleToggleListMobileOpen = (
-  listMobileOpen: boolean,
-  setListMobileOpen: Dispatch<SetStateAction<boolean>>,
-) => (event: MouseEvent) => {
-  event.stopPropagation()
-  deprecateFunction('handleToggleListMobileOpen')
-  setListMobileOpen(!listMobileOpen)
-}
+export const handleToggleListMobileOpen =
+  (listMobileOpen: boolean, setListMobileOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => {
+    event.stopPropagation()
+    deprecateFunction('handleToggleListMobileOpen')
+    setListMobileOpen(!listMobileOpen)
+  }
 
-export const handleToggleBothMobileOpen = (
-  mainMobileOpen: boolean,
-  setMainMobileOpen: Dispatch<SetStateAction<boolean>>,
-  listMobileOpen: boolean,
-  setListMobileOpen: Dispatch<SetStateAction<boolean>>,
-) => (event: MouseEvent) => {
-  event.stopPropagation()
-  deprecateFunction('handleToggleBothMobileOpen')
-  setMainMobileOpen(!mainMobileOpen)
-  setListMobileOpen(!listMobileOpen)
-}
+export const handleToggleBothMobileOpen =
+  (
+    mainMobileOpen: boolean,
+    setMainMobileOpen: Dispatch<SetStateAction<boolean>>,
+    listMobileOpen: boolean,
+    setListMobileOpen: Dispatch<SetStateAction<boolean>>,
+  ) =>
+  (event: MouseEvent) => {
+    event.stopPropagation()
+    deprecateFunction('handleToggleBothMobileOpen')
+    setMainMobileOpen(!mainMobileOpen)
+    setListMobileOpen(!listMobileOpen)
+  }
 
-export const handleMouseHover = (
-  hoverIndex: number | null,
-  setHoverIndex: Dispatch<SetStateAction<number | null>>,
-) => () => {
-  setHoverIndex(hoverIndex)
-}
+export const handleMouseHover =
+  (hoverIndex: number | null, setHoverIndex: Dispatch<SetStateAction<number | null>>) => () => {
+    setHoverIndex(hoverIndex)
+  }
 
 export const CardContextMenu: FC<CardContextMenuProps> = ({ className, contextMenuItems, ...rest }) => {
   const [contextMenuOpen, setContextMenuOpen] = useState<boolean>(false)

diff --git a/src/components/file-input/__tests__/file-input.test.tsx b/src/components/file-input/__tests__/file-input.test.tsx
@@ -40,7 +40,7 @@ describe('handleFileView', () => {
 
     const curried = handleFileView(onFileView, fileUrl)
 
-    curried((event as unknown) as MouseEvent<HTMLSpanElement>)
+    curried(event as unknown as MouseEvent<HTMLSpanElement>)
 
     expect(onFileView).toHaveBeenCalledWith(fileUrl)
     expect(event.stopPropagation).toHaveBeenCalledTimes(1)
@@ -58,7 +58,7 @@ describe('handleFileClear', () => {
 
     const curried = handleFileClear(setFileName)
 
-    curried((event as unknown) as MouseEvent<HTMLSpanElement>)
+    curried(event as unknown as MouseEvent<HTMLSpanElement>)
 
     expect(setFileName).toHaveBeenCalledWith('')
     expect(event.stopPropagation).toHaveBeenCalledTimes(1)
@@ -79,7 +79,7 @@ describe('handleFileChange', () => {
 
     const curried = handleFileChange(setFileName, fileName, onFileUpload)
 
-    const reader = curried((event as unknown) as ChangeEvent<HTMLInputElement>)
+    const reader = curried(event as unknown as ChangeEvent<HTMLInputElement>)
 
     expect(reader instanceof FileReader).toBe(true)
   })

diff --git a/src/components/file-input/file-input.tsx b/src/components/file-input/file-input.tsx
@@ -53,60 +53,60 @@ export interface ImageUploadModel {
   Url: string
 }
 
-export const handleFileChange = (
-  setFileName: Dispatch<SetStateAction<string>>,
-  fileName: string,
-  onFileUpload?: (uploadImageModel: CreateImageUploadModel) => Promise<string | ImageUploadModel>,
-) => (event: ChangeEvent<HTMLInputElement>) => {
-  if (event.target && event.target.files && event.target.files[0]) {
-    const file = event.target.files[0]
-
-    const fileUrl = URL.createObjectURL(file)
-
-    if (typeof fileUrl === 'string') {
-      setFileName(fileUrl)
-    }
+export const handleFileChange =
+  (
+    setFileName: Dispatch<SetStateAction<string>>,
+    fileName: string,
+    onFileUpload?: (uploadImageModel: CreateImageUploadModel) => Promise<string | ImageUploadModel>,
+  ) =>
+  (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target && event.target.files && event.target.files[0]) {
+      const file = event.target.files[0]
+
+      const fileUrl = URL.createObjectURL(file)
+
+      if (typeof fileUrl === 'string') {
+        setFileName(fileUrl)
+      }
 
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = async () => {
-      const base64 = reader.result
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = async () => {
+        const base64 = reader.result
 
-      if (onFileUpload && typeof base64 === 'string') {
-        const uploaded = await onFileUpload({
-          imageData: base64,
-          name: `${fileName ? fileName : file.name}`,
-        })
+        if (onFileUpload && typeof base64 === 'string') {
+          const uploaded = await onFileUpload({
+            imageData: base64,
+            name: `${fileName ? fileName : file.name}`,
+          })
 
-        if (uploaded && (uploaded as ImageUploadModel).Url) {
-          setFileName((uploaded as ImageUploadModel).Url)
+          if (uploaded && (uploaded as ImageUploadModel).Url) {
+            setFileName((uploaded as ImageUploadModel).Url)
+          }
         }
       }
-    }
-    reader.onerror = (error) => {
-      console.error(`file upload error: ${error}`)
-    }
+      reader.onerror = (error) => {
+        console.error(`file upload error: ${error}`)
+      }
 
-    return reader
+      return reader
+    }
   }
-}
 
-export const handleFileClear = (setFileName: Dispatch<SetStateAction<string>>) => (
-  event: MouseEvent<HTMLSpanElement>,
-) => {
-  event.stopPropagation()
-  event.preventDefault()
+export const handleFileClear =
+  (setFileName: Dispatch<SetStateAction<string>>) => (event: MouseEvent<HTMLSpanElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
 
-  setFileName('')
-}
+    setFileName('')
+  }
 
-export const handleFileView = (onFileView: (fileUrl: string) => void, fileUrl: string) => (
-  event: MouseEvent<HTMLSpanElement>,
-) => {
-  event.stopPropagation()
-  event.preventDefault()
-  onFileView(fileUrl)
-}
+export const handleFileView =
+  (onFileView: (fileUrl: string) => void, fileUrl: string) => (event: MouseEvent<HTMLSpanElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+    onFileView(fileUrl)
+  }
 
 export const FilePreviewImage: FC<FilePreviewImageProps> = ({ src }) => {
   if (!src) return <PlaceholderImage placeholder="placeholderSmall" size={120} fillAvailable />
@@ -152,7 +152,7 @@ export const FileInput: FileInputWrapped = forwardRef(
             id={inputId}
             {...rest}
             defaultValue={defaultValue}
-            ref={(ref as unknown) as LegacyRef<HTMLInputElement>}
+            ref={ref as unknown as LegacyRef<HTMLInputElement>}
           />
           {fileUrl ? (
             <ElFileInputIconContainer>

diff --git a/src/components/form-layout/form-layout.tsx b/src/components/form-layout/form-layout.tsx
@@ -26,15 +26,14 @@ export const FormSectionDivider: FC<FormLayoutProps> = ({ children, ...rest }) =
   return <ElFormSectionDivider {...rest}>{children}</ElFormSectionDivider>
 }
 
-export const InputWrap: React.ForwardRefExoticComponent<
-  FormLayoutProps & React.RefAttributes<HTMLDivElement>
-> = forwardRef(({ children, ...rest }, ref) => {
-  return (
-    <ElInputWrap {...rest} ref={ref as LegacyRef<HTMLDivElement>}>
-      {children}
-    </ElInputWrap>
-  )
-})
+export const InputWrap: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>> =
+  forwardRef(({ children, ...rest }, ref) => {
+    return (
+      <ElInputWrap {...rest} ref={ref as LegacyRef<HTMLDivElement>}>
+        {children}
+      </ElInputWrap>
+    )
+  })
 
 export const InputWrapSmall: FC<FormLayoutProps> = ({ children, ...rest }) => {
   return <ElInputWrapSmall {...rest}>{children}</ElInputWrapSmall>

diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
@@ -16,7 +16,7 @@ export const Input: InputWrapped = forwardRef(
       <ElInput
         className={cx(hasError && elHasInputError)}
         {...rest}
-        ref={(ref as unknown) as LegacyRef<HTMLInputElement>}
+        ref={ref as unknown as LegacyRef<HTMLInputElement>}
       />
     )
   },

diff --git a/src/components/mobile-controls/__tests__/mobile-controls.test.tsx b/src/components/mobile-controls/__tests__/mobile-controls.test.tsx
@@ -38,10 +38,10 @@ describe('clickEventHandler', () => {
   it('should handle a click event', () => {
     const setActive = jest.fn()
     const onClick = jest.fn()
-    const event = ({
+    const event = {
       preventDefault: jest.fn(),
       stopPropagation: jest.fn(),
-    } as unknown) as MouseEvent<HTMLAnchorElement | HTMLDivElement>
+    } as unknown as MouseEvent<HTMLAnchorElement | HTMLDivElement>
 
     const curried = clickEventHandler(setActive, onClick)
 

diff --git a/src/components/mobile-controls/mobile-controls.tsx b/src/components/mobile-controls/mobile-controls.tsx
@@ -17,18 +17,18 @@ export interface MobileControlsProps extends HTMLAttributes<HTMLDivElement> {
   isVisible?: boolean
 }
 
-export const clickEventHandler = (setActive: Dispatch<SetStateAction<boolean>>, onClick?: () => void) => (
-  event: MouseEvent<HTMLAnchorElement | HTMLDivElement>,
-) => {
-  event?.preventDefault()
-  event?.stopPropagation()
+export const clickEventHandler =
+  (setActive: Dispatch<SetStateAction<boolean>>, onClick?: () => void) =>
+  (event: MouseEvent<HTMLAnchorElement | HTMLDivElement>) => {
+    event?.preventDefault()
+    event?.stopPropagation()
 
-  setActive((active) => !active)
+    setActive((active) => !active)
 
-  if (onClick) {
-    onClick()
+    if (onClick) {
+      onClick()
+    }
   }
-}
 
 export const MobileControls: FC<MobileControlsProps> = ({
   mobileControlItems,