[label-has-associated-control] add `button` to list of elements that can be associated with a `label`

[huynhducduy]

According to Mdn Web Docs, button is one of the elements that can be associated with label

This PR add button to the list.

[ljharb]

While that's technically true, what would be the point of putting a label on a button, when you can just put the label contents inside the button?

[huynhducduy]

While that's technically true, what would be the point of putting a label on a button, when you can just put the label contents inside the button?

The simplest thing I can think of is to make use of the for attribute to set the label for another element. While this is not recommended and may interfere with assistive technology.

Perhaps we should let this rule follow the spec, and create another rule to disapprove the use of interactive elements like a, button, and headings inside the label.

[ljharb]

The spec isn't the important thing to follow here, though - accessibility is. Our linter rules should forbid standard things that don't increase a11y, and should require nonstandard things if they do increase a11y.

[huynhducduy]

Oh, if that is the case, then we have more things to do in this rule as well (as stated in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#accessibility_concerns)

• disallow button and input with type=button
• disallow interactive elements
• disallow headings in favor of legend and fieldset
• ...maybe more

And those should explicitly mentioned in the document as well

[ljharb]

Sounds good.

[huynhducduy]

Alright, should I close this PR and open an issue for further discussion, then work on it via a future PR, or can I just keep this PR?

[ljharb]

If this PR can be repurposed, that's ideal; if not, close it and file new ones.