Comments (4)
BenBoersma
commented on July 29, 2024
1
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.
| 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 |
| 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 |
from terra-core.
stale
commented on July 29, 2024
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.
from terra-core.
tiborud
commented on July 29, 2024
We're still experiencing this issue.
from terra-core.
KunigundaLauly
commented on July 29, 2024
Thank you very mutch for the very detailed explanation. I'll foward this to my team. Thanks again :)
from terra-core.
Related Issues (20)
- terra-form-select Incorrect focus location after pressing TAB / Shitf+TAB on the opened dropdown HOT 1
- generate-example script for terra-icon failing HOT 2
- Unable to dismiss keyboard for the Terra Search Field HOT 1
- [terra-icon] fix migration scripts to support svgo v2.x HOT 1
- [terra-docs] Add new Notices type for Incorrect Use
- Jest warnings HOT 2
- In terra button group, cannot focus on buttons in Safari HOT 3
- Drag-able components for Terra-UI HOT 1
- terra-form-select Incorrect focus location after pressing TAB / Shitf+TAB on the opened dropdown HOT 2
- Toggle section Header does not highlight when used in a stack HOT 2
- [terra-form-select] Dynamic dropdown width HOT 1
- terra install failure(s) because of @types/eslint v8.4.4 HOT 2
- [terra-dropdown-button] 404 documentation link
- terra-content-container Scroll wrapper is mandatory for children, causing the terra-overlay to be scrollable HOT 2
- New feature in terra table: clicking parent row expands and collapses child rows HOT 1
- Issue with orion-fusion-theme in terra-form-checkbox HOT 2
- Issue with Terra-Demographic-banner HOT 1
- Data is not visible in the gantt chart HOT 1
- Terra-List ListSectionHeader Incorrect refCallback Prop HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from terra-core.