bbc/bbc-a11y

Unclear why `Text must be styled with units that are resizable in all browsers` errors occur

radiocontrolled opened this issue · 8 comments

radiocontrolled commented

Summary

bbc-a11y is integrated into the new pan-BBC article, https://github.com/bbc/simorgh. Although font-sizes are not present in pixels, bbc-a11y throws up a Text must be styled with units that are resizable in all browsers error in reference to an h1 that is rendered.

I have tried a few things to debug this:

  • I have searched for a font-size set in pixels which could be cascading down, and did not found one.
  • I have reviewed the comment in #246 (comment) and I have tried setting font-size: 100% on the html and body elements returned by simorgh/src/app/components/Document/index.jsx, and main elements.
  • I thought it might be an issue with elements nested inside <div id="root">, but when I put an <h1> into simorgh/src/app/components/Document/index.jsx (which renders the elements enclosing that div) I also received this error.

Expected Behaviour

I expect the Text must be styled with units that are resizable in all browsers error to not occur.

Current Behaviour

I currently see errors, e.g.

✗ http://localhost:7080/article/scenario-27 --width 320
  * Design: Content resizing: Text must be styled with units that are resizable in all browsers
    - Text styled with px unit: //div[@id='root']/main/h1

Steps to Reproduce (for bugs)

  1. Use Node 8 or greater
  2. git clone git@github.com:bbc/simorgh.git
  3. Checkout the 336-fix-a11y-issues branch and npm install
  4. npm run dev
  5. In another terminal, do npm run bbc-a11y

Context & Motivation

I'm trying to understand whether the issue I am finding is to do with bbc-a11y itself, or with an issue in my 336-fix-a11y-issues branch of Simorgh.

Your Environment

Thanks

radiocontrolled commented

I'm attaching another way to reproduce the problem I found:

There will be the following error:

  * Resizable text: Text must be styled with units that are resizable in all browsers
    - Text styled with px unit: //div[@id='root']/main/h1

In scenario-02.html, if you change the following lines to be 1em the error will not occur.

Thanks

radiocontrolled commented

@jtart and I have been looking at the test https://github.com/bbc/bbc-a11y/blob/master/lib/standards/tests/textMustBeStyledWithUnitsThatAreResizableInAllBrowsers.js#L26

The .css (http://api.jquery.com/css/) method returns a computed style in pixels. I believe this will make the test "Text must be styled with units that are resizable in all browsers" always fail as the size will always be pixels.

bbc-a11y thus fails a production site:

bbc-a11y https://www.bbc.co.uk/news

In the test I am not sure what the role of the temporaryStyleTag is, but when I run the test in such a way that omits it, e.g.

   for (var i = 0; i < parents.length; ++i) { // for every text element
      var element = $(parents[i])
      var fontSize = element.css('fontSize') // get the fontSize property
      if (fontSize.indexOf('px') > -1 ) {
        fail('Text styled with px unit:', fontSize)
      }
    }

Then the tests fail at all font sizes (and not just at 1em per my comment above).

EmmaJP commented

A static font-size unit anywhere in the style cascade for an element will stop a user being able to resize text. bbc-a11y should detect this and return a fail. bbc-a11y should not return a fail if all font-size units within an element's style cascade are resizeable.

Check a page visually by changing a browsers default font-size in the browser's settings.

EmmaJP commented

I created the following and tested with bbc-a11y and in browser (changing default font size and inspecting):

<html>
<head>
</head>
<body>
<p>Some text with no styling</p>
<p style="font-size:24px;">Some text with static font-size</p>
<p style="font-size:1.5em;">Some text with resizable font-size</p>
</body>
</html>

bbc-a11y file:///Users/pratte01/Desktop/test.html returned the following within the report:

  • Resizable text: Text must be styled with units that are resizable in all browsers
    • Text styled with px unit: /html/body/p[2]
    • Text styled with px unit: /html/body/p[3]

I noted that the computed font-size in the inspector is always in px, except for the first paragraph that has no computed font-size. Both the first and third paragraph will resize with the browser preferences.

@radiocontrolled @ChrisBAshton I would concur that bbc-a11y is not testing this correctly.

andymsuk commented

I'm looking at a fix for this now 😄

radiocontrolled commented

Hi @EmmaJP @andymsuk, thanks.

Apart from the computed size issue, to satisfy the standard, does the test have to be re-written so that it basically catches any use of font-size in pixels, or is it more nuanced than that?

andymsuk commented

I'm completely re-writing the logic in the test to make sure that there are no px or pt sizes anywhere in the styles tree for each element.