Skip to content

fix(ui): a11y skip link + focus rings for info links and refresh button #113

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
comnam90 merged 2 commits into from
May 25, 2026
Merged

fix(ui): a11y skip link + focus rings for info links and refresh button #113

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
5c4ac8f
fix(ui): add skip-to-content link and focus-visible rings for info-pa…
comnam90 May 25, 2026
330f1e4
fix(ui): address review feedback on a11y skip link
comnam90 May 25, 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
33 changes: 30 additions & 3 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,28 @@
height: 100vh;
height: 100dvh;
}


.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 9999;
padding: 8px 14px;
background: var(--accent);
color: var(--bg);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 600;
text-decoration: none;
border-radius: 6px;
transition: top 0.15s ease;
}
.skip-link:focus-visible {
top: 8px;
outline: 2px solid var(--text);
outline-offset: 2px;
}

.map-container {
flex: 1;
min-height: 0;
Expand Down Expand Up @@ -757,6 +778,11 @@
transition: border-color 0.15s, background 0.15s;
}
.info-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.info-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
.info-link-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-mute); }
.info-link:hover .info-link-icon { color: var(--accent); }
.info-link span { flex: 1; }
Expand Down Expand Up @@ -801,6 +827,7 @@
</style>
</head>
<body class="antialiased">
<a href="#map" class="skip-link">Skip to map</a>
<div class="app-container overflow-hidden">
Comment thread
comnam90 marked this conversation as resolved.
<header class="hud">
<div class="brand">
Expand Down Expand Up @@ -881,7 +908,7 @@ <h1 class="title"><em>Veeam</em> Data Cloud Service Map</h1>
</header>

<div class="map-container bg-[var(--bg)] transition-colors duration-300 relative">
<div id="map"></div>
<div id="map" tabindex="-1"></div>

<div id="mapLoading" class="absolute inset-0 flex items-center justify-center z-[1000]" style="background: rgba(10, 13, 18, 0.92); backdrop-filter: blur(4px);">
<div class="flex flex-col items-center gap-3">
Expand All @@ -904,7 +931,7 @@ <h1 class="title"><em>Veeam</em> Data Cloud Service Map</h1>
<h3 class="text-lg font-semibold mb-1" style="color: var(--text)">Failed to Load Map</h3>
<p class="text-sm max-w-xs" style="color: var(--text-mute)">The map failed to load. Please check your internet connection and try refreshing the page.</p>
</div>
<button onclick="location.reload()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors">
<button onclick="location.reload()" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
Refresh Page
</button>
</div>
Expand Down
11 changes: 8 additions & 3 deletions tests/ui.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -788,13 +788,18 @@ test.describe('Veeam Data Cloud Services Map - UI Tests', () => {
test.skip(testInfo.project.name === 'webkit' && process.platform === 'linux', 'Dynamic aria-hidden accessibility tree updates are unreliable in webkit on Linux');
test.skip(testInfo.project.name === 'Mobile Safari', 'Hardware keyboard navigation does not apply to mobile');
await page.keyboard.press('Tab');


const skipLink = page.getByRole('link', { name: 'Skip to map' });
await expect(skipLink).toBeFocused();

await page.keyboard.press('Tab');

const searchInput = page.getByRole('combobox', { name: 'Search regions' });
await expect(searchInput).toBeFocused();

await page.keyboard.press('Tab');
await page.keyboard.press('Tab');

const serviceButton = page.getByRole('button', { name: /all services/i });
await expect(serviceButton).toBeFocused();

Expand Down
Loading