Carbon: AVT2 - Carbon X Button Component does not activate when Enter is pressed

[snidersd]

Carbon X Button Component: The ARIA Authoring Practices for a Button require that both the Space key and Enter key activate the button.

Tested on macOS Mojave 10.14.2, Chrome Version 71.0.3578.98 (Official Build) (64-bit), with VoiceOver

Without using a mouse navigate to a button and press the Enter key to activate the button. It fails to respond. It should activate and change color the same way the Space key works.

Also note, this issue occurs with and without a screen reader.

[emyarod]

just to clarify: is the Enter key not triggering the onclick event? The Enter key should trigger onclick on a native button element just like the space bar or a mouse click would, but only the space bar or the mouse will add the :active pseudoclass. If the ticket is about the styling of the button during an Enter keypress, then that can be added with some JS; but I believe only space bar and mouse click natively attach :active: to <button>s. The :active styles are distinct from the :focus styles in Carbon, but :active is only applied on space bar keypress or mouse click by default. Triggering the onclick event with Enter will only keep the :focus state and not apply :active. Please let me know if I've misinterpreted the original issue

[jendowns]

To @emyarod's point, I haven't seen this on our end. We (Security group) are using a Carbon X button in a feature branch of our React library. I can open Storybook right now & activate a Button (as in, see onClick activate in our storybook knobs when I hit the Enter key and Space key). Styling-wise, the "active" styled state looks like a focus styled state.

EDIT: Just to add I'm interested in more info here to make sure we aren't missing anything. Thank you! 🎉

[snidersd]

The Enter key should look and act exactly like the Space Key for button styling, and onClick for authoring practices. See the ARIA APG for additional details. It includes keyboard interaction, ARIA roles and states, and how buttons should work in various situations (e.g. toggle, action, menu).

[emyarod]

both Enter and space bar trigger the onclick event. I may be overlooking it but the link provided doesn't indicate that the :active class should be attached to the element on Enter keypress. The examples also do not exhibit that behavior. They follow the default browser behavior which I described earlier, where the onclick event will be fired on mouse click, space bar keypress, or Enter keypress, but the :active pseudoclass is added only on mouse click or space bar keypress

that being said if we want to add the :active styles on Enter keypress, I will defer to our designers regarding this visual enhancement cc @IBM/carbon-designers also cc @dakahn

please let me know if I'm still misunderstanding

[aagonzales]

I'm not sure I understand that technical side of it. I would think any time a button is triggered (whether pressed, clicked, keyboard nav) the :active state would appear.

[emyarod]

so while a button (<input type="button> as opposed to <a> styled as a button) is in focus:

• clicking on the button will add the :active pseudoclass only while the mouse is pressed down
• holding down space bar will add the :active pseudoclass while the space bar is pressed down (except in Firefox! it is unclear if this is a bug or intended behavior)
• holding down the space bar will fire the onclick event only on release of the key while the button is still focused (simulating mouse behavior -- you can "cancel" a click by changing focus before releasing the space bar or mouse click)
• holding down Enter fires the onclick event repeatedly during the keypress but will not add the :active pseudoclass

here is a Code Sandbox that illustrates the default behavior for Enter, space bar, and mouse click on <input type="button">: https://codesandbox.io/s/mmkj2k84x8

as for anchor elements (<a>):

• <a> can be activated with the mouse or Enter key only by default
• clicking on links with the mouse will add :active
• activating a link with the Enter key will not add :active

---

Understanding the difference would help clarify what the original ticket describes. To me it could mean one or a combination of the following:

• our buttons do not activate/function when Enter is pressed (onclick event is not firing, but I can't reproduce this)
• our buttons do not apply the :active class when Enter is pressed (default behavior across the web)

or something else, since there was a comparison made to an example with an anchor element styled as a toggle button

[dakahn]

Wow, thanks so much for that Codesandbox. Yeah, looks like testing on the latest build of Firefox neither enter or space technically activate the button (apply the psuedoclass :active), but in Chrome latest enter doesn't, but space does 🤦🏽‍♀️

I'll assign this to myself and get after it

[emyarod]

I'm still kind of out of the loop. What is the issue that the original post is describing?

[asudoh]

Ref: https://html.spec.whatwg.org/multipage/semantics-other.html#selector-active

[emyarod]

thanks for the reference @asudoh! yeah I'm not seeing any behavior that deviates from the spec or the W3C examples but am curious to know if others see something I am missing

[snidersd]

Originally I was referring to a toggle button, but it was unclear which one of the button component examples are meant to be a toggle button. (I thought it was the button that changed visually). However, I did find a working example of a toggle that was used in the Inline Loading Component. I can see now that both the Space key and Enter key activate the button, but what I do not see is an aria state to indicate when the button is pressed or a visual indication that the button is in the pressed state.
As referenced in the ARIA APG design pattern, a toggle button should have aria-pressed=“true” when activated and a visual indication that the button remains pressed until it is toggled off at which time aria-pressed="false" and the button changes back to the unpressed state.

[asudoh]

FYI, our toggle button can be found at: https://www.carbondesignsystem.com/components/toggle/code. OTOH the button seen in our inline loading demo page is solely of a demonstration purpose, meaning, it's _not_ part of the component.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[dakahn]

closing this out since it seems cleared up 👍 let me know if that's not the case and we can reopen or clarify further