Skip to content

Keyboard navigation enhancements #725

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
merged 9 commits into from
Sep 15, 2025
Merged

Keyboard navigation enhancements #725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4c9e211
Add focus outline to dark mode toggle
gcamacho079 Sep 4, 2025
60d0871
Remove color from Home link
gcamacho079 Sep 4, 2025
72e7266
Update text color in .see-description
gcamacho079 Sep 4, 2025
bc8ccdb
Fix on this page padding to account for focus outlines
gcamacho079 Sep 4, 2025
ea4fe7c
Add Css property for custom focus outline and use for dark mode toggle
gcamacho079 Sep 15, 2025
fbbb852
More padding/margin refactoring to sidebar links in post toc
gcamacho079 Sep 15, 2025
f975043
Redo sidebar link margins/padding and do outline-offset instead
gcamacho079 Sep 15, 2025
65b8bad
Add focus outline to voting button
gcamacho079 Sep 15, 2025
ed221eb
Undo new line
gcamacho079 Sep 15, 2025
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ The pages served from `docs/` are treated like any other VuePress project, and t
## Local Development

```
nvm use
npm install
npm run docs:dev
```
Expand Down
3 changes: 2 additions & 1 deletion docs/.vuepress/components/See.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export default {
}

.see-description {
@apply text-sm text-gray-500 mt-1;
@apply text-sm mt-1;
color: var(--text-color-muted);
}
</style>
2 changes: 1 addition & 1 deletion docs/.vuepress/theme/components/ColorModeSwitch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
height: 22px;

&:focus {
@apply outline-none;
outline: var(--custom-focus-outline);
}

.knob {
Expand Down
2 changes: 1 addition & 1 deletion docs/.vuepress/theme/components/DocSetPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
.doc-set-link {
@apply block px-4 mt-2 font-medium text-lg;
color: var(--doc-set-color);
outline-offset: -2px;

.title {
color: var(--doc-set-color);
Expand All @@ -82,7 +83,6 @@

.home {
@apply text-sm relative;
color: #718096;

.back {
@apply inline-block absolute mr-1 opacity-100;
Expand Down
6 changes: 6 additions & 0 deletions docs/.vuepress/theme/components/LeftBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@
/* browser height - approx. .doc-set-panel - #top height - #bottom height */
height: calc(100vh - 93px - 3rem - 3rem);
}

.sidebar-links {
a:focus {
outline-offset: -2px;
}
}
}

.sidebar-transitioning {
Expand Down
2 changes: 1 addition & 1 deletion docs/.vuepress/theme/components/PageFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
}

&:focus {
@apply outline-none;
outline: var(--custom-focus-outline);
}

&:hover {
Expand Down
7 changes: 7 additions & 0 deletions docs/.vuepress/theme/styles/base.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
--custom-block-bg-color: theme("colors.softer");
--custom-block-border-color: theme("colors.soft");
--craft-red: #e5422b;
--custom-focus-outline: 2px solid var(--link-color-default);

/* Code */
--code-color-default: #476582;
Expand Down Expand Up @@ -105,3 +106,9 @@ img {
font-size: 108%;
}
}

.sidebar-links {
a {
outline-offset: -2px;
}
}