Material-components-web: [MDCButton] html validator error: Element div not allowed as child of element button in this context

[achinchen]

Bug report

Got Error by using w3c html validator to test HTML structure.

I followed the HTML structure which was mentioned on MDCButton Doc, but it caused this issue Element div not allowed as child of element button in this context.

Steps to reproduce

Copy the code down below into w3c validator check option textarea.

<h5 class="mdc-typography mdc-typography--headline5 demo-headline">MDC Button Issue</h5>

<section>
  <h6 class="mdc-typography mdc-typography--headline6">This one will not pass html-validator,
    due to block element "div" inside inline element "button"</h6>
  <button class="mdc-button greet-button">
    <div class="mdc-button__ripple"></div>
    <div class="mdc-button__label">Greet</div>
    <div class="mdc-button__touch"></div>
  </button>
</section>

<section>
  <h6 class="mdc-typography mdc-typography--headline6">This one will pass html-validator</h6>
  <button class="mdc-button greet-button">
    <span class="mdc-button__ripple"></span>
    <span class="mdc-button__label">Greet</span>
    <span class="mdc-button__touch"></span>
  </button>

Actual behavior

The html structure referred in document caused HTML validator issue.

Expected behavior

Dom of UX enhancement shouldn't cause structure error.

Screenshots

Your Environment:

It's not associated environment.

Possible solution

Update document.
If the solution I referred above is accepted, I'm happy to make PR to update it.

[brandondiamond]

Thanks for your bug report! You're definitely correct -- button should only contain "phrasing content". We do apply "display: inline" to the DIV, which avoids issues (validation aside). But there's no reason for us to use <div /> in the examples when a <span /> works better and is valid markup.

We'd greatly appreciate your help with a PR updating the DIVs in the README.