Remove cursor: pointer;

[mdo]

Turns out using cursor: pointer on actions (e.g., buttons) is incorrect. I removed the cursor: pointer from our buttons in Alpha 6 knowing this, but I left the rest of the properties throughout the codebase for another time. This PR aims to finish that work, removing nearly all the remaining cursor: pointer properties from our CSS.

I still need to figure out the role="button" one for iOS click-ability though.

This would also fix #21781.

---

References

From the W3C spec:

pointer
The cursor is a pointer that indicates a link.

From Microsoft's design guidelines:

To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don't need a hand pointer. The hand pointer must mean "this target is a link" and nothing else.

Regarding the cursor pointer from Apple's HIG:

The content is a URL link.

[patrickhlauke]

what's the issue with iOS clickability? seems that a vanilla element is tappable as long as it has a click handler (and event delegation should work fine as well, see https://patrickhlauke.github.io/getting-touchy-presentation/#220)

[patrickhlauke]

Random test https://jsbin.com/zarituwaba/ works fine for me on iOS

[mdo]

Guess there isn't an issue then. 😆 I was just going by the code comment there. I'll happily remove the last reference there if it indeed isn't needed.

[ryanburnett]

@mdo I think button hover should retain cursor: pointer. The W3C and Apple HIG both state that it's for a link, which a button does contain. For example, go to http://www.apple.com/ and mouse over the search or shopping bag icons and you'll get a pointer. Go to https://www.microsoft.com/en-us/ and mouse over the search or cart icons and you'll get a pointer. Go to https://www.w3.org/ and mouse over the "Go" button in the top right and you'll get a pointer. If the three sites you reference all use pointers for buttons I think Bootstrap should too.

P.S. Keep up the great work on Bootstrap <3

[patrickhlauke]

@ryanburnett and this PR does not remove the hand cursor for links styled visually as buttons. it simply removes other situations where cursor: pointer is forced inappropriately, and leaves it up to the browser to handle the cursor as it normally would for the appropriate elements

[patrickhlauke]

it's for a link, which a button does contain

links and buttons (actual buttons that action an in-page change, submit a form, or similar) are different beasts though.

the examples you have from apple, microsoft and w3 actually go directly against the W3C and Apple HIG, as they're also forcing cursor:pointer on things that are NOT links (only one that is a link in your examples is the Microsoft cart icon, as that navigates to a new page - at least in my case, with an empty cart)

[patrickhlauke]

if designers/developers do want to have cursor:pointer for things that normally shouldn't have that cursor, they can add it themselves. but out of the box, bootstrap now follows the browser's default (e.g. if it's a <button> or similar, cursor doesn't change)

[joppuyo]

In my opinion this change it a bit confusing, I have some controls in my application that use the btn class. For technical reasons, some of those use <button> element and others <a>. In Bootstrap 4, hovering over some of them shows the cursor but others show the pointer leading to an inconsistent experience.

I preferred the old way of "normalizing" the button styles regardless of whether they are a <button> or <a> so they look and feel the same.

Luckily it's only one line of code to change the behavior back to old but it would be nice if it worked out of the box.

[nextgenthemes]

I don't get it. I don't care what the specs say I don't think there its "indicating better" when I hover over a button and nothing happens. If there were different cursors for buttons and links this would be a different, this way just nothing happens for buttons so for transparent buttons or whatever that is not changes their styles on hover there is no indication at all, end even with style changes I think a cursor indication is always useful, also for accessibility ...

[browner12]

maybe this would be better made into a variable, so users could toggle it on and off based on personal preference?

[spongessuck]

If you want .btn to show the pointer:

.btn {
  cursor: pointer;
}

Yes, this PR caused unexpected changes, but I agree that it's better to stick to the W3C guidelines by default, especially when it's so trivial for developers to override it.

[purple-penguin7]

This change defies logic. You're conforming to spec for the sake of conforming to spec, not because it actually serves a constructive purpose. The irony in all of this is that the specs and guidelines aren't even followed by the groups giving them...

W3C's own website styles buttons to have a pointer.
Microsoft's own website styles buttons to have a pointer.
Apple's own website styles buttons to have a pointer.

A mass majority of your users will overwrite this style. Is it easy? Sure, but that's completely irrelevant. Why make a change that 99% of your users will be forced to overwrite. Worse yet, the small fraction of people who don't will actually provide a worse UX to their users in terms of usability.

Guess which one has a more adverse impact?

A user hovering over a button and seeing the cursor change (i.e. pretty much what every computer user has been conditioned to expect for the past decade).

• or -

A user hovering over a button, not seeing the cursor change, and then wondering if it's disabled, not clickable, etc.

The latter is a much worse UX.

When a spec breaks basic user expectations, the spec is wrong. If W3C comes out tomorrow and states all buttons must be blue, will Bootstrap conform to that too? I understand the importance of standards and trying to follow specs as closely as possible, but at some point basic logic and reasoning have to come into play. When there literally isn't a single constructive reason to make this change other than W3C says the pointer means a link, the change shouldn't be made. Users don't see a pointer and think, "Oh, this must be an anchor element that I can click to take me to another page," they think, "I can click or otherwise interact with this."

This isn't a constructive change.

[nextgenthemes]

Totally agree, fun fact is the issue he thought this fixed #21781 but that was reopened because this actually fixed nothing. Just makes horrible UX.

But I have to say I checked w3.org and their search button has in fact no pointer style on hover. Maybe somewhere else on the site but it would be too funny if they would actually have

button {
  cursor: pointer;
}

in their stylesheet.

[purple-penguin7]

They actually have exactly that (well, almost, they use a class called button instead of applying it to the element itself) :p

https://www.w3.org/2008/site/css/minimum

Check out the button class that they subsequently apply to the top navbar / main "Go" in the top right on their website.

[panva]

are button-looking elements (e.g. a.btn) intended to still have the cursor? (alpha.6 still does)

[patrickhlauke]

@panva alpha.6 is older than this PR (which targets the first beta). explicit setting of cursor now doesn't happen anymore for buttons etc. what you WILL see though is that browsers will use whatever their default cursor is. if you're using an <a href="..."> link (whether styled as a .btn or not) browsers will show the pointer cursor by default.

[panva]

@patrickhlauke that's good news! way better than stripping it, thanks for the insight.

[matejlednar]

What's indicator (visual feedback for user) that element is clickable, e.g. any icon on the screen (difference between clickable icon and static background image / standard image)?

[spongessuck]

Both buttons and anchors have hover styling, making it clear that they're interactive.

…

On Mon, Jun 5, 2017, 4:10 PM Matej Lednár ***@***.***> wrote: What's indicator (visual feedback for user) that element is clickable, e.g. any icon on the screen (difference between clickable icon and static background image / standard image)? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#21812 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGE0Tr01bTI4L7T5F0w1bqLMHjMibLyqks5sBGDPgaJpZM4Lqeib> .

[matejlednar]

Hamburger icon is SVG. There si no way how to change color via CSS. I tried to change stroke color and use encodingURI for correct string format but stroke color was always removed, don't know why.

[mikebronner]

I would like to suggest that the pointer be retained on buttons that are styled and behave as links, for example btn-link.

[lucasdavidferrero]

I think that 'cursor: pointer' should be an utility because we use it a lot in differents elements, so I've opened an issue (#23709).

[printercu]

@mdo links and quotes from first comment seem to be related to desktop applications (except w3c, see UPD2). MSDN and apple.com use cursor: pointer for buttons (ex., in sign-in forms).

UPD. Having buttons with default cursor is confusing in forms like:

<button class='btn btn-primary' type='submit'>Save</button>
<a class='btn btn-secondary' href='/back'>Cancel</a>

UPD2. https://www.w3.org/ has .button { cursor: pointer } style.

UPD3. Comparing to desktop apps, I think the main difference is that web-page contains mostly static content (not-interactive) but desktop app usually almost totally interactive. So it has become usual to use pointer cursor to help users distinguish interactive elements on webpages. Especially with custom-styled inputs. Because of this I prefer to add cursor: pointer to checkboxes and radios as they may have no hover-animation by default.

UPD4. I think .navbar-toggler is good example when it's not clear if element is interactive or not: https://getbootstrap.com/docs/4.0/components/navbar/#external-content