marcoallegretti/likwid
marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-03-27 03:03:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

frontend: accessibility improvements

Browse source
This commit is contained in:
Marco Allegretti 2026-02-12 17:55:33 +01:00
parent 30c6073126
commit 8c794432a3
3 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -118,6 +118,10 @@
overflow: hidden; overflow: hidden;
} }
#main-content {
scroll-margin-top: 6rem;
}
.skip-link { .skip-link {
position: fixed; position: fixed;
top: 0.75rem; top: 0.75rem;
@ -138,6 +142,18 @@
transform: translateY(0); transform: translateY(0);
} }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
::selection { ::selection {
background: var(--color-primary-muted); background: var(--color-primary-muted);
} }
@ -159,11 +175,11 @@
color: var(--color-primary-hover); color: var(--color-primary-hover);
} }
:where(a, button, input, textarea, select):focus { :where(a, button, input, textarea, select, summary):focus {
outline: none; outline: none;
} }
:where(a, button, input, textarea, select):focus-visible { :where(a, button, input, textarea, select, summary):focus-visible {
box-shadow: var(--focus-ring); box-shadow: var(--focus-ring);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }

10
frontend/src/layouts/Layout.astro
View file

@ -128,6 +128,12 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
navToggle.setAttribute('aria-expanded', 'true'); navToggle.setAttribute('aria-expanded', 'true');
if (window.matchMedia('(max-width: 640px)').matches) { if (window.matchMedia('(max-width: 640px)').matches) {
document.body.classList.add('is-scroll-locked'); document.body.classList.add('is-scroll-locked');
const firstFocusable = nav.querySelector(
'#nav-menu a, #nav-menu button, #nav-menu input, #nav-menu select, #nav-menu textarea, #nav-menu summary'
);
if (firstFocusable instanceof HTMLElement) {
firstFocusable.focus();
}
} }
} }
@ -136,6 +142,7 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
nav.classList.remove('is-open'); nav.classList.remove('is-open');
navToggle.setAttribute('aria-expanded', 'false'); navToggle.setAttribute('aria-expanded', 'false');
document.body.classList.remove('is-scroll-locked'); document.body.classList.remove('is-scroll-locked');
navToggle.focus();
} }
if (nav && navToggle) { if (nav && navToggle) {
@ -187,8 +194,9 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
const userData = JSON.parse(user); const userData = JSON.parse(user);
navAuth.innerHTML = ` navAuth.innerHTML = `
<a href="/dashboard">Dashboard</a> <a href="/dashboard">Dashboard</a>
<a href="/notifications" class="nav-notifications" id="nav-notifications"> <a href="/notifications" class="nav-notifications" id="nav-notifications" aria-label="Notifications">
<span class="notif-icon">🔔</span> <span class="notif-icon">🔔</span>
<span class="sr-only">Notifications</span>
<span class="notif-badge" id="notif-badge" style="display:none;">0</span> <span class="notif-badge" id="notif-badge" style="display:none;">0</span>
</a> </a>
<a href="/settings">Settings</a> <a href="/settings">Settings</a>

7
frontend/src/layouts/PublicLayout.astro
View file

@ -165,6 +165,12 @@ const defaultTheme = DEFAULT_THEME;
toggle.setAttribute('aria-expanded', 'true'); toggle.setAttribute('aria-expanded', 'true');
if (window.matchMedia('(max-width: 768px)').matches) { if (window.matchMedia('(max-width: 768px)').matches) {
document.body.classList.add('is-scroll-locked'); document.body.classList.add('is-scroll-locked');
const firstFocusable = nav.querySelector(
'#public-nav-menu a, #public-nav-menu button, #public-nav-menu input, #public-nav-menu select, #public-nav-menu textarea, #public-nav-menu summary'
);
if (firstFocusable instanceof HTMLElement) {
firstFocusable.focus();
}
} }
} }
@ -173,6 +179,7 @@ const defaultTheme = DEFAULT_THEME;
nav.classList.remove('is-open'); nav.classList.remove('is-open');
toggle.setAttribute('aria-expanded', 'false'); toggle.setAttribute('aria-expanded', 'false');
document.body.classList.remove('is-scroll-locked'); document.body.classList.remove('is-scroll-locked');
toggle.focus();
} }
function setActiveNav() { function setActiveNav() {