Merge pull request #1295 from mathjax/update/explorer-keys

Add explorer key actions and improve auto-voice handling

Author: dpvc

ts/a11y/complexity/collapse.ts

@@ -195,6 +195,7 @@ export class Collapse {
       (node, complexity) => {
         complexity = this.uncollapseChild(complexity, node, 0);
         if (complexity > (this.cutoff.sqrt as number)) {
+          node.setProperty('collapse-variant', true);
           complexity = this.recordCollapse(
             node,
             complexity,
@@ -209,6 +210,7 @@ export class Collapse {
       (node, complexity) => {
         complexity = this.uncollapseChild(complexity, node, 0, 2);
         if (complexity > (this.cutoff.sqrt as number)) {
+          node.setProperty('collapse-variant', true);
           complexity = this.recordCollapse(
             node,
             complexity,
@@ -582,6 +584,9 @@ export class Collapse {
     const factory = this.complexity.factory;
     const marker = node.getProperty('collapse-marker') as string;
     const parent = node.parent;
+    const variant = node.getProperty('collapse-variant')
+      ? { mathvariant: '-tex-variant' }
+      : {};
     const maction = factory.create(
       'maction',
       {
@@ -594,7 +599,7 @@ export class Collapse {
         ),
       },
       [
-        factory.create('mtext', { mathcolor: 'blue' }, [
+        factory.create('mtext', { mathcolor: 'blue', ...variant }, [
           (factory.create('text') as TextNode).setText(marker),
         ]),
       ]

ts/a11y/explorer.ts

@@ -463,6 +463,32 @@ export function ExplorerMathDocumentMixin<
       'mjx-help-dialog > input': {
         margin: '.5em 2em',
       },
+      'mjx-help-dialog kbd': {
+        display: 'inline-block',
+        padding: '3px 5px',
+        'font-size': '11px',
+        'line-height': '10px',
+        color: '#444d56',
+        'vertical-align': 'middle',
+        'background-color': '#fafbfc',
+        border: 'solid 1.5px #c6cbd1',
+        'border-bottom-color': '#959da5',
+        'border-radius': '3px',
+        'box-shadow': 'inset -.5px -1px 0 #959da5',
+      },
+      'mjx-help-dialog ul': {
+        'list-style-type': 'none',
+      },
+      'mjx-help-dialog li': {
+        'margin-bottom': '.5em',
+      },
+      'mjx-help-background': {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
     };
 
     /**