From 5ecd167e0fbab275e24e5138892045c879823156 Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Fri, 8 Aug 2025 08:29:44 -0400 Subject: [PATCH 1/2] Update key explorer to use dialog element for help dialog. (mathjax/MathJax#3405) --- ts/a11y/explorer.ts | 20 ++++++++++----- ts/a11y/explorer/KeyExplorer.ts | 43 +++++++++++++++++++++------------ 2 files changed, 42 insertions(+), 21 deletions(-) diff --git a/ts/a11y/explorer.ts b/ts/a11y/explorer.ts index 7964807c0..39a11fe3f 100644 --- a/ts/a11y/explorer.ts +++ b/ts/a11y/explorer.ts @@ -420,21 +420,30 @@ export function ExplorerMathDocumentMixin< 'mjx-help-sizer': { position: 'fixed', - width: '40%', + width: '45%', 'max-width': '30em', top: '3em', left: '50%', }, - 'mjx-help-dialog': { + 'mjx-help-sizer > .mjx-help-dialog': { position: 'absolute', width: '200%', left: '-100%', + 'max-width': 'initial', + }, + '.mjx-help-dialog': { + 'max-width': 'calc(min(60em, 90%))', border: '3px outset', 'border-radius': '15px', color: 'black', 'background-color': '#DDDDDD', - 'z-index': '301', + 'box-shadow': '0px 10px 20px #808080', 'text-align': 'right', + }, + '.mjx-help-dialog::backdrop': { + opacity: .75, + }, + 'mjx-help-dialog': { 'font-style': 'normal', 'text-indent': 0, 'text-transform': 'none', @@ -443,8 +452,6 @@ export function ExplorerMathDocumentMixin< 'word-spacing': 'normal', 'word-wrap': 'normal', float: 'none', - 'box-shadow': '0px 10px 20px #808080', - outline: 'none', }, 'mjx-help-dialog > h1': { 'font-size': '24px', @@ -453,7 +460,7 @@ export function ExplorerMathDocumentMixin< }, 'mjx-help-dialog > div': { margin: '0 1em', - padding: '3px', + padding: '3px 10px', overflow: 'auto', height: '20em', border: '2px inset black', @@ -488,6 +495,7 @@ export function ExplorerMathDocumentMixin< left: 0, right: 0, bottom: 0, + 'z-index': 1001, }, }; diff --git a/ts/a11y/explorer/KeyExplorer.ts b/ts/a11y/explorer/KeyExplorer.ts index 943def94d..26bc35522 100644 --- a/ts/a11y/explorer/KeyExplorer.ts +++ b/ts/a11y/explorer/KeyExplorer.ts @@ -933,18 +933,23 @@ export class SpeechExplorer * Displays the help dialog. */ protected help() { + const isDialog = !!window.HTMLDialogElement; const adaptor = this.document.adaptor; - const helpBackground = adaptor.node('mjx-help-background'); + const helpBackground = isDialog ? null : adaptor.node('mjx-help-background'); const close = (event: Event) => { - helpBackground.remove(); + if (isDialog) { + helpDialog.close(); + helpDialog.remove(); + } else { + helpBackground.remove(); + } this.node.focus(); this.stopEvent(event); }; - helpBackground.addEventListener('click', close); - const helpSizer = adaptor.node('mjx-help-sizer', {}, [ + const helpDialog = adaptor.node('dialog', {closedby: 'any', class: 'mjx-help-dialog'}, [ adaptor.node( 'mjx-help-dialog', - { tabindex: 0, role: 'dialog', 'aria-labeledby': 'mjx-help-label' }, + { role: 'dialog', 'aria-labeledby': 'mjx-help-label' }, [ adaptor.node('h1', { id: 'mjx-help-label' }, [ adaptor.text('MathJax Expression Explorer Help'), @@ -952,21 +957,29 @@ export class SpeechExplorer adaptor.node('div'), adaptor.node('input', { type: 'button', value: 'Close' }), ] - ), - ]); - helpBackground.append(helpSizer); - const help = helpSizer.firstChild as HTMLElement; - help.addEventListener('click', (event) => this.stopEvent(event)); + ) + ]) as HTMLDialogElement; + const help = helpDialog.firstChild as HTMLElement; + const [title, select] = helpData.get(context.os); + (help.childNodes[1] as HTMLElement).innerHTML = helpMessage(title, select); help.lastChild.addEventListener('click', close); - help.addEventListener('keydown', (event: KeyboardEvent) => { + helpDialog.addEventListener('keydown', (event: KeyboardEvent) => { if (event.code === 'Escape') { close(event); } }); - const [title, select] = helpData.get(context.os); - (help.childNodes[1] as HTMLElement).innerHTML = helpMessage(title, select); - document.body.append(helpBackground); - help.focus(); + if (isDialog) { + document.body.append(helpDialog); + helpDialog.showModal(); + } else { + helpDialog.setAttribute('tabindex', 0); + help.addEventListener('click', (event) => this.stopEvent(event)); + helpBackground.addEventListener('click', close); + const helpSizer = adaptor.node('mjx-help-sizer', {}, [helpDialog]); + helpBackground.append(helpSizer); + document.body.append(helpBackground); + } + helpDialog.focus(); } /********************************************************************/ From b92c32967eb8d1df0111387738283dd7c9d67b5f Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Fri, 8 Aug 2025 09:16:58 -0400 Subject: [PATCH 2/2] Reformat for prettier, and fix string param to setAttribute --- ts/a11y/explorer/KeyExplorer.ts | 36 +++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/ts/a11y/explorer/KeyExplorer.ts b/ts/a11y/explorer/KeyExplorer.ts index 26bc35522..4bf7897c6 100644 --- a/ts/a11y/explorer/KeyExplorer.ts +++ b/ts/a11y/explorer/KeyExplorer.ts @@ -935,7 +935,9 @@ export class SpeechExplorer protected help() { const isDialog = !!window.HTMLDialogElement; const adaptor = this.document.adaptor; - const helpBackground = isDialog ? null : adaptor.node('mjx-help-background'); + const helpBackground = isDialog + ? null + : adaptor.node('mjx-help-background'); const close = (event: Event) => { if (isDialog) { helpDialog.close(); @@ -946,19 +948,23 @@ export class SpeechExplorer this.node.focus(); this.stopEvent(event); }; - const helpDialog = adaptor.node('dialog', {closedby: 'any', class: 'mjx-help-dialog'}, [ - adaptor.node( - 'mjx-help-dialog', - { role: 'dialog', 'aria-labeledby': 'mjx-help-label' }, - [ - adaptor.node('h1', { id: 'mjx-help-label' }, [ - adaptor.text('MathJax Expression Explorer Help'), - ]), - adaptor.node('div'), - adaptor.node('input', { type: 'button', value: 'Close' }), - ] - ) - ]) as HTMLDialogElement; + const helpDialog = adaptor.node( + 'dialog', + { closedby: 'any', class: 'mjx-help-dialog' }, + [ + adaptor.node( + 'mjx-help-dialog', + { role: 'dialog', 'aria-labeledby': 'mjx-help-label' }, + [ + adaptor.node('h1', { id: 'mjx-help-label' }, [ + adaptor.text('MathJax Expression Explorer Help'), + ]), + adaptor.node('div'), + adaptor.node('input', { type: 'button', value: 'Close' }), + ] + ), + ] + ) as HTMLDialogElement; const help = helpDialog.firstChild as HTMLElement; const [title, select] = helpData.get(context.os); (help.childNodes[1] as HTMLElement).innerHTML = helpMessage(title, select); @@ -972,7 +978,7 @@ export class SpeechExplorer document.body.append(helpDialog); helpDialog.showModal(); } else { - helpDialog.setAttribute('tabindex', 0); + helpDialog.setAttribute('tabindex', '0'); help.addEventListener('click', (event) => this.stopEvent(event)); helpBackground.addEventListener('click', close); const helpSizer = adaptor.node('mjx-help-sizer', {}, [helpDialog]);