1555508 - Cursor does not change to hand (cursor: pointer) when mouse is over "Edit Bug" or "Save Changes" buttons

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, defect)

Description

[Botond Ballo [:botond]]

STR

1. Load any bug page on BMO.
2. Move the mouse over the "Edit Bug" or "Save Changes" button.

Expected results

The cursor changes to a hand to indicate that you are over a clickable element.

Actual results

The cursor remains an arrow.

This is a recent regression.

Comment 1

[Botond Ballo [:botond]]

Most other buttons are affected as well, but not the dropdown button that opens the menu containing "History" etc.

Comment 2

[Botond Ballo [:botond]]

The regression seems to be on the site side rather than the Firefox side.

Comment 3

[Kohei Yoshino [:kohei]]

I have changed the cursor to default like native apps, but added back the hover state to buttons. The fix, Bug 1552885, is not deployed yet.

Comment 4

[Botond Ballo [:botond]]

(In reply to Kohei Yoshino [:kohei] (Bugzilla UX) (FxSiteCompat) from comment #3)

I have changed the cursor to default like native apps

I took a survey of other web applications I have open: Gmail, Outlook Web App, Github, Phabricator, Slack. Every single one of them turns the cursor into a hand when it's over a clickable button.

What is the motivation for BMO to be different in this respect?

Comment 5

[Kohei Yoshino [:kohei]]

My goal is making Bugzilla a progressive web app that can be “installed” on your desktop in the not-so-distant future. So I’d like to make it behave more like an app :-) Google doesn’t have the pointer cursor on some buttons, and that’s actually the default behaviour of HTML <button>.

Comment 7

[Kohei Yoshino [:kohei]]

I don’t have a plan to fix this.

Comment 8

[jen strickland :jenstrickland]

In the interim, I did some research looking for a w3c or html5 spec for the button element to provide guidance. The closest found is https://www.w3.org/TR/UAAG20/?fbclid=IwAR0Pv79iko2oHc3KP7boOwxOphbsBJNjTKum21HQ05mP82tbNTRjOs8gMFw#gl-interaction-highlight where an indicator of interactivity is considered a usability best practice.

On the w3c WAI ARIA best practices button example they also don't change the cursor, but at least there is a display change on hover (https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/button/button.html) whereas there is nothing on Bugzilla. Since this was reported more than once, it is confusing to some. Submitting a bug for this is intimidating, but I was concerned for the users and also hoped the interface would be easier to use. This was discovered while grooming bugs with others and we were all puzzled by this behavior.

Comment 9

[Botond Ballo [:botond]]

(In reply to jen strickland :jenstrickland from comment #8)

but at least there is a display change on hover (https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/button/button.html) whereas there is nothing on Bugzilla.

Note, for me Bugzilla buttons do change their background color now on hover. Does that match what you see? Or am I misunderstanding what you mean by "display change"?

Comment 10

[jen strickland :jenstrickland]

(In reply to Botond Ballo [:botond] [standards meeting July 15-20] from comment #9)

(In reply to jen strickland :jenstrickland from comment #8)

but at least there is a display change on hover (https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/button/button.html) whereas there is nothing on Bugzilla.

Note, for me Bugzilla buttons do change their background color now on hover. Does that match what you see? Or am I misunderstanding what you mean by "display change"?

I just looked again and there is a subtle background color change. In a group of six people grooming bugs, none of us saw the color change. I only saw it now that I was expecting it.

Comment 11

[Botond Ballo [:botond]]

(In reply to jen strickland :jenstrickland from comment #10)

I just looked again and there is a subtle background color change. In a group of six people grooming bugs, none of us saw the color change. I only saw it now that I was expecting it.

Kohei, based on this, could we make the background color change more noticeable, and/or bring back the hand cursor?

Comment 12

[Kohei Yoshino [:kohei]]

I’m okay to use the hand cursor. Basically what I want to avoid here is inconsistency. If we use the hand cursor for buttons, we should also use the cursor for all actionable widgets like dropdown list, checkbox, tabs, etc. IMO.

Comment 13

[jen strickland :jenstrickland]

Please forgive me if I'm being pedantic / overly specific. The styling recommendation is { cursor: pointer; }. In conversations with others I worked with would take "hand" as { cursor: grab; } (https://developer.mozilla.org/en-US/docs/Web/CSS/cursor). Ay yay yay… Thank you for your patience with me. :)

Comment 14

[Kohei Yoshino [:kohei]]

I’m old enough to know Internet Explorer supported cursor: hand. Somehow it’s not mentioned in the MDN doc at all.

Comment 15

[Botond Ballo [:botond]]

(In reply to jen strickland :jenstrickland from comment #13)

Please forgive me if I'm being pedantic / overly specific. The styling recommendation is { cursor: pointer; }. In conversations with others I worked with would take "hand" as { cursor: grab; } (https://developer.mozilla.org/en-US/docs/Web/CSS/cursor). Ay yay yay… Thank you for your patience with me. :)

Sorry, that's me being imprecise in my description. I did mean cursor: pointer when I filed the bug. I've edited the title to clarify.

Comment 16

[Kohei Yoshino [:kohei]]

Attachment: GitHub Pull Request

Comment 17

[Kohei Yoshino [:kohei]]

Merged to master.