Cannot use <div> inside of <button>, but clickable divs are considered bad. What is &quo-CodePudding

I am building a React App which takes the form of a calendar where the users should be able to click on days on the calendar. These days are represented by large-ish squares, so that they can contain information for that day. For accessibility reasons, using <button>s seemed to be the wisest option, but my research (Why can't a <button> element contain a <div>?) (https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element) indicates that putting divs inside of buttons is not correct. The only other option I can think of would be to make the days into <div>s of their own, but make them clickable and manually give them tabIndex and role features as appropriate for accessibility purposes.

What is the correct html tag or approach for a clickable area that should also contain possibly multiple <div>s inside of it?

CodePudding user response：

You can use <span> elements within a <button> and it be valid HTML.

<button>
  <span>Three Different Spans</span>
  <span>But Perfectly Valid</span>
  <span>HTML!</span>
</button>

As you can style a span any way you want this shouldn't cause you any issues.

However: if you find that you need a clickable area (that you think should be a button, which certainly sounds correct for a calendar!) is requiring several containers, the odds are that you are designing it incorrectly and may need to reconsider the design.

You could fall back on CSS :before and :after pseudo-selectors to add the complexity you require (without seeing the design it is hard to give any solid advice).

If you really aren't sure, you could add an aria-label to the <button> element and (yet again depending on content) add aria-hidden="true" to all internal items.

<button aria-label="function of the button, this will be read to screen readers and other assistive tech">
  <!-- this should be unnecessary, but depending on the content this is a technique to fix any issues caused by the button content -->
  <span aria-hidden="true">Three Different Spans</span>
  <span aria-hidden="true">But Perfectly Valid</span>
  <span aria-hidden="true">HTML!</span>
</button>

CodePudding user response：

You can wrap the div in an anchor:

<a href="javascript:void(0)"><div>Hello World!</div></a>