1875373 - Lando has different hover-styling for "Preview Landing" vs. "Request Uplift" buttons

Status: NEW

(Conduit :: Lando, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Sign in to Lando, if you're not already signed in.
2. View a Lando page for a landable phab-revision.
3. Hover each of the green buttons ("Preview Landing" and "Request Uplift")

ACTUAL RESULTS:
The "Preview Landing" button doesn't change at all.
The "Request Uplift" button's text changes to black.

EXPECTED RESULTS:
Consistent hover styling; both buttons should change in the same way when hovered.

(The current "request-uplift" button-change, switching to black-text on a dark-green-button, is perhaps not the ideal hover styling, since the low contrast makes the text harder to read. Maybe worth reconsidering that style as part of fixing this.)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast showing the bug

Here's a screencast showing the issue at https://lando.services.mozilla.com/D199020/ , using current Firefox Nightly.

Comment 2

[Daniel Holbert [:dholbert]]

Looking in devtools inspector, it looks like the relevant difference between the two buttons here is the absence/presence of button in the class attribute -- the former button does not have button as one of its classes (it only has class="StackPage-preview-button"), whereas the latter button does have button as one of its classes.

Quoting the html shown in devtools:

<div class="StackPage-actions">
        <button class="StackPage-preview-button">
          <div class="StackPage-actions-headline">Preview Landing</div>
        </button>
        <button class="button uplift-request-open is-normal">
            <span class="icon"><i class="fa fa-arrow-circle-up"></i></span>
            <div class="StackPage-actions-headline">Request Uplift
        </div></button>
  </div>

And there's a rule in https://lando.services.mozilla.com/static/build/main.min.css?17e55953
that sets a custom color, if we have that class and the button is hovered:

.button:hover,.button.is-hovered{border-color:#b5b5b5;color:#363636}

(That rule also sets border-color but that has no effect since there's another rule that sets .StackPage-actions button{border:0; ...}. So the color:363636 is the only user-facing restyle that happens on hover, for this second button.)

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #0)

(The current "request-uplift" button-change, switching to black-text on a dark-green-button, is perhaps not the ideal hover styling, since the low contrast makes the text harder to read. Maybe worth reconsidering that style as part of fixing this.)

Following up on this sidebar: here's the contrast-checker report for the foreground/background colors that we've got when this second button is hovered right now, fwiw:
https://webaim.org/resources/contrastchecker/?fcolor=363636&bcolor=3F9B47
I guess it's borderline; that page rates it a "pass" for WCAG AA but "fail" for WCAG AAA, for the Large Text category (and the text in question here is indeed large text).