iOS fix for role="button" elements; [fixes #15935]

[patrickhlauke]

Fixes "clickability" issue (and more generally, the firing of events such as focus as well) for traditionally non-focusable elements with role="button" (see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)

Fixes #15935

[patrickhlauke]

/cc @mdo

[cvrebert]

I'm 👍 on this.

[slaneyrw]

Carousel and Tab also suffer from this.

We added

[data-toggle="collapse"], [data-toggle="tab"] {
  cursor: pointer;
}

to our site less. Can you add this to the pull request, otherwise I will create my own

[cvrebert]

@slaneyrw You meant Collapse, not Carousel, right?

[cvrebert]

@slaneyrw Both of those cases involve anchors with hrefs, so they should (and AFAICT do) work fine as-is, unless your markup is wrong or something.

[patrickhlauke]

In order to be accessible though, the collapse toggles should be <button> elements or be given a role="button" (covered by this PR), and the tab toggles should be <a href...>. Wonder if adding those extra cursor:pointer directives won't simply encourage bad usage...("hey, it works on my phone, so what's the deal?")

[cvrebert]

the tab toggles should be <a href...>

They already are.

[slaneyrw]

Yes..lol. collapse is used as the data-toggle value
On 02/03/2015 8:59 PM, "Chris Rebert" notifications@github.com wrote:

@slaneyrw https://github.com/slaneyrw You meant Collapse, not Carousel,
right?

—
Reply to this email directly or view it on GitHub
#15947 (comment).

[patrickhlauke]

They already are.

what i meant was: if you follow our examples, you should already be using <a href=...>, which has no clickability/focusability problem in iOS. but yeah, i'm tending to say no to the extra CSS and just keep this PR focused on the role[button] scenario only.

[XhmikosR]

@patrickhlauke #15935 (comment)

[cvrebert]

X-Ref: necolas/normalize.css#371 , necolas/normalize.css#379