terra-button Pressing the button with enter and space should look the same

[KunigundaLauly]

Bug Report

Description

Pressing the button with enter and space does not look the same. Currently, pressing with space, the background changes, while pressing with enter it remains the same.

Steps to Reproduce

1. open the following page: https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/button/button
2. Press the space, while focusing on a terra button.
3. Press the enter, while focusing on a terra button.
4. Currently the button pressed states are different.

Additional Context / Screenshots

Expected Behavior

The button's pressed states should look the same. (or maybe, is this a default workout?)

Possible Solution

Environment

• Component Name and Version: terra-button v3.60.0
• Browser Name and Version: Chrome Version 96.0.4664.110 (Official Build) (64-bit)
• Node/npm Version: [e.g. Node 8/npm 5] -
• Webpack Version: -
• Operating System and version (desktop or mobile): Win 10

@ Mentions

[stale]

This issue has been automatically marked as inactive because it has not had recent activity. It will be closed in seven days if no further activity occurs. Thank you for your contributions.

[tiborud]

We're still experiencing this issue.

[BenBoersma]

I took a look at a bunch of different approaches and native-browser handling for button states, which I will include at the bottom of this comment with an audit I did. The main take away however, is that there is not a perfectly universal and consistent standard for how buttons respond in respect with pressing return or spacebar and clicking, though there seems to be a common majority with a few outliers (e.g. Firefox on click).

With that in mind, Terra buttons are currently following the native handling pattern of the common majority of browsers, and as such I am closing this issue.

Terra Button

	Click	Spacebar	Return
Chrome 101.0.4951.64	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed does not change css
Firefox 100.0.1	On release fires event While pressed does not change css	On release fires event While pressed changes css	On down fires event While pressed does not change css
Safari Version 15.4	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed does not change css
IE 10	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed does not change css
MSEdge 42.17134.1098.0	On release fires event While pressed changes css	On release fires event While pressed changes css While pressed scrolls down	On down fires event While pressed does not change css

Basic Button html tag

	Click	Spacebar	Return
Chrome 101.0.4951.64	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed does not change css
Firefox 100.0.1	On release fires event While pressed changes css	On release fires event While pressed does not change css	On down fires event While pressed does not change css
Safari Version 15.4	On release fires event While pressed changes css	On release fires event While pressed does not change css	On down fires event While pressed does not change css
IE 10	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed does not change css
MSEdge 42.17134.1098.0	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed does not change css

W3 button examples that don't use button tag

	Click	Spacebar	Return
Chrome 101.0.4951.64	On release fires event While pressed changes css	On release fires event While pressed does not change css	On down fires event While pressed does not change css
Firefox 100.0.1	On release fires event While pressed changes css	On release fires event While pressed does not change css	On down fires event While pressed does not change css
Safari Version 15.4	On release fires event While pressed changes css	On release fires event While pressed does not change css	On down fires event While pressed does not change css
IE 10	On release fires event While pressed changes css	On release fires event While pressed does not change css	On down fires event While pressed does not change css
MSEdge 42.17134.1098.0	On release fires event While pressed changes css	On release fires event While pressed does not change css	On down fires event While pressed does not change css

Oracle Jet Cookbook for Buttons (Specifically the submenu opener button)

	Click	Spacebar	Return
Chrome 101.0.4951.64	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed changes css
Firefox 100.0.1	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed changes css
Safari Version 15.4	On release fires event While pressed changes css	On release fires event While pressed changes css	On down fires event While pressed changes css
IE 10	Doesn't Load
MSEdge 42.17134.1098.0	Doesn't Load

[KunigundaLauly]

Thank you very mutch for the very detailed explanation. I'll foward this to my team. Thanks again :)