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

Merged
dsanders11 merged 5 commits into from
Feb 10, 2026
+9 −2
Merged

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

Changes from all commits
Commits
Show all changes
5 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
3ee0578
chore: add comment referencing upstream PR
dsanders11 Feb 9, 2026
492ce6a
style: make linter happy
nmggithub Feb 9, 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
11 changes: 9 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,17 @@ html {
}

.button {
&--outline {
&--outline,
// Docusaurus adds its own focus styles which we need to
// override here to avoid losing the outline. This can be
// removed when we pick up the upstream fix in Docusaurus.
// ref: https://github.com/electron/website/issues/1001
// ref: https://github.com/facebook/docusaurus/pull/11713
body:not(.navigation-with-keyboard) &--outline:focus {
Comment on lines 205 to 210
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