diff options
| -rw-r--r-- | client-web/source/helper.ts | 6 | ||||
| -rw-r--r-- | client-web/source/menu.ts | 17 |
2 files changed, 21 insertions, 2 deletions
diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts index 49ec121..3676ca3 100644 --- a/client-web/source/helper.ts +++ b/client-web/source/helper.ts @@ -17,7 +17,9 @@ interface Opts<E> { alt?: string, onclick?: (e: E) => void, onchange?: (e: E) => void, - role?: "dialog" | "separator" | "switch" | "button" | "log" | "group", + onkeydown?: (e: E, ev: KeyboardEvent) => void, + onkeyup?: (e: E, ev: KeyboardEvent) => void, + role?: "dialog" | "separator" | "switch" | "button" | "log" | "group" | "toolbar", aria_label?: string aria_live?: "polite" | "assertive" | "off", aria_modal?: boolean @@ -30,6 +32,8 @@ function apply_opts<E extends HTMLElement>(el: E, o: Opts<E>) { if (o.id) el.id = o.id if (o.onclick) el.onclick = () => o.onclick!(el) if (o.onchange) el.onchange = () => o.onchange!(el) + if (o.onkeydown) el.onkeydown = ev => o.onkeydown!(el, ev) + if (o.onkeyup) el.onkeyup = ev => o.onkeyup!(el, ev) if (o.for) (el as unknown as HTMLLabelElement).htmlFor = o.for if (o.type && el instanceof HTMLInputElement) el.type = o.type if (o.href && el instanceof HTMLAnchorElement) el.href = o.href; diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts index ee2cdca..7554053 100644 --- a/client-web/source/menu.ts +++ b/client-web/source/menu.ts @@ -48,7 +48,22 @@ export function control_bar(state: AppState, side_ui_container: HTMLElement): HT e("button", { icon: "file", onclick: () => state.room?.local_user.await_add_resource(create_file_res()) }, "File"), ] chat_control = chat.set_state; - return e("nav", { class: "control-bar" }, + return e("div", { + class: "control-bar", + role: "toolbar", + aria_label: "Controls", + onkeydown: (_el, ev) => { + if (ev.code == "ArrowLeft") { + let n = document.activeElement?.previousElementSibling + if (n instanceof HTMLElement && n.role == "separator") n = n.previousElementSibling + if (n instanceof HTMLElement) n.focus() + } else if (ev.code == "ArrowRight") { + let n = document.activeElement?.nextElementSibling + if (n instanceof HTMLElement && n.role == "separator") n = n.nextElementSibling + if (n instanceof HTMLElement) n.focus() + } + } + }, leave, e("span", { role: "separator" }, "|"), chat.el, |