focus시에도 시각적인 요소를 보여주는 경우
웹 접근성 개선작업을 하기전에는 hover시에만 시각적인 요소를 보여주도록 구현하였다가 개선 작업을 하면서 focus시에도 시각적인 요소를 보여주게 되었다.
하지만 고려하지 못한 문제점들이 있었는데 하나의 예시를 들면 다음과 같이 키보드를 사용하는 유저가 아닌 일반적으로 마우스를 사용하는 유저가 클릭을 했을 때, focus가 그대로 되어있어 hover시에만 보여져야 할 시각적인 요소가 남아있게 되었다.
해당 문제를 해결하기위해 버튼 요소의 클릭이벤트 리스너에 이벤트 발생시 반환되는 이벤트 객체의 currentTarget 속성을 활용하여 blur처리를 하도록 변경하였다.
const handleProfileClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.currentTarget.blur();
handleSelectMusic(item);
};focus가 가능한 요소
다음은 검색어를 입력 할 수 있는 입력창과 최근에 검색했던 기록들을 제공하는 최근검색어창이다.
해당 기능에서도 웹 접근성 개선작업을 하며 일반적으로 마우스를 사용하는 유저가 최근 검색어내의 버튼들이 아닌 영역을 클릭했을 때, 최근검색어창이 닫히게 해야할까라는 고민이 있었다.
처음에는 최근검색어창도 결국 검색창과 연관된 영역이라고 생각했기 때문에 버튼들이 아닌 영역을 클릭하여도 보존하고자 다음과 같이 구현하였다.
입력창과 최근검색어창를 감싸는 Div태그에 blur이벤트에 핸들러를 등록한 뒤,
<Styled.Container ref={inputRef} onBlur={handleBlur}>
<SearchForm />
<History />
</Styled.Container>이벤트 핸들러에서 relatedTarget요소가 해당 Div태그(inputRef) 내에 존재하는 요소라면
닫히지 않도록 구현하였다.
const handleBlur = (e: React.FocusEvent<HTMLElement>) => {
if (inputRef.current?.contains(e.relatedTarget)) return;
activeHistory(false);
};
하지만 relatedTarget요소는 focus를 가질 수 있는 요소만 가능하기 때문에 최근검색어창의 버튼이외에 영역을 클릭하면 null값으로 판단되어 닫혀버리게 된다.
그래서 최근검색어창의 영역에 tabIndex 속성을 활용하였다. tabIndex은 HTML 요소가 포커스를 받을 수 있도록 하는 속성으로 위와 같은 상황에서 사용하면 일반적인 div태그도 포커스를 받게 된다.
<Styled.HistoryContainer isShow={isShow} tabIndex={0}>
{/* 최근검색어창영역 */}
</Styled.HistoryContainer>이제는 처음에 고려했던 방식처럼 최근검색어창의 영역을 클릭하여도 닫히지는 않지만 키보드를 사용하는 유저에게는 불필요한 focus과정이 추가되었다.
그래서 고민은 다시 원점으로 돌아오게 되었고 자주 사용하는 오늘의 X 사이트를 참고하여 확인해보니 해당 사이트에서는 버튼 영역들이 아닌 최근검색어창의 버튼이 아닌 영역들을 클릭하였을 때, 닫히도록 구현되어있어 그 방식을 따라가기로 했다.
// tabIndex 속성 삭제
<Styled.HistoryContainer isShow={isShow}>
{/* 최근검색어창영역 */}
</Styled.HistoryContainer>