From 8e447a55a8c62d00009d96eca4f5c8d2ab6f0113 Mon Sep 17 00:00:00 2001 From: Runxi Yu Date: Mon, 17 Feb 2025 19:58:44 +0800 Subject: 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 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css index 4f2ceab..765f37a 100644 --- a/static/style.css +++ b/static/style.css @@ -46,8 +46,8 @@ html, code, pre { 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 @@ pre.chunk { .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 { -- cgit v1.2.3