Fix link button focus targets #18007
Conversation
|
With regards to the preview environment failing, I will try to re-trigger tomorrow. It looks like something's up |
| return ( | ||
| <button | ||
| type={htmlType} | ||
| ref={ref as ForwardedRef<HTMLButtonElement>} |
There was a problem hiding this comment.
do you want to handle ref being an anchor element differently?
There was a problem hiding this comment.
Nope, this was an oversight and I've now put it on the link as well... thanks for catching it
There was a problem hiding this comment.
Thanks for opening this and #16724, @filiptronicek. 🌮
Links are for navigation. Buttons are for everything else.
We should avoid mixing these when possible.
Alternatively, having a button component variant that can visually style an action like an anchor link when using a plain link isn't possible, sounds great. ✔️
geropl
added
team: team-experience
and removed
team: webapp
|
This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
filiptronicek
force-pushed
the
ft/focus-targets
branch
from
7ecc449 to
3047c29
Compare
|
This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
Work continues in #19012 |
Description
Sometimes, we use buttons for actions which cause navigation (i.e. links). We shouldn't do that - it's both against the HTML recommendations as well as generally inaccessible. This PR reuses our
<Button>component and adds thehrefprop for creating a link instead of a standard HTML button, with the same visuals.The tl;dr is that when you move around elements with the keyboard, the new workspace button is not made out of two focus targets anymore. The old behavior is visible below:
Related Issue(s)
Partially addresses #16724
Documentation
Preview status
Gitpod was successfully deployed to your preview environment.
Build Options
Build
Run the build with werft instead of GHA
Run Leeway with
--dont-testPublish
Installer
Add desired feature flags to the end of the line above, space separated
Preview Environment
If enabled this will build
install/previewIf enabled this will create the environment on GCE infra
Valid options are
all,workspace,webapp,ide,jetbrains,vscode,ssh/hold