Make form elements scale correctly when text resized by user

[hannalaakso]

Requirement

WCAG 2.1 requires that user can resize text to at least 200%.

Fix

The current versions of <select> and <input> do not scale well when text is resized by user as they're constrained by height set in pixels. Changing the height to use rem relative units makes them scalable.

Thanks @NickColley and @andysellick for the suggestion to use relative units.

Chrome 76, with text resized to 200%

Before

After

Firefox 69, with text resized to 200%:

Before

After

Safari 12.1, with text resized to 200%:

Before

After

IE11, with text resized to Largest:

Before

After

Fixes #1519

How text was resized in browsers

Chrome

Settings > Appearance > Customise fonts

Firefox

Set View > Zoom > Zoom text only. Press +/-
or Preferences > Language and appearance > Font size

Safari

To increase the font size, press Option-Command-Plus sign (+)
To decrease the font size, press Option-Command-Minus sign (-)

Edge

Can't resize text apart from "Reading view" which removes form elements from the view.

IE 8-11

Page > Text size > Largest

iOS

Text can't resized in browser. See #882

Android Chrome/Firefox

Settings > Accessibility > Text scaling

[NickColley]

I think we may need to consider compatibility mode.

Our font scaling approach does something like this:

Compatibility mode turned off:

.input {
  font-size: 16px;
}

Compatibility mode turned on:

.input {
  font-size: 16px;
  font-size: 1rem;
}

If you have a look with legacy mode turned on everything is a lil squsho since GOV.UK Template sets it's root font size to 50% percent (or something close)

https://govuk-frontend-review-pr-1574.herokuapp.com/examples/form-alignment?legacy=1

[36degrees]

I think we may need to consider compatibility mode.

Good shout. I think we could mirror what we do in the typography helpers:

govuk-frontend/src/govuk/helpers/_typography.scss

Lines 146 to 148 in 882333f

	@if $govuk-typography-use-rem {
	font-size: $font-size-rem; // sass-lint:disable no-duplicate-properties
	}

We could probably tie it to the same flag, as in theory we only need to resize the box if the font-size is in em. So maybe something like:

.whatever {
    height: 40px;
    @if $govuk-typography-use-rem {
        height: govuk-px-to-rem(40px);
    }
}

Thoughts?

[NickColley]

It feels like we're stretching that variable a bit, but considering this is all related to the scaling of the typography, I think we'll get away with it... 🙏

[hannalaakso]

Thanks both for the good suggestions 👍

[36degrees]

Really thorough investigation and write-up, @hannalaakso – top stuff 👏

[NickColley]

The resizing of text docs is very good to know too thanks