From a6ea7dbace1610880157c1f3b2f26cea8a061ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=98=81=EA=B8=B8/KIM=20YOUNG=20GIL?=
 <80146176+Gilpop8663@users.noreply.github.com>
Date: Mon, 4 Sep 2023 04:42:20 +0900
Subject: [PATCH] =?UTF-8?q?Accordion,=20AddButton,=20Modal,=20TwoButtonMod?=
 =?UTF-8?q?al,=20DeleteModal=20=EC=9B=B9=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EB=86=92=EC=9D=B4=EA=B8=B0=20(#455)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

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

* feat: (#410) 모달의 title을 설명할 때 추가적인 정보를 주도록 구현
---
 .../common/Accordion/Accordion.stories.tsx         |  2 +-
 frontend/src/components/common/Accordion/index.tsx | 14 ++++++++++----
 .../common/AddButton/AddButton.stories.tsx         |  6 +++---
 .../src/components/common/DeleteModal/index.tsx    |  4 +++-
 frontend/src/components/common/Modal/index.tsx     |  9 ++++++++-
 frontend/src/components/common/Modal/style.ts      |  6 ++++++
 .../src/components/common/TwoButtonModal/index.tsx |  4 +++-
 7 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/common/Accordion/Accordion.stories.tsx b/frontend/src/components/common/Accordion/Accordion.stories.tsx
index 859d36c4f..831985f76 100644
--- a/frontend/src/components/common/Accordion/Accordion.stories.tsx
+++ b/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">
diff --git a/frontend/src/components/common/Accordion/index.tsx b/frontend/src/components/common/Accordion/index.tsx
index e9a37472c..bf17e66ef 100644
--- a/frontend/src/components/common/Accordion/index.tsx
+++ b/frontend/src/components/common/Accordion/index.tsx
@@ -7,9 +7,10 @@ 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 = () => {
@@ -17,12 +18,17 @@ export default function Accordion({ title, children }: AccordionProps) {
   };
 
   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>
diff --git a/frontend/src/components/common/AddButton/AddButton.stories.tsx b/frontend/src/components/common/AddButton/AddButton.stories.tsx
index af8e14765..580c6a070 100644
--- a/frontend/src/components/common/AddButton/AddButton.stories.tsx
+++ b/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="글 작성하기" />,
 };
diff --git a/frontend/src/components/common/DeleteModal/index.tsx b/frontend/src/components/common/DeleteModal/index.tsx
index 5add67734..5d8dc51d1 100644
--- a/frontend/src/components/common/DeleteModal/index.tsx
+++ b/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>
   );
 }
diff --git a/frontend/src/components/common/Modal/index.tsx b/frontend/src/components/common/Modal/index.tsx
index 98b1d63f6..945199f26 100644
--- a/frontend/src/components/common/Modal/index.tsx
+++ b/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>
   );
 }
diff --git a/frontend/src/components/common/Modal/style.ts b/frontend/src/components/common/Modal/style.ts
index d32aed125..a3b6eb9a3 100644
--- a/frontend/src/components/common/Modal/style.ts
+++ b/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;
+`;
diff --git a/frontend/src/components/common/TwoButtonModal/index.tsx b/frontend/src/components/common/TwoButtonModal/index.tsx
index 96ec3693e..51e70b75e 100644
--- a/frontend/src/components/common/TwoButtonModal/index.tsx
+++ b/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>