spectrum-web-components

spectrum-web-components copied to clipboard

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-button, sp-action-button

Expected behavior

A button that is activated by either clicking, or by focusing and then pressing space/enter, both shows a visual indication of firing and also fires.

Actual behavior

At least one type of button ("primary") shows no visual indication of being activated:

https://user-images.githubusercontent.com/364501/159797782-b07f6d83-68d7-42d0-b92d-b59d5b2352d6.mov

No button types show visual indications of being activated if they are already visibly focused:

https://user-images.githubusercontent.com/364501/159798093-5d4e4cd6-2621-463d-ac70-8ed665adf67b.mov

Clicking or pressing space on an action button activates it, but enter does not (enter only moves focus to focus-visible... maybe this is by design? verifying in case, since the wai-aria button pattern suggests that enter should activate a focused button):

https://user-images.githubusercontent.com/364501/159798932-232f0e26-39a9-4964-ae7b-d75ec679cb87.mov

Screenshots

No response

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Use both the keyboard and mouse to activate buttons at: https://opensource.adobe.com/spectrum-web-components/components/button/ https://opensource.adobe.com/spectrum-web-components/components/action-button/
2. Notice that buttons are not (visibly) activated (I need to test to see if they trigger click events)

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

https://github.com/adobe/spectrum-web-components/issues/1042

I think that's a subset @Westbrook, but this includes also clicking and pressing space.

1. Primary button no-visible-activation: it's about as dark as it can be, so can't fit a darker state. @NateBaldwinDesign will see if design would lower the color index 1 stop to make room for an activated state.
2. Focused buttons no-visible-activation: CSS bug, may be related to order. @GarthDB is going to look into it.
3. Enter does activate buttons, but does not trigger their :active visual state. This is apparently something unclear in the spec, but consistent with how browsers treat native buttons: https://github.com/w3c/csswg-drafts/issues/4787 https://bugzilla.mozilla.org/show_bug.cgi?id=68851

Review this post-core tokens work completion. #2659

@hunterloftis can you review whether there are still things we'd like updated in regards to this?

Within the context of this, we support what is spec'd in Spectrum, for better or worse.