From 8e447a55a8c62d00009d96eca4f5c8d2ab6f0113 Mon Sep 17 00:00:00 2001
From: Runxi Yu <me@runxiyu.org>
Date: Mon, 17 Feb 2025 19:58:44 +0800
Subject: [PATCH] style.css: :focus -> :focus-visible

Users who actually click on the header label won't get that focus
outline any more. It's still provided for keyboard users, for whom the
outline may be necessary for accessibility.

References: https://stackoverflow.com/questions/31402576

---
 static/style.css | 6 +++---

diff --git a/static/style.css b/static/style.css
index 4f2ceab83f05d11fc890085d1b69d2fab526f692..765f37a341b51ec6491ed8d334a0c06cfd1cb292 100644
--- a/static/style.css
+++ b/static/style.css
@@ -46,8 +46,8 @@ .toggle-table-off, .toggle-table-on {
 	opacity: 0;
 	position: absolute;
 }
-.toggle-table-off:focus + table > thead > tr > th > label,
-.toggle-table-on:focus + table > thead > tr > th > label {
+.toggle-table-off:focus-visible + table > thead > tr > th > label,
+.toggle-table-on:focus-visible + table > thead > tr > th > label {
 	outline: 1.5px var(--primary-color) solid;
 }
 .toggle-table-off + table > thead > tr > th, .toggle-table-on + table > thead > tr > th {
@@ -203,7 +203,7 @@ }
 .toggle-on-content {
 	display: none;
 }
-.toggle-on-toggle:focus + .toggle-on-header, .toggle-off-toggle:focus + .toggle-off-header {
+.toggle-on-toggle:focus-visible + .toggle-on-header, .toggle-off-toggle:focus-visible + .toggle-off-header {
 	outline: 1.5px var(--primary-color) solid;
 }
 .toggle-on-toggle:checked + .toggle-on-header + .toggle-on-content {

-- 
2.48.1