Accordion, AddButton, Modal, TwoButtonModal, DeleteModal 웹접근성 높이기 (#455)

* feat: (#410) 아코디언 웹 접근성 향상

* feat: (#410) 더하기 버튼 스토리북에 aria-label 예시 코드 작성

* feat: (#410) Modal 컴포넌트 웹 접근성 향상

* feat: (#410) TwoButtonModal, DeleteModal 웹 접근성 향상

* feat: (#410) 모달의 title을 설명할 때 추가적인 정보를 주도록 구현

frontend/src/components/common/Accordion/Accordion.stories.tsx

@@ -26,7 +26,7 @@ export const Default: Story = {
 
 export const NicknameChange: Story = {
   render: () => (
-    <Accordion title="닉네임 변경">
+    <Accordion title="닉네임 변경" ariaLabel="닉네임 변경 메뉴">
       <Input placeholder="새로운 닉네임을 입력해주세요" />
       <ButtonWrapper>
         <SquareButton aria-label="닉네임 변경" theme="fill">

frontend/src/components/common/Accordion/index.tsx

@@ -7,22 +7,28 @@ import * as S from './style';
 
 interface AccordionProps extends PropsWithChildren {
   title: string;
+  ariaLabel?: string;
 }
 
-export default function Accordion({ title, children }: AccordionProps) {
+export default function Accordion({ title, ariaLabel = '메뉴', children }: AccordionProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleAccordion = () => {
     setIsOpen(!isOpen);
   };
 
   return (
-    <S.Wrapper aria-label="Accordion">
-      <S.Title onClick={toggleAccordion} aria-controls={`${title}에 대한 내용`}>
+    <S.Wrapper>
+      <S.Title
+        aria-label={isOpen ? `${ariaLabel} 닫기` : `${ariaLabel} 열기`}
+        tabIndex={0}
+        onClick={toggleAccordion}
+        aria-controls={`${title}에 대한 내용`}
+      >
         {title}
         <S.Image src={isOpen ? chevronUp : chevronDown} alt="" $isOpen={isOpen} />
       </S.Title>
-      <S.Content id={`${title}에 대한 내용`} $isOpen={isOpen}>
+      <S.Content aria-live="polite" id={`${title}에 대한 내용`} $isOpen={isOpen}>
         {children}
       </S.Content>
     </S.Wrapper>

frontend/src/components/common/AddButton/AddButton.stories.tsx

@@ -10,13 +10,13 @@ export default meta;
 type Story = StoryObj<typeof AddButton>;
 
 export const SizeS: Story = {
-  render: () => <AddButton size="sm" />,
+  render: () => <AddButton size="sm" aria-label="글 작성하기" />,
 };
 
 export const SizeM: Story = {
-  render: () => <AddButton size="md" />,
+  render: () => <AddButton size="md" aria-label="글 작성하기" />,
 };
 
 export const SizeL: Story = {
-  render: () => <AddButton size="lg" />,
+  render: () => <AddButton size="lg" aria-label="글 작성하기" />,
 };

frontend/src/components/common/DeleteModal/index.tsx

@@ -38,7 +38,9 @@ export default function DeleteModal({
         handleClick: handleCancelClick,
       }}
     >
-      <S.Description>{`${TARGET_FOR_DELETE[target]} 삭제하시겠습니까?\n${TARGET_FOR_DELETE[target]} 삭제하면 취소할 수 없습니다.`}</S.Description>
+      <S.Description
+        tabIndex={0}
+      >{`${TARGET_FOR_DELETE[target]} 삭제하시겠습니까?\n${TARGET_FOR_DELETE[target]} 삭제하면 취소할 수 없습니다.`}</S.Description>
     </TwoButtonModal>
   );
 }

frontend/src/components/common/Modal/index.tsx

@@ -27,8 +27,15 @@ export default function Modal({ onModalClose, children, size }: ModalProps) {
 
   return (
     <S.All>
+      <S.HiddenCloseButton
+        onClick={onModalClose}
+        tabIndex={0}
+        aria-label="팝업 창 닫기"
+      ></S.HiddenCloseButton>
       <S.Backdrop ref={BackDropRef}></S.Backdrop>
-      <S.Container size={size}>{children}</S.Container>
+      <S.Container tabIndex={0} size={size}>
+        {children}
+      </S.Container>
     </S.All>
   );
 }

frontend/src/components/common/Modal/style.ts

@@ -43,3 +43,9 @@ export const Container = styled.div<{ size: Size }>`
 
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
 `;
+
+export const HiddenCloseButton = styled.button`
+  position: absolute;
+  left: -10000px;
+  top: -10000px;
+`;

frontend/src/components/common/TwoButtonModal/index.tsx

@@ -41,7 +41,9 @@ export default function TwoButtonModal({
   return (
     <S.Container ref={BackDropRef}>
       <S.ModalContainer>
-        <S.Title>{title}</S.Title>
+        <S.Title aria-label={`제목: ${title}`} tabIndex={0}>
+          {title}
+        </S.Title>
         {children}
         <S.ButtonContainer>
           <S.ButtonWrapper>