From afc611d399d2780550ae04caa0e73e1c0c69a680 Mon Sep 17 00:00:00 2001
From: "Jeferson S. Brito" <30840709+jeferson-sb@users.noreply.github.com>
Date: Mon, 3 Jun 2024 13:31:51 -0300
Subject: [PATCH] fix(theme,a11y): handle overflow on long mathematical
 equation and make tables focusable  (#3932) (closes #3914)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 src/client/theme-default/styles/base.css |  3 +--
 src/node/markdown/markdown.ts            | 11 +++++++++++
 src/node/plugin.ts                       |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index da61b764..8041b6bc 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -242,8 +242,7 @@ vite-error-overlay {
 }
 
 mjx-container {
-  display: inline-block;
-  margin: auto 2px -2px;
+  overflow-x: auto;
 }
 
 mjx-container > svg {
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index bc1c3898..a423ee19 100644
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@@ -231,6 +231,10 @@ export const createMarkdownRenderer = async (
     )
     .use(lineNumberPlugin, options.lineNumbers)
 
+  md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
+    return '<table tabindex="0">\n'
+  }
+
   if (options.gfmAlerts !== false) {
     md.use(gitHubAlertsPlugin)
   }
@@ -287,6 +291,13 @@ export const createMarkdownRenderer = async (
       md.use(mathPlugin.default ?? mathPlugin, {
         ...(typeof options.math === 'boolean' ? {} : options.math)
       })
+      const orig = md.renderer.rules.math_block!
+      md.renderer.rules.math_block = (tokens, idx, options, env, self) => {
+        return orig(tokens, idx, options, env, self).replace(
+          /^<mjx-container /,
+          '<mjx-container tabindex="0" '
+        )
+      }
     } catch (error) {
       throw new Error(
         'You need to install `markdown-it-mathjax3` to use math support.'
diff --git a/src/node/plugin.ts b/src/node/plugin.ts
index 10bc5926..c91d9357 100644
--- a/src/node/plugin.ts
+++ b/src/node/plugin.ts
@@ -87,7 +87,7 @@ export async function createVitePressPlugin(
 
   if (markdown?.math) {
     isCustomElement = (tag) => {
-      if (['mjx-container', 'mjx-assistive-mml'].includes(tag)) {
+      if (tag.startsWith('mjx-')) {
         return true
       }
       return userCustomElementChecker?.(tag) ?? false