Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

a11y: focus-visible on .streamer-profile-btn + type=button on storage open btn

Browse Source 
Two small targeted fixes:

- .streamer-profile-btn (the action buttons in the streamer profile header: Record now, Open on Twitch, Refresh) had :hover but no :focus-visible. Keyboard users tabbing through the profile header buttons couldn't tell which one was focused. Added a purple ring for the default variant and the inner-white + outer-purple double-ring for the .primary variant (matches the convention used everywhere else for purple-background buttons).

- The dynamically-built Storage table "Open" button (renderer-settings.ts:397) was created via document.createElement('button') without setting type. Browsers default to type="submit" for <button> elements, which is fine outside a form but defensive coding to mark it explicitly. Set openBtn.type = 'button'.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 08:27:38 +02:00
parent 71fedcb34c
commit 85128086b4
2 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer-settings.ts
View File

@ -395,6 +395,7 @@ function renderStorageStats(stats: StorageStatsResult): void {
}
const openCell = document.createElement('td');
const openBtn = document.createElement('button');
openBtn.type = 'button';
openBtn.textContent = UI_TEXT.static.storageOpen;
openBtn.className = 'btn-pill';
openBtn.addEventListener('click', () => {

14
src/styles.css
View File

@ -4180,6 +4180,20 @@ input[type="number"]::-webkit-outer-spin-button {
box-shadow: 0 4px 14px rgba(145, 70, 255, 0.4);
}
/* Focus-visible for the profile action buttons (Record now, Open on
Twitch, Refresh). Default variant gets a purple ring; the primary
variant already has a purple background so it gets the inner-white
+ outer-purple double ring used elsewhere for purple-bg buttons. */
.streamer-profile-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
border-color: rgba(145, 70, 255, 0.6);
}
.streamer-profile-btn.primary:focus-visible {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
}
/* Skeleton loading state */
.streamer-profile-skeleton .streamer-profile-skel-block {
background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);