버튼은 버튼의 자손으로 나타날 수 없습니다.

파일을 행으로 나열하기 위해 디자이너로부터 다음과 같은 모형을 받았다고 가정해 봅시다.



각 행은 클릭할 수 있어야 합니다. 각 행에는 다른 이벤트를 트리거하는 "기타 옵션"버튼도 있습니다. 따라서 두 개의 클릭 가능한 요소가 있으며 하나는 다른 하나를 캡슐화하는 것처럼 보입니다.

나는 semantic HTMl 에서 더 잘하려고 노력하고 있으므로 처음에 a <button> 를 작성하고 기본 스타일을 제거하고 행으로 만들었습니다. 그런 다음 내부에 또 다른 <button>를 중첩했습니다. 그때 나는 반응 경고<button> cannot appear as a descendant of <button>를 경험했습니다.

HTML 버튼there must be no interactive content descendant에 대해 배웠습니다. 대화형 콘텐츠는 content that is specifically intended for user interaction 입니다.

두 가지 옵션이 있습니다.

비의미적 요소<div>를 클릭 가능한 요소로 변환

스타일을 사용하여 하나<button>를 다른 하나

위에 배치

첫 번째는 완전히 가능합니다. 접근성을 위해 몇 가지aria attributes를 포함하기만 하면 됩니다. div는 다음과 같이 보일 수 있습니다.

<div tabindex="0" role="button">
  <div>file title</div>
  <button>other options</button>
</div>

다른 옵션은 조금 더 까다로웠지만 나에게는 더 나은 느낌이었습니다. 시맨틱 HTML의 모든 내용을 알고 있다고 주장하지는 않지만 언급했듯이 가능한 한 올바른 태그를 사용하려고 점점 더 노력하고 있습니다.

<div class='two-buttons'>
  <button class='row undo-button-styling'>
    <div>File 🤖 🎃</div>
  </button>
  <button class='other-options'>other options</button>
</div>

발생해야 하는 많은 스타일 변경이 있지만(상대 부모 위치, 절대 자식 위치, 버튼 스타일 실행 취소) 완성된 코드펜은 다음과 같습니다.

https://codepen.io/devcon/pen/GRqGQxZ