vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboard(modal): label the dialog via aria-labelledby for a11y

Browse source 
Give the themed dialog an accessible name (role=dialog requires one):
label it by its title when present, else by its message, via
aria-labelledby on the box. Addresses an a11y review note on the
stop-confirm modal.
This commit is contained in:
iris 2026-06-19 01:20:19 +02:00 • committed by mara
commit a45b56f658
1 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/packages/dashboard/src/modal.js
View file

@ -52,9 +52,19 @@ export function openDialog(opts = {}) {
return { spec: b, btn };
});
const box = el('div', { class: 'tc-box', role: 'dialog', 'aria-modal': 'true' },
title ? el('div', { class: 'tc-title' }, title) : null,
message ? el('div', { class: 'tc-message' }, message) : null,
// Give the dialog an accessible name: label it by its title if present,
// else by its message, via `aria-labelledby` (a11y — role=dialog needs a
// name). Only the labelling element carries the id.
const labelId = 'tc-dlg-' + Math.random().toString(36).slice(2, 9);
const titleEl = title ? el('div', { class: 'tc-title', id: labelId }, title) : null;
const messageEl = message
? el('div', title ? { class: 'tc-message' } : { class: 'tc-message', id: labelId }, message)
: null;
const boxAttrs = { class: 'tc-box', role: 'dialog', 'aria-modal': 'true' };
if (titleEl || messageEl) boxAttrs['aria-labelledby'] = labelId;
const box = el('div', boxAttrs,
titleEl,
messageEl,
content || null,
el('div', { class: 'tc-actions' }, ...btnEls.map((b) => b.btn)));