Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Buttons have cursor: pointer by default, but should not for accessibility reasons #8961

Closed
MatthewSbar opened this issue Jul 26, 2022 · 5 comments · Fixed by #8962
Closed

Buttons have cursor: pointer by default, but should not for accessibility reasons #8961

MatthewSbar opened this issue Jul 26, 2022 · 5 comments · Fixed by #8962

Comments

@MatthewSbar
Copy link

MatthewSbar commented Jul 26, 2022 •
edited

What version of Tailwind CSS are you using?

3.1.6

What build tool (or framework if it abstracts the build tool) are you using?

Vite 3.0.0 (rollup)

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/react-tailwind-qds1vc?file=index.js

Describe your issue

While it's common to give <button>s cursor: pointer;, this is an anti-pattern. The CSS spec establishes that cursor: pointer indicates an element is a link.

This article has some additional justification for this. I understand many users will want to override this behavior back to the common misuse of cursor: pointer;, but Tailwind should be correct by default.
adamwathan added a commit that referenced this issue Jul 27, 2022
@adamwathan
Don't use cursor: pointer for buttons by default
2abbdc9 
This is a pretty common expectation but as outlined in in #8961 isn't really right. We considered this a long time ago but it felt too against the grain at the time. These days though very UI-forward applications like [Linear](https://linear.app/) are using the default cursor for buttons and I think this trend will continue as more people become aware that `cursor: pointer` is meant for links.

Let's update our defaults here to help nudge people in this direction and make it more common. If people want to change this in their own apps, it's just a line or two of CSS to add to their projects.
@adamwathan adamwathan mentioned this issue Jul 27, 2022
Merged
@adamwathan
Copy link
Member

Yeah agree this is the right default, changing in #8962. Going to put this out in a patch or minor, doesn't really feel "breaking" to me.

adamwathan added a commit that referenced this issue Jul 27, 2022
@adamwathan
Don't use cursor: pointer for buttons by default (#8962)
ed3a4f3 
* Don't use `cursor: pointer` for buttons by default

This is a pretty common expectation but as outlined in in #8961 isn't really right. We considered this a long time ago but it felt too against the grain at the time. These days though very UI-forward applications like [Linear](https://linear.app/) are using the default cursor for buttons and I think this trend will continue as more people become aware that `cursor: pointer` is meant for links.

Let's update our defaults here to help nudge people in this direction and make it more common. If people want to change this in their own apps, it's just a line or two of CSS to add to their projects.

* Update changelog

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
@diegohaz
Copy link

@adamwathan Should this be re-opened since #8962 was reverted in 0a3aad9?

We’re undecided on whether or not this should be released right now so we’ll revert it and revisit it later.

@DaniGuardiola
Copy link

I second @diegohaz, this should be reopened.

@hichemfantar
Copy link

Any plans to revisit this?

@ccchapman
Copy link

ccchapman commented May 3, 2023 •
edited

Buttons should not have cursor: pointer by default.

Microsoft’s design guides talk about weak affordance:

Text and graphics links use a hand […] pointer […] because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link. 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.

Apple’s Human Interface Guidelines states that the hand cursor should be used when “the content is a URL link”.

W3C User Interface guidelines says the same thing again with “The cursor is a pointer that indicates a link”.

From "Buttons shouldn’t have a hand cursor" by Adam Silver

@thecrypticace Could this issue be reopened?

@gtm-nayan gtm-nayan mentioned this issue Jun 15, 2023
Closed
5 tasks
@loopy-lim loopy-lim mentioned this issue Apr 1, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Don't use cursor: pointer for buttons by default tailwindlabs/tailwindcss
6 participants
@diegohaz @adamwathan @MatthewSbar @DaniGuardiola @hichemfantar @ccchapman