optimize accessability (screen readers 'n stuff)

1 files changed, 21 insertions, 3 deletions

diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts
index c23beb6..1133afe 100644
--- a/client-web/source/helper.ts
+++ b/client-web/source/helper.ts
@@ -9,12 +9,25 @@ import { PREFS } from "./preferences/mod.ts";
 
 const elem = <K extends keyof HTMLElementTagNameMap>(s: K): HTMLElementTagNameMap[K] => document.createElement(s)
 
-interface Opts<El> { class?: string[] | string, id?: string, src?: string, onclick?: (e: El) => void }
+interface Opts<El> {
+    class?: string[] | string,
+    id?: string, src?: string,
+    for?: string,
+    onclick?: (e: El) => void,
+    role?: "dialog"
+    aria_label?: string
+    aria_live?: "polite" | "assertive"
+    aria_modal?: boolean
+}
 
 function apply_opts<El extends HTMLElement>(e: El, o: Opts<El> | undefined) {
     if (!o) return
     if (o.id) e.id = o.id
     if (o.onclick) e.onclick = () => o.onclick!(e)
+    if (o.aria_label) e.ariaLabel = o.aria_label
+    if (o.aria_live) e.ariaLive = o.aria_live
+    if (o.for) (e as unknown as HTMLLabelElement).htmlFor = o.for
+    if (o.aria_modal) e.ariaModal = "true"
     if (typeof o?.class == "string") e.classList.add(o.class)
     if (typeof o?.class == "object") e.classList.add(...o.class)
 }
@@ -42,6 +55,9 @@ export const eh5 = elem_with_content("h5")
 export const eh6 = elem_with_content("h6")
 export const epre = elem_with_content("pre")
 export const ediv = elem_with_children("div")
+export const efooter = elem_with_children("footer")
+export const esection = elem_with_children("section")
+export const enav = elem_with_children("nav")
 export const etr = elem_with_children("tr")
 export const etd = elem_with_children("td")
 export const eth = elem_with_children("th")
@@ -59,10 +75,12 @@ export class OverlayUi {
     }
     get shown() { return this._shown }
     set shown(v: boolean) {
-        if (v && !this._shown) OVERLAYS.append(this.el)
-        if (!v && this._shown) OVERLAYS.removeChild(this.el)
+        if (v && !this._shown) OVERLAYS.append(this.el), this.on_show()
+        if (!v && this._shown) OVERLAYS.removeChild(this.el), this.on_hide()
         this._shown = v
     }
+    on_show() { }
+    on_hide() { }
 }
 
 export function image_view(url: string, opts?: Opts<HTMLElement>): HTMLElement {