Note-for.me

댓글.md

getByRole('listitem', { name: "" }) 사용이 불가능한 이유

저희가 사용하는 react-testing-library의 경우 접근성 트리를 활용한 테스트를 지원하고 있습니다. 특히 옵션에 name을 넣어주면 접근 가능한 이름을 계산하여 정확한 요소를 찾는데 도움을 줍니다.

참고로 접근 가능한 이름을 찾기 위해서 사용되는 로직은 다음과 같습니다. Accessible Name and Description Computation

getByRole('listitem', { name: "~" } )

저도 예전에 테스트 하면서 listItem에서는 기본적으로 계산 단계가 일어나지 않고, 하위 요소에서 명시적으로 aria-label을 추가해줘야 한다는 사실은 경험적으로는 알고 있었습니다만 요번 기회에 한 번 확실히 알아보고자 찾아봤습니다.

일단 위에 첨부된 문서에서 찾아봤지만 listitem 관련된 내용은 찾을 수 없었습니다. 대신 구글링을 해보니 요런 이슈 문서가 있더라구요

• w3c/aria#1117

요약하자면 APG에서 listitem, rowgroup, term, time 요 4가지 role에 대해서는 접근 가능한 이름 계산을 하지 않겠다는 이야기입니다. (요기서 말하는 APG는 Aria Authuoring Practices Wroking Group을 말한다고 합니다)

왜 지원을 하지 않느냐? 다른건 제쳐두고 listitem만 놓고 보면, paragraph 와 같이 그 자체로 이름을 가져야 하는 요소가 아니라는 뜻입니다.

예를 들어 아래와 같은 리스트가 있다고 해보겠습니다.

주의사항 리스트

• 날카로운 도구는 위험합니당.
• 지저분한 손을 조심하세요.
• 매일매일 하루하루 출근해서 사목에 물을 줘야 합니다. 그렇지 않다면 큰일이 날 것입니다 어쩌구 저쩌구...

접근 가능한 이름을 계산하는 로직에 따라 각 리스트 아이템의 이름을 계산하면, 리스트 내부에 들어가는 텍스트가 리스트 아이템의 이름이 되게 됩니당.

리스트 아이템에 들어가는 내용이 첫 번째, 두 번째 아이템과 같이 짧으면 좋겠지만, 세 번째 리스트 아이템의 내용과 같이 들어있는 컨텐츠의 길이가 길어진다면 스크린 리더가 페이지를 탐색할 때, 본문에 해당하는 리스트 내부 텍스트까지 전부 읽어버리는 불상사가 발생하게 됩니다.

listItem에서 name 속성 계산이 빠지고, 이름이 필요하지 않다라고 여겨진 이유는 다음과 같다고 합니다.

• listitem은 위젯이 아니다

(위젯이란? 유저와 상호작용이 가능한 개별 인터페이스: Discrete user interface object with which the user can interact)

• listitem은 단락(p)과 비슷하다
• listitem은 컨테이너이다
• 작성자가 NAME을 직접 제공하지 않으면 내부의 내용에 들어가 엄청나게 긴 이름을 만든다

제가 aria 문서를 많이 본게 아니라서 요 컨텍스트에서 사용되는 용어들을 잘 몰라서 약간의 오역이 있을 수 있습니다만 큰 맥락에서는 요게 맞는 것 같습니다. 따라서 앞으로 listitem을 사용한 테스트는 listItem 내부에 컨텐츠가 정상적으로 렌더링 되었는지 확인하는 방식을 사용하는게 좋지 않을까 싶습니다.

좀 더 찾아보니 name을 가진 listitem의 role이 바로 menuitem 인 것 같습니다.

https://w3c.github.io/aria/#listitem
listitem에 대한 설명인데, 테이블 하단을 보면
Name From: author 로 기재되어 있네용

https://w3c.github.io/aria/#menuitem
menuitem 의 경우 이렇게 기재되어 있구요 ㅋㅋ

menutiem으로 테스트해보니 name으로 접근이 가능해지네요 ㅎㅎ

// when
    render(
      <ul>
        <li role="menuitem">menu1</li>
        <li role="menuitem">menu2</li>
      </ul>,
    );
    // then
    screen.getByRole('menuitem', { name: 'menu1' });