From db51337f21bdf608ac888cfd4de8893c35976e1d Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Fri, 29 Aug 2025 11:36:00 -0400 Subject: [PATCH 1/2] Add option to disable explorer help --- ts/a11y/explorer.ts | 1 + ts/a11y/explorer/KeyExplorer.ts | 20 ++++++++++++++++---- ts/ui/menu/MenuHandler.ts | 1 + 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/ts/a11y/explorer.ts b/ts/a11y/explorer.ts index 39a11fe3f..71e968ef3 100644 --- a/ts/a11y/explorer.ts +++ b/ts/a11y/explorer.ts @@ -321,6 +321,7 @@ export function ExplorerMathDocumentMixin< public static OPTIONS: OptionList = { ...BaseDocument.OPTIONS, enableExplorer: hasWindow, // only activate in interactive contexts + enableExplorerHelp: true, // help dialog is enabled renderActions: expandable({ ...BaseDocument.OPTIONS.renderActions, explorable: [STATE.EXPLORER] diff --git a/ts/a11y/explorer/KeyExplorer.ts b/ts/a11y/explorer/KeyExplorer.ts index 4bf7897c6..6a5776f70 100644 --- a/ts/a11y/explorer/KeyExplorer.ts +++ b/ts/a11y/explorer/KeyExplorer.ts @@ -605,8 +605,13 @@ export class SpeechExplorer /** * Open the help dialog, and refocus when it closes. + * + * @returns {boolean | void} True cancels the event */ - protected hKey() { + protected hKey(): boolean | void { + if (!this.document.options.enableExplorerHelp) { + return true; + } this.refocus = this.current; this.help(); } @@ -933,6 +938,9 @@ export class SpeechExplorer * Displays the help dialog. */ protected help() { + if (!this.document.options.enableExplorerHelp) { + return; + } const isDialog = !!window.HTMLDialogElement; const adaptor = this.document.adaptor; const helpBackground = isDialog @@ -1081,7 +1089,7 @@ export class SpeechExplorer if (describe) { let description = this.description === this.none ? '' : ', ' + this.description; - if (this.document.options.a11y.help) { + if (this.document.options.a11y.help && this.document.options.enableExplorerHelp) { description += ', press h for help'; } speech += description; @@ -1557,7 +1565,9 @@ export class SpeechExplorer // and add the info icon. // this.node.classList.add('mjx-explorer-active'); - this.node.append(this.document.infoIcon); + if (this.document.options.enableExplorerHelp) { + this.node.append(this.document.infoIcon); + } // // Get the node to make current, and determine if we need to add a // speech node (or just use the top-level node), then set the @@ -1593,7 +1603,9 @@ export class SpeechExplorer this.node.setAttribute('aria-roledescription', description); } this.node.classList.remove('mjx-explorer-active'); - this.document.infoIcon.remove(); + if (this.document.options.enableExplorerHelp) { + this.document.infoIcon.remove(); + } this.pool.unhighlight(); this.magnifyRegion.Hide(); this.region.Hide(); diff --git a/ts/ui/menu/MenuHandler.ts b/ts/ui/menu/MenuHandler.ts index bf5498d93..1dfdb4e70 100644 --- a/ts/ui/menu/MenuHandler.ts +++ b/ts/ui/menu/MenuHandler.ts @@ -201,6 +201,7 @@ export function MenuMathDocumentMixin( enableSpeech: true, enableBraille: true, enableExplorer: true, + enableExplorerHelp: true, enrichSpeech: 'none', enrichError: (_doc: MenuMathDocument, _math: MenuMathItem, err: Error) => console.warn('Enrichment Error:', err), From 72528a95484c8b54944c2291d0b5f8644b14e82a Mon Sep 17 00:00:00 2001 From: "Davide P. Cervone" Date: Wed, 3 Sep 2025 10:27:24 -0400 Subject: [PATCH 2/2] Update formatting for prettier --- ts/a11y/explorer.ts | 2 +- ts/a11y/explorer/KeyExplorer.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/ts/a11y/explorer.ts b/ts/a11y/explorer.ts index 71e968ef3..f02d93ebe 100644 --- a/ts/a11y/explorer.ts +++ b/ts/a11y/explorer.ts @@ -442,7 +442,7 @@ export function ExplorerMathDocumentMixin< 'text-align': 'right', }, '.mjx-help-dialog::backdrop': { - opacity: .75, + opacity: 0.75, }, 'mjx-help-dialog': { 'font-style': 'normal', diff --git a/ts/a11y/explorer/KeyExplorer.ts b/ts/a11y/explorer/KeyExplorer.ts index 6a5776f70..4df99c1d8 100644 --- a/ts/a11y/explorer/KeyExplorer.ts +++ b/ts/a11y/explorer/KeyExplorer.ts @@ -1089,7 +1089,10 @@ export class SpeechExplorer if (describe) { let description = this.description === this.none ? '' : ', ' + this.description; - if (this.document.options.a11y.help && this.document.options.enableExplorerHelp) { + if ( + this.document.options.a11y.help && + this.document.options.enableExplorerHelp + ) { description += ', press h for help'; } speech += description;