zoom & swipe image Viewer: tab index 문제 해결

정상 작동

문제 배경

tab으로 이동 중에 다음 슬라이드의 확대 도구들에 focus가 되어 원치 않는 동작이 발생했습니다.

원인 분석

<Swiper
        spaceBetween={10}
        slidesPerView={1}
        onSlideChange={handleSlideChange}
        onSwiper={setSwiperInstance}
        initialSlide={initialIndex}
        mousewheel={false}
        nested={true}
        className="h-full w-full"
      >
        {imageMetadatas.images.map((image) => (
          <SwiperSlide key={image.id}>
            <div className="w-full h-full flex items-center justify-center">
              <TransformViwer
                currentImageSrcMetadata={image}
                currentIndex={initialIndex}
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

코드 구조가 swipe를 할 수 있게 swiper 안에 미리 SwiperSlide를 만들어 두는 구조인데 안쪽에 tab-index가 비활성화 되지 않아 있어서 자연스럽게 그곳으로 focus가 옮겨간 것이었습니다.

해결 방안

const ZoomControls = ({
  zoomIn,
  zoomOut,
  resetTransform,
  isCurrentImage,
}: ZoomControlsProps) => {
  return (
    <section
      aria-label="이미지 확대/축소 컨트롤"
      role="toolbar"
      className="flex gap-1 tools absolute bottom-4 right-4 z-10 rounded"
    >
      <button
        type="button"
        aria-label="확대"
        className="text-white bg-black/60 hover:bg-black/80 focus:bg-black/80 rounded cursor-pointer p-4"
        onClick={() => zoomIn()}
        tabIndex={isCurrentImage ? 0 : -1}
      >
        <FiPlus aria-hidden="true" />
      </button>
          ...
    </section>
  );
};

export default ZoomControls;

isCurrentImage란 props를 만들어 해당 값에 따라

tabIndex={isCurrentImage ? 0 : -1} 

tabIndex가 현재 페이지가 아니면 활성화되지 않게 하였습니다.