Cannot exclude mathlive fields from tab keyboard navigation (tabindex=-1)

Description

Mathlive textfields appear to disregard the html tabindex attribute.

Attempts to exclude certain Mathlive textfields from tabbing navigation with tabindex=-1 fail.

Actual behavior

When setting tabindex=-1 or tabindex=100, the mathlive textfield remains in the same place of the tab navigation.

Expected Behavior

When setting tabindex=-1, the mathlive textfield is skipped in tab navigation.

Steps to Reproduce

1. Go to https://mathlive.io/
2. Open Developer Tools
3. Click into the mathlive textfield
4. Tab and Shift+Tab to make sure you’re on the element focussed by tabbing
5. Type document.activeElement in the Development Console to get the node focussed by tabbing
6. Set tabindex="-1" for that html element.
7. Repeat 3. and 4. to see if the mathlive textfield can still be focussed by tabbing

To verify that this process works correctly for other html elements (e.g. buttons), you can try the same procedure for the Show code section interface element in the sidebar.

1. Go to https://mathlive.io/
2. Open Developer Tools
3. Click on background
4. Use Shift+Tab
5. Type document.activeElement in the Development Console to get the node focussed by tabbing (should be <button id="code-section-button">)
6. Set tabindex="-1" for that html element.
7. Repeating 3. 4. and 5. should now show you that the Switch Theme element is focussed, hence Show code section button is correctly skipped

Environment

Operating System Windows

Browser Chrome

URL https://mathlive.io/

[arnog]

This is now working correctly when using web component, i.e. the <math-field> tag.

[stefnotch]

That would break internet explorer compatibility, but I think that’s fine at this point. (Even Microsoft is starting to drop support for it.) Another thing that could be done when breaking IE compatibility is to stop shipping the .woff fonts and only ship the more modern .woff2 fonts.