From 0e9a48699dac240665ecea96b9a244dbde5dcac8 Mon Sep 17 00:00:00 2001 From: eunhhu Date: Mon, 28 Sep 2026 13:10:25 +0100 Subject: Make the web surface accessible the way the say surface is, checked in Chromium's accessibility tree Lists are listboxes that keep the keyboard focus, the focused row their active descendant, each option with its place in the whole list though only the visible rows are drawn; tables are grids with row indices; tones other than normal and muted are said, not only coloured; keys are named buttons. The page now updates in place instead of rebuilding each list, so the focus a screen reader follows survives every redraw. The browser test reads Chromium's accessibility tree: roles, names, focus, selection and the active descendant moving within the same list. --- surfaces/web.c | 83 +++++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 59 insertions(+), 24 deletions(-) (limited to 'surfaces/web.c') diff --git a/surfaces/web.c b/surfaces/web.c index 535d92f..7103c8f 100644 --- a/surfaces/web.c +++ b/surfaces/web.c @@ -204,44 +204,79 @@ static const char *const page_parts[] = { "border-radius:8px;background:transparent;color:inherit;cursor:pointer}button:hover{border-color:var(--focus)}" "footer{margin-top:14px;color:var(--muted);font-size:13px}" "kbd{font:12px ui-monospace,monospace;border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-right:4px}" +"#keys{display:flex;flex-wrap:wrap;gap:6px}#keys button{padding:2px 8px;font-size:13px;color:var(--muted)}" +".sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}" +"ul:focus,table:focus{outline:2px solid var(--focus);outline-offset:2px}" "

", "

" -"

" +"" +"" ""}; -- cgit v1.2.3