Skip to content

Commit

Permalink
🚸 Make button focus visible when navigating by keyboard
Browse files Browse the repository at this point in the history
Why:
- PureCSS's default focus behavior for buttons is very hard to see; it
  only changes the background color slightly. With :focus-visible we can
  have a clearly visible button outline when navigating by keyboard, but
  not show it when clicking the button with the mouse.
  • Loading branch information
luontola committed Oct 27, 2024
1 parent a0e136d commit b060f03
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions web/src/layout/Layout.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@ kbd {
font-family: "system-ui", sans-serif;
}

/* improvements to PureCSS */
:global .pure-button.pure-button:focus-visible {
outline: 1px auto #129FEA;
outline-offset: 2px;
}

/* layout */

.navbar {
Expand Down

0 comments on commit b060f03

Please sign in to comment.