bbc/bbc-a11y

Text must be styled with units that are resizable in all browsers

greenc05 opened this issue · 3 comments

greenc05 commented

Summary

When running bbc-a11y on bbc.co.uk/news I get many errors for 'Content resizing: Text must be styled with units that are resizable in all browsers'.

When inspecting the element, I find that the text is resized with rem in addition to px, it looks as if the tests just look for px and don't take into account that the element may also have rem sizing specified, in which case this test should not fail. This test fails for all text which is styled with Grandstand/Gel font sizing, for example the following fails this test when it should not:

<h3 class="gs-c-promo-heading__title gel-paragon-bold nw-o-link-split__text">Boris Johnson quits amid Brexit crisis</h3>

.gel-paragon-bold {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 32px;
    line-height: 2rem;
}

https://github.com/bbc/bbc-a11y/blob/master/lib/standards/tests/textMustBeStyledWithUnitsThatAreResizableInAllBrowsers.js

Expected Behaviour

Given I am running the bbc-a11y tool
When text is sized with px and rem/em
Then the 'Content resizing: Text must be styled with units that are resizable in all browsers' rule should not fail

JamieKnightBBC commented
greenc05 commented

Sure I've added that above @JamieKnightBBC

EmmaJP commented

#262

See comment at #262 (comment)