There are accessibility problems with the sample code

[debiru]

📚 Subject area/topic

/tutorial/3-components/4

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/tutorial/3-components/4/#build-a-hamburger-component

📋 Description of content that is out-of-date or incorrect

The following code is shown as an example of a hamburger component.

<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>

The problematic code was added in #1089.

If the element is intended to be clicked, you should use the <button> element.

If such inappropriate markup is used as an example in official documentation, it may lead to the spread of incorrect implementation among readers.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

Not necessary

[delucis]

Hi @debiru — I think that’s a fair point. An interactive element like this requires interactive semantics and using a <button> would provide these out of the box.

Are you interested in PR-ing updates to the tutorial to make this change?

[debiru]

Thanks for your reply.

I am an experienced OSS contributor, so I am not interested in creating PRs for the sake of experience. If I have time, I can create a PR, but I'm too busy to do so this month, at least.

Well, this issue is not urgent, so if no one has addressed it by next month, I will consider taking care of it myself.