feat: improve a11y for layout and floating button

custardcream98 · Nov 18, 2024 · 766039d · 766039d
1 parent 2ff386d
commit 766039d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/packages/msw-devtools/src/DevTools.tsx b/packages/msw-devtools/src/DevTools.tsx
@@ -1,6 +1,6 @@
 import "./index.css"
 
-import { useCallback } from "react"
+import { useCallback, useId } from "react"
 import { useTranslation } from "react-i18next"
 import { FaXmark } from "react-icons/fa6"
 
@@ -22,10 +22,21 @@ const DevTools = ({ initialOpen = true }: { initialOpen?: boolean }) => {
   const toggle = useCallback(() => setIsOpened((prev) => !prev), [setIsOpened])
   const close = useCallback(() => setIsOpened(false), [setIsOpened])
 
+  const layoutId = useId()
+
   return (
     <FloatingButtonSettingsProvider>
-      <FloatingButton onClick={toggle} />
-      <Layout isOpened={isOpened}>
+      <FloatingButton
+        onClick={toggle}
+        aria-expanded={isOpened}
+        aria-controls={layoutId}
+      />
+      <Layout
+        role='region'
+        aria-label='MSW Devtools'
+        id={layoutId}
+        isOpened={isOpened}
+      >
         <TabProvider>
           <TabBar>
             <button

diff --git a/packages/msw-devtools/src/components/FloatingButton.tsx b/packages/msw-devtools/src/components/FloatingButton.tsx
@@ -16,7 +16,14 @@ const DEFAULT_POSITION = {
 
 const FIXED_DIRECTION = ["bottom", "right"] as const
 
-export const FloatingButton = ({ onClick }: { onClick: () => void }) => {
+type FloatingButtonProps = Omit<
+  React.HTMLAttributes<HTMLButtonElement>,
+  "onClick"
+> & {
+  onClick: () => void
+}
+
+export const FloatingButton = ({ onClick, ...props }: FloatingButtonProps) => {
   const { isLongClicking: isDragging, props: longClickProps } = useLongClick({
     onClick
   })
@@ -39,6 +46,7 @@ export const FloatingButton = ({ onClick }: { onClick: () => void }) => {
 
   return (
     <button
+      {...props}
       type='button'
       className={clsx(
         "z-msw-devtool fixed left-0 top-0 rounded-full border-4 border-solid border-background-light bg-white p-2 shadow-lg",

diff --git a/packages/msw-devtools/src/components/Layout.tsx b/packages/msw-devtools/src/components/Layout.tsx
@@ -4,15 +4,14 @@ import { StorageKey } from "~/constants"
 import { useIsDragging } from "~/hooks/useIsDragging"
 import { useLocalStorageState } from "~/hooks/useLocalStorageState"
 
-export const Layout = ({
-  isOpened,
-  children
-}: React.PropsWithChildren<{
+type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
   isOpened: boolean
-}>) => {
+}
+
+export const Layout = ({ isOpened, children, ...props }: LayoutProps) => {
   const [height, setHeight] = useLocalStorageState(StorageKey.HEIGHT, "50%")
 
-  const { isDragging, props } = useIsDragging({
+  const { isDragging, props: isDraggingProps } = useIsDragging({
     onDrag: (event) => {
       setHeight(`calc(100vh - ${event.clientY}px)`)
     }
@@ -28,14 +27,15 @@ export const Layout = ({
         "h-[var(--height)] max-h-screen min-h-12"
       )}
       style={{ "--height": height }}
+      {...props}
     >
       <button
         type='button'
         className={clsx(
           "absolute left-0 right-0 top-0 h-[3px] cursor-row-resize transition-colors hover:bg-slate-700",
           isDragging && "bg-slate-700"
         )}
-        {...props}
+        {...isDraggingProps}
       ></button>
       {children}
     </div>