@Volker_E - any thoughts from your side? Can we confirm it's an accessibility issue?

Correct, a minimum of of 12px equivalent is the smallest font size guidance.

Thanks @stijn, this is a valid accessibility issue and the font size should be bumped (slightly) to align to our DSG and accessibility level AA requirements.

What font-size should be bumped to? Patch welcome.

13 px equivalent is the minimum font size defined in DSG and also the WCAG recommendation.

The font size for that text is defined in resources/skins.minerva.mainMenu.styles MainMenuItem.less as font-size: @font-size-minerva-small;. minerva.variables.less has

@font-size-browser: 16; // Assumed browser default of `16px`.
...
@font-size-minerva-small: unit( 14 / @font-size-browser, em ); // Equals `14px` at `16px` browser default.

The CSS that gets generated follows that same assumption:

#mw-mf-page-left ul li a span {
    font-size: 0.875em;
    font-weight: bold;
    vertical-align: middle;
}

However, my browser renders the font at 10.5px. What gives!? Well, these two <span>s are each inside a <li>, that has its own styles.

#mw-mf-page-left ul.hlist li {
    background-color: transparent;
    border: 0;
    margin: 0;
    font-size: 0.75em;
}

That sets the font size in those <li>s to 12px, not the 16px that had been assumed. And because em is relative to the font size of the parent element, it compounds.

The solution? Use rem. It's an em relative to the font size at the root of the document, so @font-size-minerva-small will be the same size everywhere in the document.

I've prepared a patch that chages @font-size-minerva-small and -smallest to use rem instead of em everywhere. I think this is better because it prevents accidental compounding issues that are likely to result in too-small text. The only question is if there is anywhere in MobileFrontend where the em font-size compounding behavior was intentional. I looked with codesearch but didn't find anything of concern, though it is difficult to tell just from stylesheets whether a particular element will have a parent with a larger font-size and I didn't find every usage "in the wild". The only possible problem I noticed was the changeslist styles in minerva.mixins.less, but any compounding there would also result in too-small text.
If this does end up being a problem, the 0.875rem value can be hard-coded into MainMenuItem.less.

Change 705034 had a related patch set uploaded (by AntiCompositeNumber; author: AntiCompositeNumber):

[mediawiki/skins/MinervaNeue@master] minerva.less: use rem instead of em for browser-relative font sizes

https://gerrit.wikimedia.org/r/705034

For clarity, the font size for the links will be 14px with a default font size of 16px.

Change 705034 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] minerva.less: use rem instead of em for browser-relative font sizes

https://gerrit.wikimedia.org/r/705034

Moving this instead to design review as it seems more related to design than qa. @alexhollender you can check the font size changes at https://en.m.wikipedia.beta.wmflabs.org/ by logging in and opening the sidebar and looking at the blue links in the sidebar. If approved, please move to signoff. If it needs more work, please move to needs more work.

reassigning to @bwang as I think he was the most recent person to pick up this ticket

Change 716554 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Remove font-weight bold from links in MainMenuFooter

https://gerrit.wikimedia.org/r/716554

Change 716554 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove font-weight bold from links in MainMenuFooter

https://gerrit.wikimedia.org/r/716554