Skip to content

fix: fix outlined button styles and improve their accessibility #1002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nmggithub wants to merge 3 commits into
base: main
Choose a base branch
from
+6 −2
Open

fix: fix outlined button styles and improve their accessibility #1002

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f29507b
fix: override docusarus style to keep button outlines
nmggithub Feb 1, 2026
5177bbb
fix: add missing focus indicator to outlined buttons
nmggithub Feb 1, 2026
457bfca
refactor: use hover indicator for focus indicator
nmggithub Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/css/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,10 +201,14 @@ html {
}

.button {
&--outline {
&--outline,
// Docusaurus adds its own focus styles which we need to
// override here to avoid losing the outline.
// ref: https://github.com/electron/website/issues/1001
body:not(.navigation-with-keyboard) &--outline:focus {
Comment on lines +205 to +208
Copy link
Contributor Author

@nmggithub nmggithub Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't ideal, but Docusaurus is too board in their approach to hiding focus outlines when the user is using a mouse (I added a comment here in this issue to get the attention of their team: facebook/docusaurus#11314 (comment))

Copy link
Contributor Author

@nmggithub nmggithub Feb 7, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hook that requires this funky CSS by us has been removed upstream in Docusaurus (facebook/docusaurus#11713), but no new version has been released yet.

outline: 1px solid;
color: var(--ifm-color-primary);
&:hover {
&:hover, &:focus-visible {
color: var(--ifm-color-primary-dark);
}
}
Expand Down