Accessibility test/#136 #157

seonghunYang · 2024-11-27T07:59:24Z

📌 작업 내용

구현 내용 및 작업 했던 내역

컴포넌트 접근성 개선 - 접근성 테스트 결과 47개 실패에서 전체 통과로 개선

개선 전:

개선 후:
스토리북에 접근성(a11y) 애드온 설정
WCAG 표준 AA 기준에 따른 색상 명암비 개선
버튼 컴포넌트를 다형성(Polymorphic) 컴포넌트로 변경하여 스타일을 재사용
스크롤 가능한 컴포넌트에 키보드 접근성 추가
ARIA hidden 요소의 자식 요소가 포커스되지 않도록 수정

🤔 고민 했던 부분

학우들을 대상으로 하는 서비스인 만큼, 다양한 학생들의 접근성을 고려해야 한다고 판단하여 컴포넌트 접근성 개선 작업을 진행하였습니다.
a11y 접근성 테스트 결과, 대부분의 문제는 'Elements must meet minimum color contrast ratio thresholds'로, 명암비가 기준치보다 낮았습니다. 이에 기존 색상 톤을 유지하면서 명암비를 AA 기준에 맞게 수정하였습니다.
result-card에서 button의 outline 스타일을 재사용하기 위해 button 컴포넌트를 사용하여 'ARIA role should be appropriate for the element' 접근성 에러가 발생했습니다. 이 문제를 해결하기 위해 버튼 컴포넌트를 다형성(Polymorphic) 컴포넌트로 개선하여 스타일만 재사용할 수 있도록 하였습니다.

🔊 도움이 필요한 부분

각자 담당하고 있는 도메인에서 변경으로 인한 문제가 없는지 검토해주시면 감사하겠습니다.

…accessibility testing

… dependencies

텍스트 색과 배경색의 대비를 강조하기 위해 컬러 수정

텍스트 색과 배경색의 색상 대비율을 높이기 위해 수정

button 스타일을 재사용하기 위해 수정

github-actions · 2024-11-27T08:04:53Z

🚀storybook: https://65ccb85d5afe55a024495bc0-synwrjjdvz.chromatic.com/

yougyung

수고 많으셨어요 👍

yougyung · 2024-11-28T10:08:15Z

app/ui/result/result-category-card/result-category-card.tsx

@@ -35,10 +35,10 @@ const displaySeveralMajor = (category: ResultCategoryKey) => {
    return (
      <>
        <Responsive maxWidth={767}>
-          <Button label={majorType} variant="outlined" size="xs" role="none presentation" className="p-1 text-[10px]" />
+          <Button label={majorType} variant="outlined" size="xs" as="div" className="p-1 text-[10px]" />


as keyword를 통해 rendering할 tag를 변경시킬 수 있군요! 새롭게 알았어요 👍

yougyung · 2024-11-28T10:13:22Z

app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx

+          size="default"
+          data-cy={`taken-lecture-delete-model-trigger-${item.id}`}
+          data-testid="taken-lecture-delete-button"
+          className="opacity-0 hover:opacity-100"


Suggested change

className="opacity-0 hover:opacity-100"

className="opacity-0 group-hover:opacity-100"

변경 과정에서 누락된 것 일까요?!

기존에는 button hover 시 div 태그의 투명도를 조절하기 위해 group 접두사가 필요했으나, 접근성 문제로 div가 제거되면서 group 접두사도 함께 제거하였습니다.

의도된 부분이었군요! group 접두사가 제거되면서 아래 동영상과 같이 삭제 버튼의 노출 방식이 변경되었는데, 사용자가 예상하기 어려울 수 있다는 우려가 드네요.

2024-11-29.11.31.06.mov

아, 제가 동작방식을 오해했네요. 원래 위 영상대로 동작하는 줄 알고 수정했던 것 같습니다. 다시 수정하여 반영했습니다. 놓친 부분을 짚어주셔서 감사합니다!

c404cd5

yougyung · 2024-11-28T10:19:16Z

app/ui/view/molecule/list/list-root.tsx

@@ -21,6 +21,7 @@ export function ListRoot<T extends ListRow>({ data, render, isScrollList = false
        isScrollList && 'h-72 overflow-auto',
        hasNotData && 'flex justify-center items-center',
      )}
+      tabIndex={0}


이 경우 각 row가 아닌, list자체에 focus가 잡힐 것 같은데, 의도하신 부분인가요?!

네, 'Scrollable region must have keyboard access' 규칙을 준수하기 위해 목록 자체에 포커스를 주고자 했습니다!

github-actions · 2024-11-29T03:50:53Z

🚀storybook: https://65ccb85d5afe55a024495bc0-gdqeglaowd.chromatic.com/

github-actions · 2024-11-29T04:13:23Z

🚀storybook: https://65ccb85d5afe55a024495bc0-pzrfvcfhrl.chromatic.com/

gahyuun

고생하셨습니다~!

gahyuun · 2024-11-29T07:34:12Z

app/ui/view/molecule/alert-destructive/alert-destructive.tsx

접근성 테스트 진행하면서 발생한 문제는 아닌 것 같지만,, 정렬이 맞춰지면 좋을 것 같아요!
근데 이 부분은 제가 나중에 스타일 수정 작업하려했는데 그때 같이 해도 될 것 같아요~

이거 제가 수정해서 올릴게요!

수정했습니다!
1b2fbc4

gahyuun · 2024-11-29T08:52:28Z

app/ui/view/atom/button/button.tsx

버튼 컴포넌트를 as 속성을 통해 스타일을 재사용할 수 있는게 인상 깊었어요! 다형성 컴포넌트를 만드는게 기능 확장이 되었을 때도 좋을 것 같아요 많이 배울 수 있었습니다 👍🏻
다만 제가 확인해보았을 때 variant="outlined" 속성을 사용하는 곳이 result-card 컴포넌트뿐이더라구요
그렇다면 result-card가 Button 컴포넌트를 굳이 사용하지 않고 outlined 스타일을 가진 요소를 만들어도 되지 않았을까? Button의 스타일을 재사용한다고 볼 수 있을까? 라고 생각했어요..!
혹시 이 부분에 대해서는 어떻게 생각하시나요?

우선 접근성 개선 작업을 진행하면서, 제가 작업하지 않은 부분이다 보니 미처 파악하지 못한 의도가 있을 수 있어서, 기존 기능을 최대한 유지하면서 수정하려 했습니다.

저도 동일한 고민을 했는데, 해당 디자인이 저희 outlined button과 완전히 일치하고 이게 의도된 거라면 새로운 컴포넌트를 만들기보다는 기존 button 컴포넌트의 스타일을 재사용하는 것도 효율적이라고 판단하여 이렇게 수정했습니다.

outline label을 만들어 button 컴포넌트를 이 컴포넌트로 layer하는 방식도 고려했지만, 이는 button 컴포넌트의 cva 스타일 규정 방식과 통일성이 깨질 수 있어서 기존 button 컴포넌트를 활용하는 방식을 선택했습니다.

이 부분 작업을 진행한 유경 님 생각이 궁금하네요!

먼저, 해당 디자인을 계획할 당시에는 디자인 시스템을 최대한 이용해 통일된 이미지를 전달하고자 버튼의 outliened을 의도적으로 가져왔어요. 개발 의도가 button의 ui를 재사용했던 목적이라 다형성 컴포넌트로 전환하는 방식이 좋은 접근이라고 느꼈습니다.

outlined 스타일이 저희 디자인 시스템에 없었더라면 해당 요소를 생성하는 것도 좋아보이지만, 디자인 시스템에 버튼의 종류로서 존재하기때문에 button의 스타일을 재사용한다고 볼 수 있다고 생각합니다 !

아하 개발 의도가 button ui 재사용이었다면 다형성 컴포넌트가 더 적합할 것 같네요~! 확인했습니다:)

github-actions · 2024-11-29T11:53:21Z

🚀storybook: https://65ccb85d5afe55a024495bc0-thdtosahrv.chromatic.com/

github-actions · 2024-11-29T14:46:19Z

🚀storybook: https://65ccb85d5afe55a024495bc0-jafliuinnf.chromatic.com/

seonghunYang added 23 commits July 16, 2024 09:09

chore: add @storybook/addon-a11y and axe-playwright dependencies

1f0498d

chore: add @storybook/addon-a11y for accessibility testing

61b9c70

chore: Add test runner configuration for accessibility testing

6eb399f

chore: Update npm dependencies and add test runner configuration for …

957c5b0

…accessibility testing

chore: Update test runner configuration for accessibility testing and…

afe24d9

… dependencies

chore: merge branch 'main' into Accessibility-test/#136

e5d3903

fix: button의 variant 속성이 list일 때 배경 색 수정

7ddfffd

텍스트 색과 배경색의 대비를 강조하기 위해 컬러 수정

fix: text variant button의 색 명도를 수정

d283831

텍스트 색과 배경색의 색상 대비율을 높이기 위해 수정

fix: button이 loading시에도 diable 되도록 수정

8c433e3

fix: LabelContainer 컴포넌트의 색상 대비 변경

0c633cc

fix: 색상 대비를 주기 위한 컬러 팔레트 수정

47cd597

fix: storybook text-input에 label을 추가

574ac5d

fix: destructive Alert 컴포넌트의 색상 대비 변경

8144e43

fix: AlertDestructive 컴포넌트의 title이 없을 때 동작 변경

afe9f49

fix: scroll list가 키보드로 탐색가능하도록 변경

b46d061

fix: select storybook에 label 추가

5900734

fix: point-blue 색상 변경

d9ec4d9

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

723fe00

fix: deletebutton 구조 변경

11c3635

fix: gray-6를 대비를 위해 gray-7로 변경

a068ddd

fix: TextInput 컴포넌트의 diabled 시 색상 대비 변경

41ab515

feat: button을 다형성 컴포넌트로 변경

315e954

button 스타일을 재사용하기 위해 수정

fix: button에 잘못된 role이 들어가는 문제 수정

31e05f1

seonghunYang requested review from yougyung and gahyuun as code owners November 27, 2024 07:59

fix: 빌드 스크립트를 크로마틱에 맞게 수정

b31e5c8

yougyung reviewed Nov 28, 2024

View reviewed changes

fix: delete 버튼이 row에 hover되더라도 노출되도록 수정

c404cd5

yougyung previously approved these changes Nov 29, 2024

View reviewed changes

fix: ARIA hidden 요소의 자식 요소가 포커스되지 않도록 수정

3292f0e

seonghunYang dismissed yougyung’s stale review via 3292f0e November 29, 2024 04:11

gahyuun reviewed Nov 29, 2024

View reviewed changes

fix: AlertDestructive 컴포넌트 정렬 수정

238a429

fix: alert translate 속성 변경

1b2fbc4

gahyuun approved these changes Nov 29, 2024

View reviewed changes

yougyung approved these changes Nov 30, 2024

View reviewed changes

seonghunYang merged commit 0d855d0 into main Nov 30, 2024
2 of 3 checks passed

seonghunYang deleted the Accessibility-test/#136 branch November 30, 2024 12:39

seonghunYang self-assigned this Dec 1, 2024

Myongji-Graduate deleted a comment from gahyuun Dec 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessibility test/#136 #157

Accessibility test/#136 #157

seonghunYang commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024

yougyung left a comment

yougyung Nov 28, 2024

yougyung Nov 28, 2024

seonghunYang Nov 29, 2024

yougyung Nov 29, 2024

seonghunYang Nov 29, 2024

yougyung Nov 28, 2024

seonghunYang Nov 29, 2024

github-actions bot commented Nov 29, 2024

github-actions bot commented Nov 29, 2024

gahyuun left a comment

gahyuun Nov 29, 2024

seonghunYang Nov 29, 2024

seonghunYang Nov 29, 2024

gahyuun Nov 29, 2024

seonghunYang Nov 29, 2024 •

edited

Loading

yougyung Nov 29, 2024

gahyuun Nov 29, 2024

github-actions bot commented Nov 29, 2024

github-actions bot commented Nov 29, 2024

	className="opacity-0 hover:opacity-100"
	className="opacity-0 group-hover:opacity-100"

Accessibility test/#136 #157

Accessibility test/#136 #157

Conversation

seonghunYang commented Nov 27, 2024 • edited Loading

📌 작업 내용

🤔 고민 했던 부분

🔊 도움이 필요한 부분

github-actions bot commented Nov 27, 2024

yougyung 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

github-actions bot commented Nov 29, 2024

github-actions bot commented Nov 29, 2024

gahyuun 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

seonghunYang Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 29, 2024

github-actions bot commented Nov 29, 2024

seonghunYang commented Nov 27, 2024 •

edited

Loading

seonghunYang Nov 29, 2024 •

edited

Loading