[Button] Hover/Focus state should lighten & elevate

[una]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Raised buttons should lighten in color and increase box-shadow value

Current:

Expected Behavior 🤔

Material Spec:

See: https://material-components.github.io/material-components-web-catalog/#/component/button?type=raised

Steps to Reproduce 🕹

Steps:

1. Create button
2. Hover/focus
3. Witness variance

Context 🔦

Thank you for all of your work here! Just going to point out some adjustments and inconsistencies with the Material spec :)

Your Environment 🌎

Tech	Version
Material-UI	latest @4

[eps1lon]

Thank you @una for pointing out these issues. We're always playing catch-up with the guidelines since there's no changelog that helps implementors. We appreciate you taking the time to report this and hope to hear more from people familiar with the guidelines.

[una]

No problem! I'm super happy to continue to do this 😄We appreciate your being receptive to get in more alignment with our spec and definitely want to make that easier for you all!

[croraf]

@una Where does it specifically say what should happen when mouse hover happens?

[mbrookes]

@croraf

https://material.io/components/buttons/#contained-button

(Found under "States")

Note that since the focus color in the current spec is insufficient to meet accessibility guidelines, we have kept the original focus indicator.

@eps1lon

there's no changelog that helps implementors

Could we visual diff the pages periodically? 😄

[croraf]

@mbrookes I saw these, but there is no explanation. There should be a written description on exactly how is hover state produced from the normal state? I mean the exact color of state 1 above does also not match the color of material-ui primary enabled.

[mbrookes]

@croraf https://material.io/design/interaction/states.html (@eps1lon has linked to this in #17537)

Could we visual diff the pages periodically?

Done (for the component pages) with https://visualping.io. Let's see how it goes.

Of course that doesn't help where things are already out of alignment with the spec, so keep the issues coming!

[eps1lon]

Note that since the focus color in the current spec is insufficient to meet accessibility guidelines, we have kept the original focus indicator.

I'm not sure this is clearly defined. Focus should be visually distinct but I think this is still given with the new style. The current style solely relies on the pulse and I'm not this is considered "highly visible" (https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G195)

The only difference with states is that they might be hard to distinguish. But if you have 5 different states then this might be impossible.

[una]

This page might help: https://material.io/design/interaction/states.html#focus (along with https://material.io/components/buttons which has states for contained and base buttons)

[croraf]

@mbrookes
I see now. The "Hover" chapter: https://material.io/design/interaction/states.html#hover
Last section in this chapter: "Overlay opacity values".

It gives 3 examples, but I'm still not sure I understand how is the overlay color and opacity selected for specific background-color/color combination.

[mbrookes]

@croraf

I'm still not sure I understand how is the overlay color and opacity selected for specific background-color/color combination.

No, neither am I, and I think that's what @eps1lon was referring in the related PR as to having to be figured out.

@eps1lon

I'm not sure this is clearly defined.

I agree, but I think it's safe to say that a subtle shift in shade isn't sufficient to tell that a button is focused, especially if it's the only button. The focus ripple might not meet definition of "highly visible", but it's better than the alternative.

[eps1lon]

The focus ripple might not meet definition of "highly visible", but it's better than the alternative.

I don't know to be honest. I don't think either one is better than the other. One applies a shade shift partially the other applies the same shift but completely. One changes a smaller are while doing a tiny motion the other one has a bigger area. If someone cannot detect the tiny motion then the new focus state is strictly better.

What I want to emphasize is that there's nothing "safe to say" about visibility of either focus state variant.

[mbrookes]

the new focus state is strictly better

A previously focused (or auto-focused) button has nothing to indicate that it is focused. Even when actively focusing, you are dependent on noticing a subtle shift in shade and elevation. That is perfectly safe to say. :)

Again, I agree the focus ripple isn't perfect, but it is objectively better.

[eps1lon]

I think you're not aware of the new focus style. It's the same as the current one but fills the whole button instead of a partial application with a pulse.

You're basically saying that the vanilla :focus { outline: 1 } does not indicate that something is focus because it has a subtle border?

Again

A previously focused (or auto-focused) button has nothing to indicate that it is focused.

is not true in any shape or form. I would understand if this is might be an issue for colorblind people but this wouldn't be an issue for focus alone but emphasis as well.

[mbrookes]

I think you're not aware of the new focus style.

I'm not sure how you came to that conclusion, considering I linked to the spec and pasted an image from it.

#17493 (comment)

It's the same as the current one but fills the whole button instead of a partial application with a pulse.

A very roundabout way of saying that it's a solid color, just like an unfocused button.

You're basically saying that the vanilla :focus { outline: 1 } does not indicate that something is focus because it has a subtle border?

1. When did I say that?
2. That would only be true of both focussed and unfocused hd a blue border in a subtly different shade.
3. It is recognisable by convention.

[eps1lon]

A very roundabout way of saying that it's a solid color, just like an unfocused button.

It's not the same color? This is how I came to the conclusion that you're not aware of the new style. Saying this is objectively worse is objectively wrong, sorry.

When did I say that?

I didn't say that you said that. Hence "basically".

So I urge you to reconsider making "subtle" an "objective" term. I understand that either one has some subjective pros and cons but saying one is objectively better encapsulates everything that's wrong with web development. You don't have any right to claim this unless you can point me to user research that shows that a pulse that covers up part of the text is "objectively better" than a filled color.

[kgregory]

How should the transition from focused to pressed appear? Is the ripple meant to be lighter for pressed, focused buttons?

[una]

I agree, but I think it's safe to say that a subtle shift in shade isn't sufficient to tell that a button is focused, especially if it's the only button. The focus ripple might not meet definition of "highly visible", but it's better than the alternative.

In terms of spec alignment, the primary concept is to elevate on hover instead of depress. The lightening of the button represents this. Increasing the amount of lightness for accessibility is fine, if it's keeping with the correct elevation metaphor.

You bring up great points about accessibility that we'll definitely be taking into account.

[siriwatknp]

This issue is outdated (MD2 related). We aim to have a fresh look for Material UI in the near future, so I’m closing this.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@una How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[oliviertassinari]

Makes sense, we are taking more steps away from being close to the Material Design spec, so this issue is a "won't fix" now.