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

@@ -242,8 +242,7 @@ vite-error-overlay {
 }
 
 mjx-container {
-  display: inline-block;
+  overflow-x: auto;
-  margin: auto 2px -2px;
 }
 
 mjx-container > svg {

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.'

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