[Feature] - 메인 페이지, 로그인 페이지 웹 접근성 개선

frontend/src/components/common/AvatarCircle/AvatarCircle.tsx

@@ -3,19 +3,18 @@ import useImageError from "@hooks/useImageError";
 import * as S from "./AvatarCircle.styled";
 import type { AvatarCircleSize } from "./AvatarCircle.type";
 
-interface AvatarCircleProps {
+interface AvatarCircleProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   $size?: AvatarCircleSize;
   profileImageUrl?: string;
-  imageAlt?: string;
 }
 
-const AvatarCircle = ({ $size = "small", profileImageUrl, imageAlt }: AvatarCircleProps) => {
+const AvatarCircle = ({ $size = "small", profileImageUrl, ...props }: AvatarCircleProps) => {
   const { imageError, handleImageError } = useImageError({ imageUrl: profileImageUrl });
 
   return (
     <S.AvatarCircleContainer $size={$size}>
       {!imageError ? (
-        <img src={profileImageUrl} alt={imageAlt} onError={handleImageError} />
+        <img src={profileImageUrl} onError={handleImageError} {...props} />
       ) : (
         <S.FallbackIcon $size={$size}>
           <svg

frontend/src/components/common/Chip/Chip.tsx

@@ -1,19 +1,34 @@
-import { ComponentPropsWithoutRef } from "react";
+import React from "react";
 
 import { CYPRESS_DATA_MAP } from "@constants/cypress";
 
 import Text from "../Text/Text";
 import * as S from "./Chip.styled";
+import { DEFAULT_ELEMENT } from "./constants";
 
-interface ChipProps extends ComponentPropsWithoutRef<"li"> {
+interface ChipOwnProps<Element extends React.ElementType = typeof DEFAULT_ELEMENT> {
+  as?: Element;
   label: string;
   isSelected?: boolean;
   index?: number;
 }
 
-const Chip = ({ label, isSelected = false, index, children, ...props }: ChipProps) => {
+type ChipProps<E extends React.ElementType> = ChipOwnProps<E> &
+  Omit<React.ComponentPropsWithoutRef<E>, keyof ChipOwnProps>;
+
+const Chip = <E extends React.ElementType>({
+  as,
+  label,
+  isSelected = false,
+  index,
+  children,
+  ...props
+}: ChipProps<E>) => {
+  const Component = as ?? DEFAULT_ELEMENT;
+
   return (
     <S.Layout
+      as={Component}
       $isSelected={isSelected}
       $index={index}
       data-cy={isSelected ? `selected-${CYPRESS_DATA_MAP.chip}` : CYPRESS_DATA_MAP.chip}
@@ -24,5 +39,4 @@ const Chip = ({ label, isSelected = false, index, children, ...props }: ChipProp
     </S.Layout>
   );
 };
-
 export default Chip;

frontend/src/components/common/Chip/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_ELEMENT = "li" as const;

frontend/src/components/common/Drawer/Drawer.tsx

@@ -1,15 +1,18 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
+import ReactDOM from "react-dom";
 
 import DrawerProvider, { useDrawerContext } from "@contexts/DrawerProvider";
 
 import useModalControl from "@hooks/useModalControl";
+import usePressESC from "@hooks/usePressESC";
 
+import VisuallyHidden from "../VisuallyHidden/VisuallyHidden";
 import * as S from "./Drawer.styled";
 
 const Drawer = ({ children }: React.PropsWithChildren) => {
   const [isOpen, setIsOpen] = useState(false);
-
-  const toggleDrawer = () => setIsOpen((prev) => !prev);
+  const toggleDrawer = useCallback(() => setIsOpen((prev) => !prev), []);
+  usePressESC(isOpen, toggleDrawer);
 
   useModalControl(isOpen, toggleDrawer);
 
@@ -31,12 +34,19 @@ const Drawer = ({ children }: React.PropsWithChildren) => {
 
   return (
     <DrawerProvider isOpen={isOpen} toggleDrawer={toggleDrawer}>
+      <VisuallyHidden aria-live="assertive">
+        {isOpen ? "사용자 메뉴 모달이 열렸습니다." : "사용자 메뉴 모달이 닫혔습니다."}
+      </VisuallyHidden>
       {otherContent}
       <S.Overlay isOpen={isOpen} onClick={toggleDrawer} />
-      <S.DrawerContainer isOpen={isOpen}>
-        {headerContent}
-        {drawerContent}
-      </S.DrawerContainer>
+      {isOpen &&
+        ReactDOM.createPortal(
+          <S.DrawerContainer id="drawer-content" isOpen={isOpen} aria-modal="true" role="dialog">
+            {headerContent}
+            {drawerContent}
+          </S.DrawerContainer>,
+          document.body,
+        )}
     </DrawerProvider>
   );
 };
@@ -49,10 +59,21 @@ const Content = ({ children }: React.PropsWithChildren) => {
   return <S.DrawerContent>{children}</S.DrawerContent>;
 };
 
-const Trigger = ({ children }: React.PropsWithChildren) => {
+interface TriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const Trigger = ({ children, onClick }: TriggerProps) => {
   const { toggleDrawer } = useDrawerContext();
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    toggleDrawer();
+    onClick?.(event);
+  };
+
   return (
-    <S.TriggerButton onClick={toggleDrawer} aria-label="Toggle drawer">
+    <S.TriggerButton type="button" onClick={handleClick}>
       {children}
     </S.TriggerButton>
   );

frontend/src/components/common/FallbackImage/FallbackImage.styled.ts

@@ -12,5 +12,5 @@ export const Fallback = styled.div`
   background-color: #eee;
 
   ${(props) => props.theme.typography.mobile.detailBold};
-  color: #9e9e9e;
+  color: ${({ theme }) => theme.colors.text.secondary};
 `;

frontend/src/components/common/FloatingButton/FloatingButton.tsx

@@ -3,13 +3,16 @@ import { useNavigate } from "react-router-dom";
 
 import useModalControl from "@hooks/useModalControl";
 
-import { ROUTE_PATHS_MAP } from "@constants/route";
+import { removeEmoji } from "@utils/removeEmojis";
 
 import { PRIMITIVE_COLORS } from "@styles/tokens";
 
+import FocusTrap from "../FocusTrap";
 import IconButton from "../IconButton/IconButton";
 import Text from "../Text/Text";
+import VisuallyHidden from "../VisuallyHidden/VisuallyHidden";
 import * as S from "./FloatingButton.styled";
+import SUB_BUTTONS from "./constants";
 
 const FloatingButton = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,34 +22,47 @@ const FloatingButton = () => {
     setIsOpen((prev) => !prev);
   };
 
-  const handleClickTravelogueRegister = () => {
-    navigate(ROUTE_PATHS_MAP.travelogueRegister);
-  };
-
-  const handleClickTravelPlanRegister = () => {
-    navigate(ROUTE_PATHS_MAP.travelPlanRegister);
+  const handleClickSubButton = (route: string) => {
+    navigate(route);
   };
 
   useModalControl(isOpen, handleToggleButton);
 
   return (
     <S.FloatingButtonContainer>
-      {isOpen && <S.BackdropLayout onClick={handleToggleButton} />}
-      <S.SubButtonContainer $isOpen={isOpen}>
-        <S.SubButton onClick={handleClickTravelPlanRegister}>
-          <Text textType="body" css={S.subButtonTextStyle}>
-            ✈️ 여행 계획 작성
-          </Text>
-        </S.SubButton>
-        <S.SubButton onClick={handleClickTravelogueRegister}>
-          <Text textType="body" css={S.subButtonTextStyle}>
-            📝 여행기 작성
-          </Text>
-        </S.SubButton>
-      </S.SubButtonContainer>
+      <VisuallyHidden aria-live="assertive">
+        {isOpen
+          ? "여행기 및 여행 계획 작성 플로팅 버튼이 열렸습니다. 닫으려면 esc버튼을 눌러주세요."
+          : "여행기 및 여행 계획 작성 플로팅 버튼이 닫혔습니다."}
+      </VisuallyHidden>
+      {isOpen && (
+        <>
+          <S.BackdropLayout onClick={handleToggleButton} />
+          <FocusTrap>
+            <S.SubButtonContainer $isOpen={isOpen}>
+              {SUB_BUTTONS.map(({ text, route }) => (
+                <S.SubButton
+                  key={route}
+                  onClick={() => handleClickSubButton(route)}
+                  aria-label={removeEmoji(text)}
+                >
+                  <Text textType="body" css={S.subButtonTextStyle}>
+                    {text}
+                  </Text>
+                </S.SubButton>
+              ))}
+            </S.SubButtonContainer>
+          </FocusTrap>
+        </>
+      )}
 
       <S.MainButtonWrapper onClick={handleToggleButton} $isOpen={isOpen}>
-        <IconButton iconType="plus" color={PRIMITIVE_COLORS.white} size="20" />
+        <IconButton
+          iconType="plus"
+          color={PRIMITIVE_COLORS.white}
+          size="20"
+          title="여행 계획 및 여행기 작성 플로팅"
+        />
       </S.MainButtonWrapper>
     </S.FloatingButtonContainer>
   );

frontend/src/components/common/FloatingButton/constants.ts

@@ -0,0 +1,14 @@
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+const SUB_BUTTONS = [
+  {
+    text: "✈️ 여행 계획 작성",
+    route: ROUTE_PATHS_MAP.travelPlanRegister,
+  },
+  {
+    text: "📝 여행기 작성",
+    route: ROUTE_PATHS_MAP.travelogueRegister,
+  },
+];
+
+export default SUB_BUTTONS;

frontend/src/components/common/FocusTrap.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef } from "react";
+
+const getFocusableElements = (element: HTMLElement | null): HTMLElement[] => {
+  if (!element) return [];
+
+  const focusableSelectors = [
+    "a[href]",
+    "button",
+    "input",
+    "textarea",
+    "select",
+    '[tabindex]:not([tabindex="-1"])',
+    "li",
+  ].join(",");
+
+  return Array.from(element.querySelectorAll<HTMLElement>(focusableSelectors)).filter(
+    (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"),
+  );
+};
+
+interface Props extends React.ComponentPropsWithoutRef<"div"> {
+  children: React.ReactElement;
+  onEscapeFocusTrap?: () => void;
+}
+
+const FocusTrap = <T extends HTMLElement>({ children, onEscapeFocusTrap, ...props }: Props) => {
+  const focusTrapRef = useRef<T>(null);
+  const child = React.Children.only(children);
+  const focusableElements = useRef<(HTMLElement | null)[]>([]);
+  const currentFocusIndex = useRef(-1);
+
+  useEffect(() => {
+    if (focusTrapRef.current) {
+      focusableElements.current = getFocusableElements(focusTrapRef.current);
+    }
+
+    return () => {
+      focusableElements.current = [];
+    };
+  }, []);
+
+  useEffect(() => {
+    const focusNextElement = () => {
+      currentFocusIndex.current =
+        (currentFocusIndex.current + 1) % focusableElements.current.length;
+      focusableElements.current[currentFocusIndex.current]?.focus();
+    };
+
+    const focusPrevElement = () => {
+      currentFocusIndex.current =
+        (currentFocusIndex.current - 1 + focusableElements.current.length) %
+        focusableElements.current.length;
+      focusableElements.current[currentFocusIndex.current]?.focus();
+    };
+
+    const handleTabKeyDown = (event: KeyboardEvent) => {
+      const isTabKeyDown = !event.shiftKey && event.key === "Tab";
+      if (!isTabKeyDown) return;
+
+      event.preventDefault();
+      focusNextElement();
+    };
+
+    const handleShiftTabKeyDown = (event: KeyboardEvent) => {
+      const isShiftTabKeyDown = event.shiftKey && event.key === "Tab";
+      if (!isShiftTabKeyDown) return;
+
+      event.preventDefault();
+      focusPrevElement();
+    };
+
+    const handleEscapeKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && onEscapeFocusTrap) {
+        onEscapeFocusTrap();
+      }
+    };
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+      handleTabKeyDown(event);
+      handleShiftTabKeyDown(event);
+      onEscapeFocusTrap && handleEscapeKeyDown(event);
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, [onEscapeFocusTrap]);
+
+  const Component = React.cloneElement(child, {
+    ...{ ...props, ...child?.props },
+    ref: focusTrapRef,
+  });
+
+  return <>{Component}</>;
+};
+
+export default FocusTrap;

frontend/src/components/common/Header/DefaultHeader/DefaultHeader.tsx

@@ -15,6 +15,7 @@ const DefaultHeader = () => {
           iconType="home-icon"
           size="20"
           onClick={() => navigation(ROUTE_PATHS_MAP.root)}
+          aria-label="홈 이동"
         />
       }
       isHamburgerUsed

frontend/src/components/common/Header/Header.styled.ts

@@ -23,13 +23,7 @@ export const DrawHeaderContainer = styled.div`
   display: flex;
 `;
 
-export const MenuItem = styled.li`
-  ${(props) => props.theme.typography.mobile.bodyBold};
-  padding: ${({ theme }) => theme.spacing.s};
-  cursor: pointer;
-`;
-
-export const MenuList = styled.ul`
+export const MenuList = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;