diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index 134e89ec..d7022afa 100644
--- 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
index 3d931b2f..1a7096d5 100644
--- 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
index 43e99eef..3299b7db 100644
--- 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
index 51a9cedd..b88ae1b2 100644
--- 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
index 65560174..87168d2b 100644
--- 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
index 16f8e522..aec0e067 100644
--- 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
index 18ab8c22..ba2a7b4f 100644
--- 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
index 6a8d0756..8992bdf4 100644
--- 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
index 3d672acf..aa8a2f41 100644
--- 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,
diff --git a/src/components/multi-select/__tests__/__snapshots__/multi-select.test.tsx.snap b/src/components/multi-select/__tests__/__snapshots__/multi-select.test.tsx.snap
index 70094908..ad64505c 100644
--- a/src/components/multi-select/__tests__/__snapshots__/multi-select.test.tsx.snap
+++ b/src/components/multi-select/__tests__/__snapshots__/multi-select.test.tsx.snap
@@ -169,7 +169,11 @@ exports[`MultiSelectInput should match a snapshot and render children 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <mock-styled.div>
+      <mock-styled.div
+        aria-controls=":r0:"
+        aria-haspopup="listbox"
+        role="combobox"
+      >
         <mock-styled.input
           id="react-example"
         />
@@ -215,7 +219,11 @@ exports[`MultiSelectInput should match a snapshot and render children 1`] = `
     </div>
   </body>,
   "container": <div>
-    <mock-styled.div>
+    <mock-styled.div
+      aria-controls=":r0:"
+      aria-haspopup="listbox"
+      role="combobox"
+    >
       <mock-styled.input
         id="react-example"
       />
@@ -318,7 +326,11 @@ exports[`MultiSelectInput should match a snapshot and render non selected messag
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <mock-styled.div>
+      <mock-styled.div
+        aria-controls=":r1:"
+        aria-haspopup="listbox"
+        role="combobox"
+      >
         <mock-styled.input
           id="react-example"
         />
@@ -377,7 +389,11 @@ exports[`MultiSelectInput should match a snapshot and render non selected messag
     </div>
   </body>,
   "container": <div>
-    <mock-styled.div>
+    <mock-styled.div
+      aria-controls=":r1:"
+      aria-haspopup="listbox"
+      role="combobox"
+    >
       <mock-styled.input
         id="react-example"
       />
diff --git a/src/components/multi-select/multi-select.tsx b/src/components/multi-select/multi-select.tsx
index e9216bf8..19a3c927 100644
--- a/src/components/multi-select/multi-select.tsx
+++ b/src/components/multi-select/multi-select.tsx
@@ -9,6 +9,7 @@ import React, {
   RefAttributes,
   SetStateAction,
   useEffect,
+  useId,
   useMemo,
   useState,
 } from 'react'
@@ -60,44 +61,41 @@ const setNativeInputValue = (element: HTMLElement, value: string[], testFunc?: (
   }
 }
 
-export const handleSetNativeInput = (
-  id: string,
-  selectedOptionValues: string[],
-  testFunc?: (value: string[]) => void,
-) => () => {
-  const input = document.getElementById(id)
-  if (input) {
-    setNativeInputValue(input, selectedOptionValues, testFunc)
-    const changeEvent = new Event('change', { bubbles: true })
-    input.dispatchEvent(changeEvent)
+export const handleSetNativeInput =
+  (id: string, selectedOptionValues: string[], testFunc?: (value: string[]) => void) => () => {
+    const input = document.getElementById(id)
+    if (input) {
+      setNativeInputValue(input, selectedOptionValues, testFunc)
+      const changeEvent = new Event('change', { bubbles: true })
+      input.dispatchEvent(changeEvent)
+    }
   }
-}
 
-export const handleResetDefaultValues = (
-  setSelectedOptionValues: Dispatch<SetStateAction<string[]>>,
-  setSelectedDefaultValues: Dispatch<SetStateAction<string[]>>,
-  defaultValues?: string[],
-  selectedDefaultValues?: string[],
-) => () => {
-  if (defaultValues && JSON.stringify(defaultValues) !== JSON.stringify(selectedDefaultValues)) {
-    setSelectedOptionValues(defaultValues)
-    setSelectedDefaultValues(defaultValues)
+export const handleResetDefaultValues =
+  (
+    setSelectedOptionValues: Dispatch<SetStateAction<string[]>>,
+    setSelectedDefaultValues: Dispatch<SetStateAction<string[]>>,
+    defaultValues?: string[],
+    selectedDefaultValues?: string[],
+  ) =>
+  () => {
+    if (defaultValues && JSON.stringify(defaultValues) !== JSON.stringify(selectedDefaultValues)) {
+      setSelectedOptionValues(defaultValues)
+      setSelectedDefaultValues(defaultValues)
+    }
   }
-}
 
-export const handleSelectedOptions = (
-  value: string,
-  selectedOptionValues: string[],
-  setSelectedOptionValues: Dispatch<SetStateAction<string[]>>,
-) => (event: ChangeEvent<HTMLInputElement>) => {
-  const isChecked = event.target.checked
+export const handleSelectedOptions =
+  (value: string, selectedOptionValues: string[], setSelectedOptionValues: Dispatch<SetStateAction<string[]>>) =>
+  (event: ChangeEvent<HTMLInputElement>) => {
+    const isChecked = event.target.checked
 
-  const newSelected = isChecked
-    ? [...selectedOptionValues, value]
-    : selectedOptionValues.filter((option) => option !== value)
+    const newSelected = isChecked
+      ? [...selectedOptionValues, value]
+      : selectedOptionValues.filter((option) => option !== value)
 
-  setSelectedOptionValues(newSelected)
-}
+    setSelectedOptionValues(newSelected)
+  }
 
 export const MultiSelectChip: FC<MultiSelectChipProps> = ({ className, children, id, ...rest }) => {
   const chipId = useMemo(() => {
@@ -156,9 +154,11 @@ export const MultiSelectInput: MultiSelectInputWrapped = forwardRef(
       [defaultValues],
     )
 
+    const listId = useId()
+
     return (
-      <ElMultiSelectInputWrapper>
-        <ElMultiSelectInput id={id} {...rest} ref={(ref as unknown) as LegacyRef<HTMLInputElement>} />
+      <ElMultiSelectInputWrapper role="combobox" aria-controls={listId} aria-haspopup="listbox">
+        <ElMultiSelectInput id={id} {...rest} ref={ref as unknown as LegacyRef<HTMLInputElement>} />
         <MultiSelectSelected className={className}>
           {selectedOptionValues.length ? (
             options.map((option) => {
diff --git a/src/components/nav/__tests__/nav-responsive.test.tsx b/src/components/nav/__tests__/nav-responsive.test.tsx
index 4cf803bf..d236d17b 100644
--- a/src/components/nav/__tests__/nav-responsive.test.tsx
+++ b/src/components/nav/__tests__/nav-responsive.test.tsx
@@ -89,10 +89,10 @@ describe('handleToggleLogo', () => {
 describe('clickNavEventHandler', () => {
   it('should handle a click event', () => {
     const setActive = 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 = clickNavEventHandler(setActive)
 
diff --git a/src/components/nav/nav-responsive.tsx b/src/components/nav/nav-responsive.tsx
index d73623b8..6fdcb5a6 100644
--- a/src/components/nav/nav-responsive.tsx
+++ b/src/components/nav/nav-responsive.tsx
@@ -90,25 +90,23 @@ export const handleToggleLogo = (logoState: LogoIcon, setLogoState: Dispatch<Set
   setLogoState(newState)
 }
 
-export const handleToggleMenu = (setState: Dispatch<SetStateAction<boolean>>, callback?: () => void) => (
-  event: MouseEvent<HTMLDivElement>,
-) => {
-  event.preventDefault()
-  event.stopPropagation()
-  setState((state) => !state)
-  if (callback) {
-    callback()
+export const handleToggleMenu =
+  (setState: Dispatch<SetStateAction<boolean>>, callback?: () => void) => (event: MouseEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setState((state) => !state)
+    if (callback) {
+      callback()
+    }
   }
-}
 
-export const clickNavEventHandler = (setActive: Dispatch<SetStateAction<boolean>>) => (
-  event: MouseEvent<HTMLAnchorElement | HTMLDivElement>,
-) => {
-  event?.preventDefault()
-  event?.stopPropagation()
+export const clickNavEventHandler =
+  (setActive: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent<HTMLAnchorElement | HTMLDivElement>) => {
+    event?.preventDefault()
+    event?.stopPropagation()
 
-  setActive((active) => !active)
-}
+    setActive((active) => !active)
+  }
 
 export const NavResponsiveAvatar: FC<NavResponsiveAvatarProps> = ({ options, isHidden, text }) => {
   const [avatarOpen, setAvatarOpen] = useState<boolean>(false)
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index 5a217db4..31a770b5 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -34,35 +34,28 @@ export interface PaginationInputProps extends InputHTMLAttributes<HTMLInputEleme
 
 export interface PaginationButtonProps extends HTMLAttributes<HTMLButtonElement> {}
 
-export const handlePageChange = (
-  nextPage: number | null,
-  callback: (page: number) => void,
-  setInputValue: Dispatch<SetStateAction<string>>,
-) => () => {
-  if (nextPage) {
-    setInputValue(String(nextPage))
-    callback(nextPage)
+export const handlePageChange =
+  (nextPage: number | null, callback: (page: number) => void, setInputValue: Dispatch<SetStateAction<string>>) =>
+  () => {
+    if (nextPage) {
+      setInputValue(String(nextPage))
+      callback(nextPage)
+    }
   }
-}
 
-export const handlePageInputChange = (
-  numberPages: number,
-  currentPage: number,
-  inputValue: string,
-  callback: (page: number) => void,
-) => () => {
-  const nextPage = Number(inputValue)
-  if (nextPage && nextPage <= numberPages && nextPage !== currentPage) {
-    callback(nextPage)
+export const handlePageInputChange =
+  (numberPages: number, currentPage: number, inputValue: string, callback: (page: number) => void) => () => {
+    const nextPage = Number(inputValue)
+    if (nextPage && nextPage <= numberPages && nextPage !== currentPage) {
+      callback(nextPage)
+    }
   }
-}
 
-export const handlePageInput = (setInputValue: Dispatch<SetStateAction<string>>) => (
-  event: ChangeEvent<HTMLInputElement>,
-) => {
-  const nextPage = event.target.value
-  setInputValue(nextPage)
-}
+export const handlePageInput =
+  (setInputValue: Dispatch<SetStateAction<string>>) => (event: ChangeEvent<HTMLInputElement>) => {
+    const nextPage = event.target.value
+    setInputValue(nextPage)
+  }
 
 export const PaginationWrap: FC<PaginationWrapProps> = ({ children, ...rest }) => (
   <ElPaginationWrap {...rest}>{children}</ElPaginationWrap>
diff --git a/src/components/progress-bar/progress-bar.tsx b/src/components/progress-bar/progress-bar.tsx
index 600adc0f..fb0dd7c2 100644
--- a/src/components/progress-bar/progress-bar.tsx
+++ b/src/components/progress-bar/progress-bar.tsx
@@ -36,22 +36,20 @@ export const ProgressBarLabel: FC<ProgressBarBaseProps> = ({ children, ...rest }
   <ElProgressBarLabel {...rest}>{children}</ElProgressBarLabel>
 )
 
-export const handleSetPercentageComplete = (
-  setPercentageComplete: Dispatch<SetStateAction<number>>,
-  intervalTime: number,
-) => () => {
-  const interval = window.setInterval(() => {
-    setPercentageComplete((prev) => {
-      if (prev < 100) {
-        return ++prev
-      }
-
-      return prev
-    })
-  }, intervalTime)
-
-  return () => window.clearInterval(interval)
-}
+export const handleSetPercentageComplete =
+  (setPercentageComplete: Dispatch<SetStateAction<number>>, intervalTime: number) => () => {
+    const interval = window.setInterval(() => {
+      setPercentageComplete((prev) => {
+        if (prev < 100) {
+          return ++prev
+        }
+
+        return prev
+      })
+    }, intervalTime)
+
+    return () => window.clearInterval(interval)
+  }
 
 export const ProgressBarPercentage: FC<ProgressBarPercentageProps> = ({ duration, showLabel = true, ...rest }) => {
   const [percentageComplete, setPercentageComplete] = useState<number>(0)
@@ -76,13 +74,10 @@ export const ProgressBarPercentage: FC<ProgressBarPercentageProps> = ({ duration
   )
 }
 
-export const handleSetPercentageCompleteSteps = (
-  setPercentageComplete: Dispatch<SetStateAction<number>>,
-  currentStep: number,
-  numberSteps: number,
-) => () => {
-  setPercentageComplete((currentStep / numberSteps) * 100)
-}
+export const handleSetPercentageCompleteSteps =
+  (setPercentageComplete: Dispatch<SetStateAction<number>>, currentStep: number, numberSteps: number) => () => {
+    setPercentageComplete((currentStep / numberSteps) * 100)
+  }
 
 export const ProgressBarSteps: FC<ProgressBarStepProps> = ({ numberSteps, currentStep, showLabel = true, ...rest }) => {
   const [percentageComplete, setPercentageComplete] = useState<number>((currentStep / numberSteps) * 100)
diff --git a/src/components/searchable-dropdown/__tests__/__snapshots__/searchable-dropdown.test.tsx.snap b/src/components/searchable-dropdown/__tests__/__snapshots__/searchable-dropdown.test.tsx.snap
index 156a51c4..322a3cf9 100644
--- a/src/components/searchable-dropdown/__tests__/__snapshots__/searchable-dropdown.test.tsx.snap
+++ b/src/components/searchable-dropdown/__tests__/__snapshots__/searchable-dropdown.test.tsx.snap
@@ -5,7 +5,12 @@ exports[`ControlledSearchableDropdown component should display default value 1`]
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <mock-styled.div>
+      <mock-styled.div
+        aria-controls=":r3:"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        role="combobox"
+      >
         <input
           id="some-id"
           readonly=""
@@ -36,7 +41,12 @@ exports[`ControlledSearchableDropdown component should display default value 1`]
     </div>
   </body>,
   "container": <div>
-    <mock-styled.div>
+    <mock-styled.div
+      aria-controls=":r3:"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      role="combobox"
+    >
       <input
         id="some-id"
         readonly=""
@@ -124,7 +134,12 @@ exports[`ControlledSearchableDropdown component should match a snapshot 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <mock-styled.div>
+      <mock-styled.div
+        aria-controls=":r1:"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        role="combobox"
+      >
         <input
           id="some-id"
           readonly=""
@@ -151,7 +166,12 @@ exports[`ControlledSearchableDropdown component should match a snapshot 1`] = `
     </div>
   </body>,
   "container": <div>
-    <mock-styled.div>
+    <mock-styled.div
+      aria-controls=":r1:"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      role="combobox"
+    >
       <input
         id="some-id"
         readonly=""
@@ -235,7 +255,12 @@ exports[`SearchableDropdown component should match a snapshot 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <mock-styled.div>
+      <mock-styled.div
+        aria-controls=":r0:"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        role="combobox"
+      >
         <input
           id="some-id"
           readonly=""
@@ -263,7 +288,12 @@ exports[`SearchableDropdown component should match a snapshot 1`] = `
     </div>
   </body>,
   "container": <div>
-    <mock-styled.div>
+    <mock-styled.div
+      aria-controls=":r0:"
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      role="combobox"
+    >
       <input
         id="some-id"
         readonly=""
diff --git a/src/components/searchable-dropdown/searchable-dropdown.tsx b/src/components/searchable-dropdown/searchable-dropdown.tsx
index e0daffff..c0ced62e 100644
--- a/src/components/searchable-dropdown/searchable-dropdown.tsx
+++ b/src/components/searchable-dropdown/searchable-dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { FC, forwardRef, HTMLAttributes, useEffect } from 'react'
+import React, { FC, forwardRef, HTMLAttributes, useEffect, useId } from 'react'
 import {
   ElSearchableDropdownCloseButton,
   ElSearchableDropdownContainer,
@@ -55,6 +55,7 @@ export const SearchableDropdownControlledInner = <T extends unknown>(
   }: ControlledSearchableDropdownProps<T>,
   ref: React.ForwardedRef<HTMLInputElement>,
 ) => {
+  const listId = useId()
   return (
     <>
       {label && (
@@ -62,14 +63,19 @@ export const SearchableDropdownControlledInner = <T extends unknown>(
           {label}
         </Label>
       )}
-      <ElSearchableDropdownContainer>
+      <ElSearchableDropdownContainer
+        role="combobox"
+        aria-expanded={isResultsListVisible}
+        aria-controls={listId}
+        aria-haspopup="listbox"
+      >
         <input id={id} style={{ display: 'none' }} readOnly value={selectedValue} ref={ref} />
         <ElSearchableDropdownSearchInputAddOn>
           <Icon icon={icon} fontSize="1rem" intent="default" />
         </ElSearchableDropdownSearchInputAddOn>
         <ElSearchableDropdownSearchInput data-testid="search-input" value={value} {...inputProps} />
         {isResultsListVisible && (
-          <ElSearchableDropdownResultsContainer>
+          <ElSearchableDropdownResultsContainer role="listbox" id={listId}>
             {resultsList.map((result, index) => (
               <ElSearchableDropdownResult
                 data-testid={`dropdown-result-${index}`}
@@ -136,12 +142,12 @@ export const SearchableDropdownInner = <T extends unknown>(
     setSelectedValue(value)
     setResultsVisible(false)
     if (onChange) {
-      onChange(({
+      onChange({
         target: {
           ...inputProps,
           value,
         },
-      } as unknown) as React.ChangeEvent<HTMLInputElement>)
+      } as unknown as React.ChangeEvent<HTMLInputElement>)
     }
   }
 
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index ab84932f..84b7046e 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -10,7 +10,7 @@ export type SelectWrapped = React.ForwardRefExoticComponent<
 export const Select: SelectWrapped = forwardRef(
   ({ children, ...rest }, ref: React.ForwardedRef<React.SelectHTMLAttributes<HTMLSelectElement>>) => {
     return (
-      <ElSelect {...rest} ref={(ref as unknown) as LegacyRef<HTMLSelectElement>}>
+      <ElSelect {...rest} ref={ref as unknown as LegacyRef<HTMLSelectElement>}>
         {children}
       </ElSelect>
     )
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 4e3f23f4..d7b61ac2 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -55,19 +55,21 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
   setIndexExpandedRow?: Dispatch<SetStateAction<number | null>>
 }
 
-export const handleToggleExpandedRow = (
-  index: number | null,
-  expandedRow: number | null,
-  setExpandedRow: Dispatch<SetStateAction<number | null>>,
-  indexExpandedRow?: number | null,
-  setIndexExpandedRow?: Dispatch<SetStateAction<number | null>>,
-) => () => {
-  if (indexExpandedRow !== undefined && setIndexExpandedRow) {
-    indexExpandedRow === index ? setIndexExpandedRow(null) : setIndexExpandedRow(index)
-  } else {
-    expandedRow === index ? setExpandedRow(null) : setExpandedRow(index)
+export const handleToggleExpandedRow =
+  (
+    index: number | null,
+    expandedRow: number | null,
+    setExpandedRow: Dispatch<SetStateAction<number | null>>,
+    indexExpandedRow?: number | null,
+    setIndexExpandedRow?: Dispatch<SetStateAction<number | null>>,
+  ) =>
+  () => {
+    if (indexExpandedRow !== undefined && setIndexExpandedRow) {
+      indexExpandedRow === index ? setIndexExpandedRow(null) : setIndexExpandedRow(index)
+    } else {
+      expandedRow === index ? setExpandedRow(null) : setExpandedRow(index)
+    }
   }
-}
 
 export const Table: FC<TableProps> = ({
   rows,
@@ -93,10 +95,10 @@ export const Table: FC<TableProps> = ({
         (hasExpandableRows || hasCallToAction) && numberColumns
           ? numberColumns - 1
           : numberColumns
-          ? numberColumns - 1
-          : hasExpandableRows
-          ? firstRow.cells.length
-          : undefined
+            ? numberColumns - 1
+            : hasExpandableRows
+              ? firstRow.cells.length
+              : undefined
       }
       data-has-expandable-action={hasExpandableRows}
       data-has-call-to-action={hasCallToAction}
diff --git a/src/components/textarea/textarea.tsx b/src/components/textarea/textarea.tsx
index f0809613..b958f955 100644
--- a/src/components/textarea/textarea.tsx
+++ b/src/components/textarea/textarea.tsx
@@ -15,7 +15,7 @@ export const TextArea: TextAreaWrapped = forwardRef(({ hasError, ...rest }, ref)
     <ElTextArea
       className={cx(hasError && elTextAreaHasError)}
       {...rest}
-      ref={(ref as unknown) as LegacyRef<HTMLTextAreaElement>}
+      ref={ref as unknown as LegacyRef<HTMLTextAreaElement>}
     />
   )
 })
diff --git a/src/components/toggle/toggle.tsx b/src/components/toggle/toggle.tsx
index a976e1df..13fbd3bc 100644
--- a/src/components/toggle/toggle.tsx
+++ b/src/components/toggle/toggle.tsx
@@ -57,7 +57,7 @@ export const Toggle: ToggleWrapped = forwardRef(
     }
     return (
       <>
-        <ElToggleCheckbox id={id} type="checkbox" {...rest} ref={(ref as unknown) as LegacyRef<HTMLInputElement>} />
+        <ElToggleCheckbox id={id} type="checkbox" {...rest} ref={ref as unknown as LegacyRef<HTMLInputElement>} />
         <ElToggleLabel
           htmlFor={id}
           className={cx(className, isFullWidth && elToggleFullWidth, hasGreyBg && elHasGreyBg)}
@@ -89,7 +89,7 @@ export const ToggleRadio: ToggleRadioWrapped = forwardRef(
               disabled={disabled}
               {...rest}
               defaultChecked={isChecked}
-              ref={(ref as unknown) as LegacyRef<HTMLInputElement>}
+              ref={ref as unknown as LegacyRef<HTMLInputElement>}
             />
             <ElToggleRadioLabel
               htmlFor={!disabled ? id : undefined}
diff --git a/src/components/typography/typography.tsx b/src/components/typography/typography.tsx
index 51a24b5b..e5e083c6 100644
--- a/src/components/typography/typography.tsx
+++ b/src/components/typography/typography.tsx
@@ -44,47 +44,49 @@ export interface TypographyProps extends HTMLAttributes<HTMLElement> {
   intent?: Intent
 }
 
-const propsToClass = ({
-  className,
-  hasGreyText,
-  hasItalicText,
-  hasBoldText,
-  hasRegularText,
-  hasMediumText,
-  hasNoMargin,
-  hasMargin,
-  hasSectionMargin,
-  hasCenteredText,
-  hasDisabledText,
-  hasCapitalisedText,
-  hasUpperCasedText,
-  intent,
-  children,
-  ...rest
-}: TypographyProps) => () => {
-  const intentClass = intent ? getIntentClassName(intent) : null
-
-  return {
-    className: cx(
-      className,
-      hasGreyText && elHasGreyText,
-      hasRegularText && elHasRegularText,
-      hasBoldText && elHasBoldText,
-      hasItalicText && elHasItalicText,
-      hasMediumText && elHasMediumText,
-      hasMargin && elHasMargin,
-      hasNoMargin && elHasNoMargin,
-      hasSectionMargin && elHasSectionMargin,
-      hasCenteredText && elHasCenteredText,
-      hasDisabledText && elHasDisabledText,
-      hasCapitalisedText && elHasCapitalisedText,
-      hasUpperCasedText && elHasUpperCasedText,
-      intentClass,
-    ),
+const propsToClass =
+  ({
+    className,
+    hasGreyText,
+    hasItalicText,
+    hasBoldText,
+    hasRegularText,
+    hasMediumText,
+    hasNoMargin,
+    hasMargin,
+    hasSectionMargin,
+    hasCenteredText,
+    hasDisabledText,
+    hasCapitalisedText,
+    hasUpperCasedText,
+    intent,
     children,
-    rest,
+    ...rest
+  }: TypographyProps) =>
+  () => {
+    const intentClass = intent ? getIntentClassName(intent) : null
+
+    return {
+      className: cx(
+        className,
+        hasGreyText && elHasGreyText,
+        hasRegularText && elHasRegularText,
+        hasBoldText && elHasBoldText,
+        hasItalicText && elHasItalicText,
+        hasMediumText && elHasMediumText,
+        hasMargin && elHasMargin,
+        hasNoMargin && elHasNoMargin,
+        hasSectionMargin && elHasSectionMargin,
+        hasCenteredText && elHasCenteredText,
+        hasDisabledText && elHasDisabledText,
+        hasCapitalisedText && elHasCapitalisedText,
+        hasUpperCasedText && elHasUpperCasedText,
+        intentClass,
+      ),
+      children,
+      rest,
+    }
   }
-}
 
 export const Text3XL: FC<TypographyProps> = (props) => {
   const { className, children, rest } = useMemo(propsToClass(props), [props])
diff --git a/src/hooks/use-nav-state/__tests__/index.test.tsx b/src/hooks/use-nav-state/__tests__/index.test.tsx
index e52158fe..1aab40a8 100644
--- a/src/hooks/use-nav-state/__tests__/index.test.tsx
+++ b/src/hooks/use-nav-state/__tests__/index.test.tsx
@@ -23,10 +23,10 @@ describe('useNavState', () => {
       callback: jest.fn(),
     }
 
-    const event = ({
+    const event = {
       preventDefault: jest.fn(),
       stopPropagation: jest.fn(),
-    } as unknown) as MouseEvent<HTMLAnchorElement>
+    } as unknown as MouseEvent<HTMLAnchorElement>
 
     expect(result.current.navState).toEqual({
       navItemIndex: null,
diff --git a/src/hooks/use-nav-state/index.tsx b/src/hooks/use-nav-state/index.tsx
index 4403c84a..848a9424 100644
--- a/src/hooks/use-nav-state/index.tsx
+++ b/src/hooks/use-nav-state/index.tsx
@@ -66,21 +66,20 @@ export const useNavState = (
     }))
   }, [])
 
-  const handleSetNavState = (newState: Partial<NavState>) => (
-    event: MouseEvent<HTMLAnchorElement | HTMLDivElement>,
-  ) => {
-    event.preventDefault()
-    event.stopPropagation()
+  const handleSetNavState =
+    (newState: Partial<NavState>) => (event: MouseEvent<HTMLAnchorElement | HTMLDivElement>) => {
+      event.preventDefault()
+      event.stopPropagation()
 
-    setNavState((currentState: NavState) => ({
-      ...currentState,
-      ...newState,
-    }))
+      setNavState((currentState: NavState) => ({
+        ...currentState,
+        ...newState,
+      }))
 
-    if (newState.callback) {
-      newState.callback()
+      if (newState.callback) {
+        newState.callback()
+      }
     }
-  }
 
   return {
     navState,