Feat/#198 노래 듣기 페이지 웹 접근성 수정 (#202)

* feat: mock 데이터 albumCoverUrl 추가 * chore: 사용하지 않는 dummy album 이미지 삭제 * feat: song detail 타입 변경 * feat: albumCoverUrl API 에 맞게 수정 * fix: youtube player auto player 끄기(접근성 고려) * feat: 웹 접근성 처리 * refactor: li 태그 아래 a태그 오도록 수정
woowacourse-teams · Aug 4, 2023 · 542ff83 · 542ff83
1 parent 143c839
commit 542ff83
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 41 deletions.
diff --git a/frontend/src/components/@common/SRHeading.tsx b/frontend/src/components/@common/SRHeading.tsx
@@ -1,24 +1,12 @@
 import styled from 'styled-components';
 
-interface SRHeadingProps {
-  children: string;
-}
-
-const SRHeading = ({ children: pageName }: SRHeadingProps) => {
-  return (
-    <Heading tabIndex={1} aria-label={pageName}>
-      {pageName}
-    </Heading>
-  );
-};
-
-export default SRHeading;
-
-const Heading = styled.h1`
+const SRHeading = styled.h1`
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
 `;
+
+export default SRHeading;
diff --git a/frontend/src/components/@common/ToggleGroup/ToggleGroup.tsx b/frontend/src/components/@common/ToggleGroup/ToggleGroup.tsx
@@ -40,7 +40,13 @@ const ToggleButton = ({ index, children, ...props }: ToggleButtonProps) => {
   };
 
   return (
-    <Item role="radio" $active={isActive} onClick={handleClickButton} {...props}>
+    <Item
+      role="radio"
+      aria-checked={isActive}
+      $active={isActive}
+      onClick={handleClickButton}
+      {...props}
+    >
       {children}
     </Item>
   );

diff --git a/frontend/src/components/CommentList/CommentList.tsx b/frontend/src/components/CommentList/CommentList.tsx
@@ -5,6 +5,7 @@ import shookshook from '@/assets/icon/shookshook.svg';
 import useFetch from '@/hooks/@common/useFetch';
 import { useMutation } from '@/hooks/@common/useMutation';
 import { Spacing } from '../@common';
+import SRHeading from '../@common/SRHeading';
 import useToastContext from '../@common/Toast/hooks/useToastContext';
 import Comment from './Comment';
 
@@ -56,9 +57,10 @@ const CommentList = ({ songId, partId }: CommentListProps) => {
   }
 
   return (
-    <div>
+    <>
       <Spacing direction="vertical" size={24} />
-      <h3>댓글 {comments.length}개</h3>
+      <SRHeading as="h3">댓글 목록</SRHeading>
+      <p>댓글 {comments.length}개</p>
       <Spacing direction="vertical" size={24} />
       <form onSubmit={submitNewComment}>
         <Flex>
@@ -88,7 +90,7 @@ const CommentList = ({ songId, partId }: CommentListProps) => {
           <Comment key={id} content={content} createdAt={createdAt} />
         ))}
       </Comments>
-    </div>
+    </>
   );
 };
 

diff --git a/frontend/src/components/PopularSongItem/PopularSongItem.style.ts b/frontend/src/components/PopularSongItem/PopularSongItem.style.ts
@@ -1,14 +1,14 @@
 import { styled } from 'styled-components';
 
-export const Grid = styled.li`
+export const Grid = styled.div`
   display: grid;
   column-gap: 8px;
   padding: 6px 0;
   grid-template:
     'rank thumbnail title' 26px
     'rank thumbnail singer' 26px
     'rank thumbnail info' 18px
-    / 14px 70px auto;
+    / 14px 70px;
 
   color: ${({ theme: { color } }) => color.white};
 `;

diff --git a/frontend/src/components/PopularSongItem/PopularSongItem.tsx b/frontend/src/components/PopularSongItem/PopularSongItem.tsx
@@ -16,7 +16,9 @@ const PopularSongItem = ({ rank, albumCoverUrl, title, singer, totalVoteCount }:
       <Thumbnail src={albumCoverUrl} alt={`${title}-${singer}`} />
       <SongTitle>{title}</SongTitle>
       <Singer>{singer}</Singer>
-      <Info>{new Intl.NumberFormat('ko-KR').format(totalVoteCount)} votes</Info>
+      <Info aria-label={`${totalVoteCount} 투표됨`}>
+        {new Intl.NumberFormat('ko-KR').format(totalVoteCount)} votes
+      </Info>
     </Grid>
   );
 };

diff --git a/frontend/src/components/PopularSongItem/Thumbnail.tsx b/frontend/src/components/PopularSongItem/Thumbnail.tsx
@@ -11,7 +11,7 @@ const Thumbnail = ({ ...props }: ThumbnailProps) => {
 
   return (
     <Wrapper>
-      <img {...props} loading="lazy" onError={insertDefaultJacket} />
+      <img {...props} alt="노래 앨범" aria-hidden loading="lazy" onError={insertDefaultJacket} />
     </Wrapper>
   );
 };

diff --git a/frontend/src/components/Youtube/Youtube.tsx b/frontend/src/components/Youtube/Youtube.tsx
@@ -21,7 +21,7 @@ const Youtube = ({ videoId, start = 0 }: YoutubeProps) => {
           videoId,
           width: '100%',
           height: '100%',
-          playerVars: { start, autoplay: 1 },
+          playerVars: { start },
         })
       );
     } catch (error) {

diff --git a/frontend/src/pages/SongPage/SongPage.tsx b/frontend/src/pages/SongPage/SongPage.tsx
@@ -3,6 +3,7 @@ import { useParams, Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { Spacing } from '@/components/@common';
 import SRAlert from '@/components/@common/SRAlert';
+import SRHeading from '@/components/@common/SRHeading';
 import { ToggleGroup } from '@/components/@common/ToggleGroup';
 import { ToggleSwitch } from '@/components/@common/ToggleSwitch';
 import CommentList from '@/components/CommentList/CommentList';
@@ -78,10 +79,11 @@ const SongPage = () => {
 
   return (
     <Wrapper>
-      <BigTitle>킬링파트 듣기 🎧</BigTitle>
+      <SRHeading>킬링파트 듣기 페이지</SRHeading>
+      <BigTitle aria-label="킬링파트 듣기">킬링파트 듣기 🎧</BigTitle>
       <Spacing direction="vertical" size={20} />
       <SongInfoContainer>
-        <Thumbnail src={albumCoverUrl} alt={`${title} 앨범 자켓`} />
+        <Thumbnail src={albumCoverUrl} />
         <Info>
           <SongTitle aria-label={`노래 ${title}`}>{title}</SongTitle>
           <Singer aria-label={`가수 ${singer}`}>{singer}</Singer>
@@ -91,15 +93,17 @@ const SongPage = () => {
       <Youtube videoId={videoId} />
       <Spacing direction="vertical" size={20} />
       <SubTitle>
-        <UnderLine>
+        <UnderLine aria-hidden>
           <PrimarySpan>킬링파트</PrimarySpan> 듣기
         </UnderLine>
         <Link to={`/${id}`}>
           <PrimarySpan>킬링파트</PrimarySpan> 투표
         </Link>
       </SubTitle>
       <Spacing direction="vertical" size={16} />
-      <RegisterTitle>인기 많은 킬링파트를 들어보세요 🎧</RegisterTitle>
+      <RegisterTitle aria-label="인기 많은 킬링파트를 들어보세요">
+        인기 많은 킬링파트를 들어보세요 🎧
+      </RegisterTitle>
       <Spacing direction="vertical" size={16} />
       <ToggleGroup onChangeButton={changeKillingRank}>
         <ToggleGroup.Button tabIndex={0} index={1} aria-label="1등 킬링파트 노래 듣기">

diff --git a/frontend/src/pages/SongPopularPage/SongPopularPage.tsx b/frontend/src/pages/SongPopularPage/SongPopularPage.tsx
@@ -1,5 +1,7 @@
+import { styled } from 'styled-components';
 import fetcher from '@/apis';
 import { Spacing } from '@/components/@common';
+import SRHeading from '@/components/@common/SRHeading';
 import PopularSongItem from '@/components/PopularSongItem';
 import useFetch from '@/hooks/@common/useFetch';
 import { PopularSongList, StyledLink, Title } from './SongPopularPage.style';
@@ -19,27 +21,33 @@ const SongPopularPage = () => {
 
   return (
     <>
+      <SRHeading>shook 메인 페이지</SRHeading>
       <Title>킬링파트 투표 많은순</Title>
       <Spacing direction="vertical" size={24} />
       <PopularSongList>
         {popularSongs.map(({ id, albumCoverUrl, title, singer, totalVoteCount }, i) => (
-          <StyledLink
-            key={id}
-            to={`/song/${id}`}
-            aria-label={`킬링파트 투표순 ${i + 1}등 ${singer} ${title}`}
-          >
-            <PopularSongItem
-              rank={i + 1}
-              albumCoverUrl={albumCoverUrl}
-              title={title}
-              singer={singer}
-              totalVoteCount={totalVoteCount}
-            />
-          </StyledLink>
+          <Li key={id}>
+            <StyledLink
+              to={`/song/${id}`}
+              aria-label={`킬링파트 투표순 ${i + 1}등 ${singer} ${title}`}
+            >
+              <PopularSongItem
+                rank={i + 1}
+                albumCoverUrl={albumCoverUrl}
+                title={title}
+                singer={singer}
+                totalVoteCount={totalVoteCount}
+              />
+            </StyledLink>
+          </Li>
         ))}
       </PopularSongList>
     </>
   );
 };
 
 export default SongPopularPage;
+
+const Li = styled.li`
+  width: 100%;
+`;