서론

react-wai를 보면 이게 배포하면 문제없나? 라고 테스트하기 위해 package.json에서 몇 가지 변경사항만 수정해서 다시 재배포를 한 적이 있다. 사실 이런 설정만 건드리는 것은 publish가 되어서는 안된다고 생각이 되었지만, 방법을 몰라서 접어두었었다. 최근에 Ellis님과 npm 배포전 로컬 테스트에 대한 이야기를 듣고 이를 해결하기로 했다.

npm link를 이용하자

npm link

npm link를 사용하면 현재 커맨드에 지정된 경로의 패키지가 로컬로 저장된다. 아무래도, 텍스트로만 보면 이해가 안될 수 있으니 react-wai 프로젝트를 기준으로 설명하면 다음과 같다.

배포 폴더 열기

npm run deploy
//주의 이 커맨드는 프로젝트마다 지정한 것이 뜨기 때문에 본인 프로젝트에 맞게 설정을 해야합니다

우선 react-wai 같은 경우 deploy scripts를 사용하면, 우리가 배포하고자하는 상태의 폴더가 새창에 뜬다.

link를 이용해 로컬에 배포하기

npm link

npm link를 이용하면 다음과 같이 글로벌 모듈로 설치가 된다.

다른 프로젝트에서 로컬에 설치한 모듈 불러오기

npm link -S <project-name>

사용할 프로젝트 폴더에 들어가서, npm i <사용할 프로젝트>를 입력하는 것처럼 npm link -S <사용할 프로젝트>를 사용하면 로컬에 설치된 모듈을 프로젝트에서 사용할 수 있게 된다. 

모듈이 맞게 설치되었는지 확인해보자

아무래도 package.json에 설치된 것이 안보이기 때문에 맞게 설치되었나? 의문이 들 수 있다. 이때는 패키지에 설치된 것을 불러들이고, 마우스로 설정된 경로를 이용해서 확인해보면 link가 알맞게 되어있는지 확인할 수 있다.

link가 필요없어진 경우

로컬에 배포한 패키지를 그만써야하는 경우에는 다음과 같은 커맨드로 link를 끊을 수 있다.

npm r -g <project_name>

마무리

이번에 문제를 해결하면서, 나도 불편한건 남도 불편하다는 것을 느꼈다. 프로젝트 커맨드중에 cp와 같은 커맨드는 powershell에서 실행이 안되는 현상 역시 한번 손봐야할 것같다. 

접근성 핵심 사항

• 키보드 내비게이션을 적용하여 효율적으로 탐색 가능하도록 한다.
• aria-orientation attribute를 사용하여 리스트의 방향을 알 수 있도록 한다.

구현 사항

키보드 네비게이션

• direction prop으로 내비게이션 방향을 결정합니다(row/col).
  • direction이 row인 경우, ←→키로 포커스를 이동합니다. ↑↓ 는 동작하지 않습니다.
  • direction이 col인 경우, ↑↓키로 포커스를 이동합니다. ←→ 는 동작하지 않습니다.
• 키 설명
  • ↑/←: 이전 요소로 포커스를 이동합니다. 현재 포커스 된 요소가 계층 내 처음 요소일 경우 이동하지 않습니다.
  • ↓/→: 다음 요소로 포커스를 이동합니다. 현재 포커스된 요소가 계층 내 마지막 요소일 경우 이동하지 않습니다.
  • Home(macOS의 경우 ⌘+↑/←): 리스트 내 첫 번째 요소로 포커스를 이동합니다.
  • End(macOS의 경우 ⌘+↓/→): 리스트 내 마지막 요소로 포커스를 이동합니다.

고민한 사항

tab sequence 관리 - li태그 자체에 포커스를 주는 것이 옳은가?

HTML요소가 포커스를 가지는 경우는 크게 다음과 같다

• 상호작용 가능한 경우(button, a 태그 등).
• 의미 있는 정보를 담고 있는 경우(아티클의 본문 등)

li는 리스트 아이템이 가지는 콘텐츠를 묶어주는 컨테이너 역할을 하는 요소이다. 따라서 위 사항에 해당하지 않으므로, 그 자체로 포커스를 가질 필요는 없다고 판단하여 li를 거치지 않고 내부 요소로 바로 포커스를 이동하도록 구현하였다.

하지만 li 내부에 포커스를 받을 수 있는 요소 개수가 많아질 경우, 해당 요소들을 모두 거쳐야 다음 li로 포커스를 옮길 수 있기 때문에 탐색이 불편해진다는 문제가 발생한다.

그러한 경우 li요소를 포커스 가능한 요소로 구현하고, tab sequence 계층을 추가한다면 문제를 해결할 수 있을 것으로 보인다. 다시 말해, 마치 li가 탭 역할을 하고 li 내부의 콘텐츠가 탭패널 역할을 하는 것처럼 키보드 내비게이션을 구현한다면 유저 입장에서는 li사이를 빠르게 이동하며 원하는 콘텐츠를 탐색하고, 필요한 경우 탭으로 진입함으로써 웹페이지를 더 빠르고 편리하게 이용할 수 있을 것이다.

결론적으로, 보다 사용성이 좋은 키보드 내비게이션을 구현하려면 tab sequence를 제어해야한다. 이때 탭메뉴, 중첩리스트 등 유사한 키보드 네비게이션을 지원하는 다른 컴포넌트와의 상호작용을 고려해야 하며, 제어해야 하는 키의 종류가 늘어남에 따라 브라우저나 OS 기본 동작과의 충돌도 고려해야 한다. 따라서 해당 이슈는 지금 바로 List컴포넌트의 props으로 제어하도록 구현하지 않고 추후에 업데이트하는 것으로 결정하였다.