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

a11y: focus-visible on .modal-close + .queue-retry-btn

Browse Source 
Two more interactive buttons that had hover + active states but no keyboard focus indicator:

- .modal-close (the X-close button used by all 5 modals — update, clip-cutter, events viewer, chat viewer, template guide). Red-toned ring matching the hover colour family.

- .queue-retry-btn (per-item retry button on failed queue items). Purple ring matching the hover state's accent-purple feedback.

Continues the focus-visible pass started in 4.6.81/82/103. Closes the remaining shell-and-modal buttons that keyboard users could tab to without seeing where they were.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 07:42:21 +02:00
parent 03f3756523
commit 9be864e614
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/styles.css
View File

@ -968,6 +968,12 @@ select option {
transform: scale(0.92);
}
.queue-retry-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
border-color: rgba(145, 70, 255, 0.55);
}
.queue-main {
flex: 1;
min-width: 0;
@ -3349,6 +3355,12 @@ body.theme-light .modal {
border-color: rgba(255, 70, 70, 0.55);
}
.modal-close:focus-visible {
outline: none;
border-color: rgba(255, 70, 70, 0.6);
box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.6);
}
.modal-close:active {
transform: scale(0.92);
}