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?
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>
You can wrap the div in an anchor:
<a href="javascript:void(0)"><div>Hello World!</div></a>