[Accessibility] Preserve list semantics in reorderable Attachment snippets

[woohyun-park]

안녕하세요, 접근성 이슈를 발견하게 되어 이슈 남겨봅니다.

현재 문제

현재 재정렬 기능을 제공하는 ui:attachment-field-reorderable, ui:attachment-display-field-reorderable snippet은 dnd-kit의 activator 속성을 목록 항목인 <li>에 적용하고 있습니다.

<ul class="seed-attachment-input__itemGroup">
  <li
    class="seed-attachment-input-item__root"
    role="button"
    tabindex="0"
    aria-roledescription="draggable"
    aria-describedby="dnd-kit..."
    aria-grabbed="false"
  >
    <img alt="" />
    <span>example.jpg</span>
    <button type="button" aria-label="example.jpg 파일 제거">...</button>
  </li>
</ul>

<ul>의 자식인 <li>는 접근성 트리에서 listitem으로 노출되어야 하지만, dnd-kit이 추가한 role="button"에 의해 목록 항목 시맨틱이 버튼 역할로 대체됩니다 (https://dndkit.com/extend/plugins/accessibility/#aria-attributes). 또한 버튼 역할을 가진 요소 안에 실제 삭제·재시도 버튼이 포함되는 중첩 interactive 구조가 만들어집니다.

따라서 storybook/addon-a11y를 실행해 보았을 때 다음 axe 위반이 발생했습니다.

1. aria-allowed-role: 목록 역할을 가진 <ul>의 자식 <li>에 허용되지 않은 role="button"이 적용됨
2. nested-interactive: 버튼 역할의 <li> 안에 삭제·재시도 버튼이 존재함
3. list: <ul>의 자식이 listitem이 아닌 버튼 역할로 노출됨

실제 VoiceOver를 사용한 접근성 테스트에서도 항목 전체가 하나의 버튼으로 노출되면서 내부의 삭제·재시도 버튼을 독립적으로 탐색하거나 실행하기 어려운 문제가 확인되었습니다.

2026-08-26.7.12.30.online-video-cutter.com.mp4