Compare commits

..

2 Commits

Author SHA1 Message Date
xRangerDE
b251d795dc release: 4.6.113 streamer-profile-btn focus-visible + storage open type=button
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 08:27:50 +02:00
xRangerDE
85128086b4 a11y: focus-visible on .streamer-profile-btn + type=button on storage open btn
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>
2026-05-11 08:27:38 +02:00
4 changed files with 18 additions and 3 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.112", "version": "4.6.113",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.112", "version": "4.6.113",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"axios": "^1.6.0", "axios": "^1.6.0",

View File

@ -1,6 +1,6 @@
{ {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.112", "version": "4.6.113",
"description": "Twitch VOD Manager - Download Twitch VODs easily", "description": "Twitch VOD Manager - Download Twitch VODs easily",
"main": "dist/main.js", "main": "dist/main.js",
"author": "xRangerDE", "author": "xRangerDE",

View File

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

View File

@ -4180,6 +4180,20 @@ input[type="number"]::-webkit-outer-spin-button {
box-shadow: 0 4px 14px rgba(145, 70, 255, 0.4); 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 */ /* Skeleton loading state */
.streamer-profile-skeleton .streamer-profile-skel-block { .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%); background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);