[FE] Refactor/#628 시맨틱 태그, 웹 표준, 웹 접근성 검토 #629

semnil5202 · 2023-11-22T08:40:33Z

작업 대상

서비스 전체 태그를 대상으로 시맨틱 태그 작업
서비스 전체 플로우를 대상으로 접근성 로직 유지보수
PinPreview 체크 박스와 친구추가 모달 체크 박스 UI 통일화

📄 작업 내용

시맨틱 태그

커밋 로그에서도 볼 수 있듯이 시맨틱 태그를 보완했습니다. article과 section 경계면이 모호하여 topicCard와 같이 독단적으로 쓰일 수 있는 컴포넌트는 모두 article 태그로 지정하고, 영역을 나타내는 곳을 section으로 지정하였습니다.
머리말 (예를 들면, 인기 급상승할 지도? 새로울 지도? 등) 영역은 h2, h3 태그를 사용하여 보다 페이지를 대표하는 머리말 역할을 할 수 있도록 하였습니다.

웹 접근성

서비스 전반 플로우에 대하여 aria-label, role, tabIndex, aria-hidden 등을 사용하여 접근성 로직을 유지보수 하였습니다.
SVG 아이콘이자 버튼의 기능을 하는 것들 대부분이 포커스가 누락되어 있어서 이를 보완하였습니다.
지도 추가, 핀 추가 페이지에 접근성 로직이 누락되어 이를 보완하였습니다. 핀 추가 페이지의 경우 핀이란 도메인 단어 대신 장소로 일괄 수정하였습니다.
핀 상세보기 페이지에 접근성 로직이 누락되어 이를 보완하였습니다.
장소 댓글 부분에서 접근성 로직이 누락되어 이를 보완하였습니다.

웹 표준

크로스 브라우징 이슈는 딱히 없었습니다만, 사파리 브라우저에서 checkbox UI가 크게 달라지는 부분이 있어서 이를 @아이크 가 이전에 작업했던 친구들에게 권한 추가 모달의 checkbox UI를 가져와 적용하였습니다. 체크 박스 색이 primary 로 되어 있던 것을 checked 라는 칼라로 새로 지정하였습니다.

🙋🏻 주의 사항

개발 서버 API가 없어졌으므로 운영 서버 API로 변경하였습니다. 테스트 시 이 점 유의해주세요.
접근성 로직에서 PinPreview를 클릭하여 PinDetail 페이지로 넘어가는게 자연스러운 플로우지만 포커스가 순차 적용되어있기에 이 부분이 미흡합니다.

스크린샷

📎 관련 이슈

close #628

레퍼런스

TopicCard 컨테이너 및 리스트도 수정한다. Image 공통 컴포넌트에 aria-hidden 속성을 추가하여 필요한 상황에만 사용할 수 있도록 한다.

aria-live 를 사용하는 로직을 useAriaLive 훅으로 분리하고 aria-label을 추가하여 사용성을 높인다.

cpot5620 · 2023-12-03T14:46:10Z

in progress..

GC-Park

아따 웹 접근성 이거 다 하기 힘들었을텐데 너무 고생했습니다 세인!! 궁금한게 많지는 않아서 바로 approve 할게용 ~!!

GC-Park · 2023-12-05T15:37:09Z

frontend/src/components/AddFavorite/index.tsx

+      tabIndex={ARIA_FOCUS}
+      role="button"


스크린리더에 이로운 role까지 주다니 굿 👍

GC-Park · 2023-12-05T15:39:21Z

frontend/src/constants/index.ts

+
+export const ARIA_FOCUS = 0;


오.. 그 tabIndex를 하나로 통일해도 순서대로 잘 가던가요 ?!!! 저는 안 갔어서 각자 우선순위에 맞게 값을 줬었는데!

네 저도 안되는 걸로 인지했었는데 목표한 탭 포커스가 모두 0으로 순차적이라면 가능하더군요. MDN에 의하면 대화형(input 등) 콘텐츠는 tabIndex의 값이 0이 기본값이고, 비 대화형은 -1이 기본값이라고 하네요. 원래 저희가 목표한 포커스 순서는 보통 input -> input -> textarea -> button 이와 같고 이를 위해 1, 2, 3, 4, 등등 양수값을 지정해주었었죠.

하지만 0, 0, 0, 0 으로 순서만 맞다면 DOM 순서대로 차례로 포커스가 먹고 이는 1, 2, 3, 4 를 지정한것과 같은 효과를 보았습니다. 이 원리에 대해서는 좀 더 자세히 알아볼 필요가있을거 같은데 혹시 알고 계신내용이 있다면 공유 부탁드립니답~

GC-Park · 2023-12-05T15:42:20Z

frontend/src/components/common/Input/SingleComment.tsx

-              <MoreReplyButton onClick={toggleSeeMore}>
+              <MoreReplyButton
+                onClick={toggleSeeMore}
+                aria-label={seeMore ? '답글 숨기기' : '답글 보기'}


오호 역할이 바뀔 때도 aria-label이 구분되게 해주셨군요!!! 👍

GC-Park · 2023-12-05T15:43:47Z

frontend/src/hooks/useAriaLive.ts

오호 실시간 갱신 정보를 읽기 위한 custom hook이라 좋은데요? 처음엔 세인의 강의가 필요했었는데 사용처를 확인하니 이해할 수 있었습니다! 굿!!

요즘 추상화에 대해서 생각이 많아지더군요.. 저희 코드 리팩토링 할 때 토스 진유림님의 발표를 참고하면 좋지 않을까싶습니다.

접근성 지저분하게 있었는데 깔끔해지네여

GC-Park · 2023-12-05T15:58:31Z

frontend/src/components/TopicInfo/index.tsx

@@ -90,6 +90,7 @@ function TopicInfo({

  return (
    <Flex
+      as="article"


as라는 속성을 처음보네요!! 와우 찾아보긴 했는데 웹 성능 최적화를 위하여 추가해주신 걸까요?!

아뇽 이건 시맨틱 태그를 위한 작업입니다. 원래 const Component = styled.div; 이런식으로 선언한 스타일드 컴포넌트라고 해도 <Component as="artcle" ... /> 로 as prop 을 지정할 경우 const Component = styled.article; 로 선언한 것과 같은 효과를 봅니다.

https://styled-components.com/docs/basics#extending-styles

jiwonh423

사실 접근성 거의 모르는데 잘 배웠습니다~

jiwonh423 · 2023-12-06T13:55:42Z

frontend/src/hooks/useAriaLive.ts

접근성 지저분하게 있었는데 깔끔해지네여

semnil5202 added 12 commits November 22, 2023 11:06

refactor: home 및 layout 시맨틱 태그 수정

8a33ab8

refactor: topicCard 및 Container 시맨틱 태그 수정

887fa6e

chore: switch default off eslint 설정

d8c190d

refactor: 불필요한 profile img 제거

99536c8

refactor: banner section 시맨틱 태그 적용

62e696b

refactor: 즐겨찾기, 내토픽리스트 시맨틱 태그 적용

87d26f7

refactor: topicInfo 시맨틱 태그 수정

dd2d2d7

refactor: Map 시맨틱 태그 수정

5a7b491

refactor: topicCard, Container li 및 article 시맨틱 태그 수정

22781fb

refactor: 페이지 컴포넌트 시맨틱 태그 일괄 수정

605a36b

refactor: Search 페이지 layout width 지정 및 nav highlight 수정

c230aec

refactor: PinDetail h2, h3 시맨틱 태그 적용

7ac99a7

semnil5202 added FE 프론트엔드 관련 이슈 우선순위 : 상 refactor 리팩토링 관련 이슈 labels Nov 22, 2023

semnil5202 requested review from jiwonh423 and GC-Park November 22, 2023 08:40

semnil5202 self-assigned this Nov 22, 2023

semnil5202 added 12 commits November 23, 2023 16:31

refactor: Logo aria-label 수정

eb2d6c3

refactor: Banner aria-label 수정

2a8bdbd

refactor: TopicCard 및 Image 공통 컴포넌트 등 aria-label 수정

e20f8b0

TopicCard 컨테이너 및 리스트도 수정한다. Image 공통 컴포넌트에 aria-hidden 속성을 추가하여 필요한 상황에만 사용할 수 있도록 한다.

refactor: topicInfo 접근성 로직 리팩토링

95a4cbe

test: cypress 테스트 data-cy 태그 의존성으로 변경

1873fe8

refactor: PinPreview 및 뽑아오기 접근성 로직 수정

a00a904

aria-live 를 사용하는 로직을 useAriaLive 훅으로 분리하고 aria-label을 추가하여 사용성을 높인다.

refactor: 개발서버 부재에 따른 api 위치 변경

853781c

refactor: URL 주소 공유하기 버튼 접근성 로직 수정

7f725a8

refactor: pinDetail 및 상세보기 버튼 접근성 로직 추가

feffb7c

refactor: 댓글 및 답글 접근성 로직 추가

100f4f9

refactor: 불필요한 console.log 제거

bc9be16

refactor: 지도 추가하기 접근성 로직 수정

eec2293

semnil5202 added 5 commits December 3, 2023 23:26

refactor: 핀 생성 접근성 로직 수정

71a560b

refactor: 각 영역 전체보기 페이지 접근성 로직 수정

d4147d2

refactor: 즐겨찾기 및 나의 지도 접근성 로직 수정

61221a5

refactor: 내 정보 컨테이너 접근성 로직 수정

42a9b76

refactor: 지도, 핀, 닉네임 수정하기 접근성 로직 추가

a2bf4be

design: 크로스 브라우징 UI 일관성을 위해 체크 박스 스타일 조정

f464444

semnil5202 marked this pull request as ready for review December 3, 2023 15:20

GC-Park approved these changes Dec 5, 2023

View reviewed changes

jiwonh423 approved these changes Dec 6, 2023

View reviewed changes

frontend/src/hooks/useAriaLive.ts

Copy link

Collaborator

jiwonh423 Dec 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

접근성 지저분하게 있었는데 깔끔해지네여

semnil5202 merged commit 4e3a419 into develop-FE Dec 29, 2023
1 check passed

semnil5202 deleted the refactor/#628-semantic branch December 29, 2023 10:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] Refactor/#628 시맨틱 태그, 웹 표준, 웹 접근성 검토 #629

[FE] Refactor/#628 시맨틱 태그, 웹 표준, 웹 접근성 검토 #629

semnil5202 commented Nov 22, 2023 •

edited

Loading

cpot5620 commented Dec 3, 2023

GC-Park left a comment

GC-Park Dec 5, 2023

GC-Park Dec 5, 2023

semnil5202 Dec 6, 2023

GC-Park Dec 5, 2023

GC-Park Dec 5, 2023

semnil5202 Dec 6, 2023

jiwonh423 Dec 6, 2023

GC-Park Dec 5, 2023

semnil5202 Dec 6, 2023

jiwonh423 left a comment

jiwonh423 Dec 6, 2023

[FE] Refactor/#628 시맨틱 태그, 웹 표준, 웹 접근성 검토 #629

[FE] Refactor/#628 시맨틱 태그, 웹 표준, 웹 접근성 검토 #629

Conversation

semnil5202 commented Nov 22, 2023 • edited Loading

작업 대상

📄 작업 내용

시맨틱 태그

웹 접근성

웹 표준

🙋🏻 주의 사항

스크린샷

📎 관련 이슈

레퍼런스

cpot5620 commented Dec 3, 2023

GC-Park left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jiwonh423 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

semnil5202 commented Nov 22, 2023 •

edited

Loading