Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
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.
| -rw-r--r-- | assets/cgit.css | 3 | |
| -rw-r--r-- | source/ui-tree.c | 4 | |
| -rwxr-xr-x | 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' ' |