zoom & swipe image Viewer: 툴팁 구현

 

문제 배경:

단축키를 신나게 등록해 놔도 사용자가 모른다면 참으로 어리석은 일이 아닐 수 없습니다.

후에 이것을 깨달아 툴팁을 등록하게 됩니다.

 

해결: 

radix-ui/react-tooltip을 사용했습니다

구현이 간단하고 이 프로젝트에 사용하고 있는 tailwind와 잘 호환이 된다고 하여 사용했습니다.

https://www.radix-ui.com/primitives/docs/components/tooltip#installation

Tooltip – Radix Primitives

적용하는 과정은 다음과 같습니다

<Tooltip>
  <TooltipTrigger asChild>
    <button
      type="button"
      className="text-white bg-black/60 hover:bg-black/80 focus:bg-black/80 rounded cursor-pointer p-4"
      onClick={() => zoomOut()}
      tabIndex={isCurrentImage ? 0 : -1}
      aria-label="축소(-)"
    >
      <FiMinus aria-hidden="true" />
    </button>
  </TooltipTrigger>
  <TooltipContent>
    <p>축소(-)</p>
  </TooltipContent>
</Tooltip>

적용하는 방법이 매우 간단합니다.

 

접근성

• 이런 툴팁 라이브러리를 사용할 때 기본적으로 접근성에 관련된 사항들을 처리해준다고 하여 aria-label을 지우고 라이트하우스 테스트를 진행했었습니다. 하지만 읽히지 않았고 점수가 낮게 나와 다시 추가 했습니다.
• 시각 장애인에게 short-cut을 알려주기위해 방법을 찾던 중 aria-keyshortcuts이라는 속성을 알게 되었습니다. 실제로 aria-label에 넣는 것보다 따로 분리를 하기 때문에 좋을 것이라 생각해서 적용해봤는데 지금 테스팅을 하고 있는 nvda 리더기에서 읽히지 않았습니다. 찾아보니 지원되는 것도 있고 안되는 것도 있다고 합니다. 그래서 원래대로 다 지원되는 aria-label에 다 넣고 ()로 구분하기로 했습니다.