Foundation-sites: Buttons should be button elements

[tobireif]

For example at

http://foundation.zurb.com/sites/docs/kitchen-sink.html#button

the buttons are coded as

<a class="button">foo</a>

instead of

<button>foo</button>

The element named "button" would be the right element for buttons, and works nicely, see eg the button at
https://tobireif.com/posts/observing_changes_using_ES6_proxies/
(near the bottom)

I also suspect it would be much more accessible, because screens readers etc would know it's a button and not a link.

[rafibomb]

Hmm, I understand what you're going for. An anchor can look like a button but still be a link, right?

We explain the difference here:
http://foundation.zurb.com/sites/docs/button.html#basics

Is there still an error?

[IamManchanda]

I strongly believe that
<button> ,
<button class='button'> ,
<button class='button primary'>

Should work equal

[joeworkman]

That has always bothered me. <button> should not be the same as <button class="button">

A <button> is standard HTML5 element that I feel should be used for anything that could be used as a button. For example, the close button on a lightbox or nav arrows on a slider. If we style <button> the same as <button class="button"> we are giving designer zero freedom to use then button tag for anything else other than a standard looking button. That is bad.

[kball]

For 7 I think we should separate all styling to classes - elements should be reset and have no styles attached to element

[IamManchanda]

I personally don't think it's bad
But maybe you have a point!

[tobireif]

I think the problem came from when I inspected the button demo

http://foundation.zurb.com/sites/docs/kitchen-sink.html#button

and (each time I checked) found that the respective button (in the Kitchensink demo section named "Button") was coded using an "a" element.

Perhaps it would lessen the confusion of people new to Foundation if you'd have only "button"-element buttons in the kitchen sink section "Button" or have two separate sections for the two types of buttons described in

http://foundation.zurb.com/sites/docs/button.html#basics

Just an idea 😀

[rafibomb]

@joeworkman Foundation 5 styles the <button> tag but in F6 there is no Foundation styles added to a <button> unless the .button class is added.

@tobireif looks like there is mix of both in the example and they are commented.

We're not opposed to a change, though I don't see an issue. If you submit a PR to make the docs more clear, we will merge it in happily :)

[joeworkman]

@rafibomb 🎸 ⭐️

[tobireif]

Perhaps one quick improvement would be to add the link http://foundation.zurb.com/sites/docs/button.html#basics
inside the button demo section:
http://foundation.zurb.com/sites/docs/kitchen-sink.html#button

[andycochran]

Closing. Not a bug.