Page MenuHomePhabricator

Increase font size for links at the bottom of the screen
Closed, ResolvedPublic2 Estimated Story Points


The font size of the footer links is very small on small smartphone screens about 10.5px. We need to check if it complies with the accessibility rules.

image.png (1×640 px, 210 KB)

Event Timeline

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

ovasileva triaged this task as Medium priority.May 10 2021, 2:53 PM
ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.
LGoto subscribed.

This task was closed as part of backlog upkeep. If you believe it was closed in error, please respond on the ticket.

stjn edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.
stjn subscribed.

Reverting undiscussed silent close. Visual bug that still needs to be fixed.

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.

Jdlrobson subscribed.

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

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

image.png (448×399 px, 20 KB)

bwang removed bwang as the assignee of this task.Aug 16 2021, 8:26 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
bwang subscribed.

Change 705034 merged by jenkins-bot:

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

Moving this instead to design review as it seems more related to design than qa. @alexhollender you can check the font size changes at 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.

apologies for the delay here. looks good, but can we remove the font-weight: bold just from those two elements?

Screen Shot 2021-09-02 at 12.41.31 PM.png (678×392 px, 47 KB)
Screen Shot 2021-09-02 at 12.42.04 PM.png (679×392 px, 47 KB)

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

bwang removed bwang as the assignee of this task.Sep 2 2021, 9:11 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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

Change 716554 merged by jenkins-bot:

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

Please check and move to sign off or needs more work.