Skip to content

Accessability/bulk a11y pass 1 #4

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
avitacco wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Accessability/bulk a11y pass 1 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48e9aed
Initial a11y pass
avitacco Aug 22, 2026
854e6c5
Bumping version to 0.11.0 and using said version
avitacco Aug 22, 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
3 changes: 2 additions & 1 deletion docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
{% include head.html %}
<body>
<a class="vox-skip-link" href="#main-content">Skip to main content</a>
{% include nav.html %}
{% assign sidebar_groups = site.data.sidebar[page.section] %}
<div class="vox-doc-shell{% unless sidebar_groups %} no-sidebar{% endunless %} vox-container">
Expand All @@ -10,7 +11,7 @@
{% include sidebar.html groups=sidebar_groups %}
</div>
{% endif %}
<main class="vox-doc-content">
<main class="vox-doc-content" id="main-content" tabindex="-1">
<div class="vox-prose">
{{ content }}
</div>
Expand Down
1 change: 1 addition & 0 deletions docs/_layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
{% include head.html %}
<body>
<a class="vox-skip-link" href="#main-content">Skip to main content</a>
{% include nav.html %}
{{ content }}
</body>
Expand Down
4 changes: 4 additions & 0 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ title: VoxBlocks — Web components for the OpenVox community
layout: home
---

<main id="main-content" tabindex="-1">

<div class="vox-container">
<vox-hero eyebrow="Open source, community-run" heading="Web components for the OpenVox community">
Framework-agnostic building blocks in the style of the OpenVox docs — drop them into any site, from plain HTML to Vue.
Expand All @@ -28,6 +30,8 @@ layout: home
</vox-grid>
</div>

</main>

<vox-footer>
<vox-footer-column heading="Docs">
<a href="guide/getting-started/">Getting Started</a>
Expand Down
55 changes: 50 additions & 5 deletions docs/src/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,34 @@ body {
font-family: var(--vox-font-family-base);
}

/* Bypass block (WCAG 2.4.1): every page tabs through the full header nav,
and doc pages through the full sidebar nav too, before reaching content —
this jumps a keyboard/screen-reader user straight past both. Off-screen
positioning (not display/visibility) keeps it in the accessibility tree
and focusable; it only becomes visible once it receives focus. */
.vox-skip-link {
position: absolute;
top: -3rem;
left: var(--vox-space-3);
z-index: 100;
padding: var(--vox-space-2) var(--vox-space-4);
background-color: var(--vox-color-bg-elv);
color: var(--vox-color-brand-1);
border-radius: var(--vox-radius-md);
box-shadow: var(--vox-shadow-2);
font-weight: 600;
text-decoration: none;
transition: top var(--vox-transition-fast);
}

.vox-skip-link:focus {
top: var(--vox-space-3);
}

main:focus-visible {
outline: none;
}

/* Pages that render a real <vox-footer> (currently just the home page) get
it pinned to the viewport bottom instead of trailing short content. */
vox-footer {
Expand Down Expand Up @@ -204,12 +232,29 @@ vox-footer {
color: var(--vox-color-text-2);
}

/* Rouge syntax highlighting ---------------------------------------------- */

/* Rouge syntax highlighting ----------------------------------------------
* These three tokens are docs-only and have no equivalent in tokens.css,
* so (unlike everything else on this page) they were hardcoded hex values
* with no dark-mode counterpart — meaning the light-mode value was reused
* verbatim against the dark `--vox-color-bg-soft` code background, where
* two of them measured under 3.5:1 (dark) and the entity/number colors were
* already sub-4.5:1 even in light mode. Now real CSS custom properties, so
* each theme gets a value that clears 4.5:1 against its own
* `--vox-color-bg-soft`.
*/
.highlight {
--vox-color-code-string: #0e7267;
--vox-color-code-entity: #6d4dad;
--vox-color-code-number: #a54b08;
color: var(--vox-color-text-1);
}

[data-vox-theme='dark'] .highlight {
--vox-color-code-string: #3daa9c;
--vox-color-code-entity: #9d84d6;
--vox-color-code-number: #e08a3d;
}

.highlight .c,
.highlight .c1,
.highlight .cm {
Expand All @@ -228,7 +273,7 @@ vox-footer {
.highlight .s1,
.highlight .s2,
.highlight .sb {
color: #0e7267;
color: var(--vox-color-code-string);
}

.highlight .n,
Expand All @@ -244,13 +289,13 @@ vox-footer {
.highlight .nb,
.highlight .nc,
.highlight .nf {
color: #7c5cbf;
color: var(--vox-color-code-entity);
}

.highlight .m,
.highlight .mi,
.highlight .mf {
color: #b45309;
color: var(--vox-color-code-number);
}

.highlight .o,
Expand Down
Loading