[wp-trac] [WordPress Trac] #47171: Incorrect cursor used on buttons

[WordPress Trac]

#47171: Incorrect cursor used on buttons
---------------------------------------------+-----------------------------
 Reporter:  nrqsnchz                         |       Owner:  (none)
     Type:  defect (bug)                     |      Status:  assigned
 Priority:  normal                           |   Milestone:  5.4
Component:  Administration                   |     Version:
 Severity:  normal                           |  Resolution:
 Keywords:  has-screenshots wpcampus-report  |     Focuses:  ui,
                                             |  accessibility
---------------------------------------------+-----------------------------

Comment (by Kelderic):

 Replying to [comment:32 nataliemac]:
 > The Accessibility team discussed this in our meeting today and this is
 our recommendation:
 >
 > The CSS cursor styles currently applied to button elements should be
 removed so the cursor can return to the browser default. We recommend just
 remove the CSS setting the cursor rather than explicitly setting the
 cursor to default. Affordance for buttons can be communicated in another
 way with a noticeable hover/focus style.
 >
 > The pointer cursor should be reserved for links. From the WP Campus
 report "controls that navigate users to new pages/views should have cursor
 set to pointer". The intention of the pointer cursor is to help users
 differentiate between controls that trigger navigation to a new page/view
 and controls that perform other functions.
 >
 > Ensuring that links and buttons are used appropriately throughout the UI
 is a separate issue that we'll be looking into.

 Whatever the original intent of the spec was, the reality is that most
 websites now use the pointer cursor to indicate that something can be
 clicked on / interacted with. That is what users expect.

 **Examples:**

 Microsoft:

 * https://microsoft.qualtrics.com/jfe/form/SV_4GwB58d2AZFC7o9 - Span
 element, used as part of a toggle that clearly isn't a link. Microsoft
 uses a pointer cursor.

 Apple:

 * https://www.apple.com/contact/feedback.html Select element that is
 clearly not a link, but Apple uses a pointer cursor.

 Google:

 * The main compose button on Gmail. It's a button, and it's not linking
 anywhere. And it uses a pointer cursor.

 * Account Settings: https://myaccount.google.com/contacts - Google uses a
 pointer cursor on two way toggles.

 Dell:

 * Every Dell page has a special "Chat or Call" button. It uses a pointer
 cursor, but is not a link.

 GitHub:

 * On every repo page, there is a Branch Switch button that triggers a drop
 down menu. This is styled with a pointer cursor. Same with the Star, Fork,
 Used By, etc etc buttons.

 Stack Overflow:

 * Top menu has dropdown icon buttons. They use pointer cursors.

 Reddit:

 * Main Profile dropdown menu trigger button .... uses a pointer cursor.

 -----

 I can go on and on with examples of MAJOR sites that all use the pointer
 cursor on non-links. It's what users expect. Removing it is going to
 confuse users.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47171#comment:33>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform