fix: Top 컴포넌트 접근성 개선

woowacourse-teams · Oct 16, 2024 · 6216dec · 6216dec
1 parent 12701ed
commit 6216dec
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/client/src/components/Design/components/Top/Line.tsx b/client/src/components/Design/components/Top/Line.tsx
@@ -31,6 +31,7 @@ export default function Line({text, emphasize = []}: Props) {
             size="subTitle"
             textColor={emphasize.includes(text) ? 'black' : 'gray'}
             style={{whiteSpace: 'pre'}}
+            aria-hidden={true}
           >
             {`${text}`}
           </Text>

diff --git a/client/src/components/Design/components/Top/Top.tsx b/client/src/components/Design/components/Top/Top.tsx
@@ -1,5 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import {css} from '@emotion/react';
+import {useEffect, useState} from 'react';
+import React from 'react';
 
 import Line from './Line';
 import EditableLine from './EditableLine';
@@ -8,12 +10,26 @@ Top.Line = Line;
 Top.EditableLine = EditableLine;
 
 export default function Top({children}: React.PropsWithChildren) {
+  const [childrenTexts, setChildrenTexts] = useState<string[]>([]);
+
+  useEffect(() => {
+    const collectedTexts: string[] = [];
+    React.Children.forEach(children, child => {
+      if (React.isValidElement(child) && child.type === Top.Line) {
+        collectedTexts.push(child.props.text);
+      }
+    });
+    setChildrenTexts(collectedTexts);
+  }, [children]);
+
   return (
     <div
       css={css`
         display: flex;
         flex-direction: column;
       `}
+      aria-label={childrenTexts.join(' ')}
+      tabIndex={0}
     >
       {children}
     </div>