Shows an error for incorrect usage of .btn

[iamphill]

.btn should only be used on a,button,input or labels

Fixes #297

[zacechola]

👍 LGTM

[cvrebert]

Thanks!

[lordlouis]

Some frameworks like Zen Cart makes buttons from <span>. I use the class in those buttons and the layout is ok. Please consider to add a <span> to the validator or if possible explain why not

[cvrebert]

@lordlouis It's bad semantics (spans don't connote interactivity, buttons and anchors do) and I'm pretty sure it causes accessibility problems. Might be forgivable if you tack on some ARIA attributes...
@patrickhlauke Care to give a few words on the subject?

[patrickhlauke]

indeed, three main issues: <span> isn't keyboard focusable by default, so you have to at least add tabindex="0"; secondly, by default real <button> elements can also be triggered using the SPACE key - this will then need to be patched in using custom JavaScript; and lastly, even once focused and behaving like a proper <button>, any assistive technologies (e.g. screen readers) will have no idea what the currently focused <span> actually is, so won't be able to announce it the same way as a regular button - this can be patched up by adding role="button".

in short, to make sure it works for keyboard users and assistive technology users, you end up with at least <span tabindex="0" role="button">blah</span> plus extra keyup event listeners that check if SPACE was pressed and trigger click() event on the faked button accordingly...a lot of faffing around when simply using <button>blah</button> does everything natively without any further need to mess around with more layers on top...

[cvrebert]

Opened #347.

[cvrebert]

Unexpectedly, to Zen Cart's credit, based on http://demo.zen-cart-themes.com/furniture/ it looks like they do
<a href="..."><span class="btn ...">Button Text</span></a>
rather than
<span class="btn ..." onclick="...">Button Text</span>

I suppose it might be feasible to allow that, but I worry about how many other weird uncommon cases there might be.

[lordlouis]

Thank you very much for answering and follow up on my question. @cvrebert as you explain the <a> encloses the tag <span>. The way it works is running zencart zen_image_button function generating a tag, in this case a <span>. The problem is that for each call to this function, it is enclosed by an <a>. Example:

echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image_button(BUTTON_IMAGE_BACK, BUTTON_RETURN) . '</a>';

If I modify the function so that instead of creating a <span> generates a <button> the validator takes it as correct, but the W3C validator mark the following error:

The element button must not appear as a descendant of the a element.

I hope this information will be helpful.

[cvrebert]

Apparently I'd neglected to add a wiki page for this. Wrote one just now, for the current version of the linter: https://github.com/twbs/bootlint/wiki/E047
@patrickhlauke Would appreciate any feedback you have regarding this wiki page too (ignoring the nested <span> case for now).

[patrickhlauke]

@cvrebert not sure about <label> ... or rather, just a label in isolation isn't really a good example, as it's not focusable by default with kbd either? I might be missing context

[cvrebert]

@patrickhlauke See http://getbootstrap.com/javascript/#buttons-checkbox-radio

[patrickhlauke]

ah i see. well, in those cases although the <label> itself has been given the class, it's only legit because there's also an actual <input> that the <label> is associated with (and THAT is what gets keyboard focus / is actionable). maybe worth separating this case out as a separate part of the wiki entry (pointing out that yes, we allow .btn on <label>, but that ... and pretty much what i just wrote ;) )

[Herst]

How would you style a backwards-compatible upload field while following this standard? Normally you would put a styled span that is "click-transparent" over an enlarged upload input, see https://blueimp.github.io/jQuery-File-Upload/

Now I guess I could just make this span a label without for but is this really the right way to go?