MathJax 3 in Angular 13 WCAG compliant...?

[Doug Holubek]

I'm trying to get MathJax working in Angular 13.  I included the js my index.html like this

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

In order to render math expressions in the templates it seems I had to first load it as a string in a variable in the component class then interpolate that variable in the template like this (it seems that the attribute ngNonBindable didn't work for this string)

some.component.ts

meh: string = 'When \\[a \\ne 0\\], there are two solutions to \\[ax^2 + bx + c = 0\\] and they are \\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]';

some.template.html

<p>{{meh}}</p>

When I flip on Mac OS's Accessibility Voice Over it doesn't understand the math equations. It refers to it as an unlabeled image.

I'm wondering if I'm doing something wrong, Mac OS Accessibility and MathJax don't play well together or

MathJax 3 with Angular templates aren't allowing the screenreader to do its job...

Any thoughts???