[LAB-7] 파일업로드(div)에 tabindex 속성을 부여했을 때 엔터키 이벤트를 어떻게 줘야 할까요?

hayeonn2 commented 1 year ago

질문 작성자

김하연

문제 상황

리팩토링을 진행하면서 접근성에 맞게 input 요소에 tab 했을 때 포커스가 가도록 바꿔줬습니다.
여기서 파일업로드 는 input 창이 숨겨져있고 label 의 내용이 보여지고 있는 상태입니다.
따라서 저는 label을 감싸고 있는 div에 tabIndex 속성을 부여했고, eslint 에서 경고를 띄워 role="button"을 준 상태입니다.
작업 파일명 : FileUpload.jsx

해당 코드
구현했을 때 문제점

파일업로드에 포커스는 가지만 엔터키를 눌렀을 때 파일업로드 창이 나오지 않습니다.. 이때 엔터키 이벤트를 줘야할 것 같은데 어떤식으로 줘야할지 잘 모르겠습니다. 다른 타 사이트를 참고하려고 많이 들어가봤지만.. 아예 탭키가 이동이 안되는 경우가 더 많아서 잘 모르겠습니다🥲

이런식으로 밑에 파일업로드 창을 나타나게 만들면 되긴 하는데.. 만약 엔터키 이벤트가 되지 않는다면 그냥 이런식으로 구조를 바꾸고 스타일을 줄까도 생각하고 있습니다.

프로젝트 저장소 URL

https://github.com/Likelion-lucky7/DECO/tree/question-write-refac%23129

브랜치명 : question-write-refac#129 입니다!

hayeonn2 commented 1 year ago

div에 tabindex 속성 부여한 것을 다시 지우고 input 의 스타일을 변경해주었습니다!!!

input css

.profile_form {
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}

input file button css

input[type="file"]::file-selector-button {
border: 0;
font-size: 0;
background-color: transparent;
}

input 을 감싸고 있는 부모에게 position: relative 를 주고 위와 같이 적용했습니다. 이 부분에서 잘 작동은 되는데 혹시 접근성 관련해서 잘못 작성한 코드가 있다면 피드백 부탁드립니다!! 🙇‍♀️

추가적으로 확인했을 때 appearance: none; 을 쓰지않아도 정상적으로 잘 작동은 되는 것 같은데 이유가 있을까요?

yamoo9 commented 1 year ago

사용성 & 접근성 개선

@hayeonn2 님. 구현된 UI의 사용성 및 접근성 개선에 관한 의견을 정리합니다. 😃

[사용성] 마우스 커서 모양

마우스 커서(cursor) 모양이 pointer가 되도록 CSS를 사용해 설정하면 사용자로 하여금 마우스로 클릭 가능함을 식별하는데 도움이 됩니다.

[사용성] 컴포넌트 모양 설정

CSS 모양(appearance) 속성은 웹 브라우저 내장 컴포넌트 모양(appearance)을 표시하지 않도록 설정하는데 사용합니다. appearance 속성을 설정한 이유는 웹 브라우저 마다 파일 업로드 인풋의 모양이 다를 수 있기 때문입니다. 확인한 웹 브라우저에서 이 속성 사용과 상관없이 모양이 변경되지 않은 이유는 이미 웹 브라우저 스타일 (user angent stylesheet)에 appearance: none 값이 설정되어 있기 때문입니다.

[사용성] 업로드 영역 모양 설정

이미지를 업로드 한 뒤, 뒷 배경에 점선 모양이 남는 것은 깔끔하지 않습니다. (디자이너 관점)

label 요소에 box-sizing 속성을 설정해 거슬리는 점선을 보이지 않도록 설정해보세요.

FileUpload.module.css 파일의 label 스타일 코드를 아래와 같이 수정합니다.

.profile_label {
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  border: 1px dashed var(--gray-500);
}

.profile_label img {
  position: relative;
  z-index: -1;
  border-radius: inherit;
}

[접근성] 접근 가능한 화면 감춤

업로드 인풋의 선택된 파일 이름 텍스트 값을 감출 목적으로 글자 크기를 0으로 설정하는 것은 적절하지 않습니다. 일부 스크린 리더에서 콘텐츠를 읽지 못할 수 있기 때문입니다. 이런 경우 불투명도(opacity) 속성을 사용해 화면에서 감추는 것이 적절합니다.

FileUpload.module.css 파일의 스타일 코드를 아래와 같이 수정해보세요.

.profile_form {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

input[type="file"]::file-selector-button {
  opacity: 0;
}

[접근성] 적절한 파일 이름

업로드 할 이미지의 대체 텍스트가 일괄적으로 "프로필 이미지"로 설정되는 것은 적절하지 않습니다. 파일 이름으로 대체 텍스트를 설정하거나, 비워두는 것이 좋은 선택입니다.

파일 이름으로 설정하는 것은 알 수 없는 파일 이름(예: diw82hhduh.jpg)일 가능성이 있어 비워두는 것이 더 나은 선택입니다.

FileUpload.jsx 파일 코드를 아래와 같이 수정해보세요.

<label htmlFor={id} className={styles.profile_label}>
  <span className={styles.profile_image}>파일업로드</span>
  {imgFile && <img src={imgFile} alt="" />}
</label>

[접근성] 초점 표시

업로드 인풋 요소에 초점이 이동 되어도 opacity: 0 설정으로 인해 초점이 표시되지 않습니다. 이 문제는 업로드 인풋 요소 래퍼인 imgBox 요소에 :focus-within 가상 클래스를 설정해 해결할 수 있습니다.

FileUpload.module.css 파일 스타일 코드를 아래와 같이 수정합니다.

.imgBox {
  position: relative;
}

.imgBox:focus-within {
  box-shadow: 0 0 0 2px #015fcc;
  border-radius: 4px;
}

가이드 파일

가이드 한 내용이 반영된 ZIP 파일을 첨부합니다. 😉

FileUpload.zip

yamoo9 / likelion-FEQA