From 808f9b86ca04ec0a7fb46b5e55d43c3b0b561888 Mon Sep 17 00:00:00 2001
From: Bryce Kwon <bryce@brycekwon.com>
Date: Thu, 5 Nov 2026 20:28:50 -1000
Subject: Let a keyboard scroll the hex dump

Chrome and Firefox already let an overflowing box take focus, with
their own ring, but WebKit does not. The table takes focus on a mouse
click as well, where focus-visible keeps the ring off.
---
 assets/cgit.css     |  3 ++-
 source/ui-tree.c    |  4 +++-
 tests/t0104-tree.sh | 11 ++++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/cgit.css b/assets/cgit.css
index fed60f5..cc3ad51 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -184,7 +184,8 @@ div#cgit input[type="submit"]:hover {
 
 div#cgit a:focus-visible,
 div#cgit select:focus-visible,
-div#cgit input:focus-visible {
+div#cgit input:focus-visible,
+div#cgit table.bin-blob:focus-visible {
   outline: solid 2px var(--link);
   outline-offset: 1px;
 }
diff --git a/source/ui-tree.c b/source/ui-tree.c
index eed5f25..b682f3e 100644
--- a/source/ui-tree.c
+++ b/source/ui-tree.c
@@ -117,7 +117,9 @@ static void print_binary_buffer(char *buf, size_t size, const char *path, const
 	char ascii[HEXDUMP_ROW_BYTES + 1];
 	struct strbuf row = STRBUF_INIT;
 
-	html("<table class='bin-blob'>\n");
+	// The table scrolls sideways on a narrow window, and since nothing in
+	// it can take focus, the table has to for a keyboard to scroll it.
+	html("<table class='bin-blob' tabindex='0' aria-label='Hex dump'>\n");
 	html("<tr><th>ofs</th><th>hex dump</th><th>ascii</th></tr>\n");
 
 	// A row goes out in one write rather than a write per byte.
diff --git a/tests/t0104-tree.sh b/tests/t0104-tree.sh
index 21fc74b..d2f5234 100755
--- a/tests/t0104-tree.sh
+++ b/tests/t0104-tree.sh
@@ -270,11 +270,20 @@ test_expect_success 'a binary file in the tree shows as a hex dump' '
 	) &&
 	cgitrc_repo binrc bin &&
 	cgit_rc binrc "url=bin/tree/blob.bin" >tmp &&
-	grep "<table class=.bin-blob.>" tmp &&
+	grep "<table class=.bin-blob. tabindex=.0. aria-label=.Hex dump.>" tmp &&
 	grep "<td class=.right.>0000</td><td class=.hex.> 00 01 02 62 69 6e" tmp &&
 	! grep "class=.truncated." tmp
 '
 
+# The dump scrolls sideways inside its own table, which a keyboard reaches
+# by focusing the table, so the table takes the focus ring links have.
+test_expect_success 'a focused hex dump shows the focus ring' '
+	sed -n "/^div#cgit a:focus-visible,$/,/^}/p" \
+		"$TEST_OUTPUT_DIRECTORY/../assets/cgit.css" >rule &&
+	grep "^div#cgit table.bin-blob:focus-visible" rule &&
+	grep "^  outline: solid 2px var(--link);$" rule
+'
+
 # Each byte of the dump costs several bytes of markup, so a large binary is
 # dumped up to its first 64 KB and links to the whole file.
 test_expect_success 'a large binary is dumped only in part' '
-- 
cgit 2.12.1