Prevent inputs ending up off screen or obscured by keyboards when linking from the error summary to inputs within a large fieldset #1570
Conversation
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1570
36degrees
force-pushed
the
link-to-fieldset
branch
from
6f3fe3d
to
5daa302
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1570
| @@ -109,7 +111,32 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) { | |||
| var legends = $fieldset.getElementsByTagName('legend') | |||
|
|
|||
| if (legends.length) { | |||
| return legends[0] | |||
| var $candidateLegend = legends[0] | |||
There was a problem hiding this comment.
In theory we could write tests for this logic, using puppeteer on the demo pages you've been testing, this could be useful in the future if we (hopefully not) encounter other edge cases.
There was a problem hiding this comment.
I've added to the existing tests to try and cover the two new examples that have been added to the review app.
|
For reference there's also 'IntersectionObservers' which have concepts of thresholds, a bit overkill for this I think since we're only doing it once per link click but worth sharing: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API |
| if (inputRect.height && window.innerHeight) { | ||
| var inputBottom = inputRect.top + inputRect.height | ||
|
|
||
| if (inputBottom - legendTop < window.innerHeight / 2) { |
There was a problem hiding this comment.
When testing this on my machine I find that I'm always linked to the errored input for the last example despite the fieldset being able to fit all on the screen at once.
Is the issue that mobile keyboards open after the navigation?
There was a problem hiding this comment.
More or less – the logic checks to see whether the input would end up entirely in the top half of the viewport, to allow for keyboards.
| name: "traal", | ||
| fieldset: { | ||
| legend: { | ||
| text: "Have you supplied orders signed in triplicate, sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters?", |
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1570
36degrees
changed the title
If you use the error summary component with our current address pattern (multiple text inputs within a fieldset), clicking on the error message for the post code scrolls to the top of the fieldset which means e.g. on iOS the postcode field ends up obscured by the keyboard. This example demonstrates that and allows us to test for sensible behaviour.
Only scroll to the fieldset’s legend (instead of the label associated with the input) if the input would end up in the top half of the screen. This should avoid situations where the input either ends up off the screen, or obscured by a software keyboard.
36degrees
force-pushed
the
link-to-fieldset
branch
from
87fde1c
to
7b27912
Compare
|
@NickColley happy with this changelog entry? |
|
@36degrees 👍 looks peng mate |
Only scroll from error summary to legend if the input is a radio or checkbox, or the input would end up in the top half of the screen.
This is to prevent linking to inputs which then end up either off the bottom of the screen or obscured by a software keyboard.
Fixes #1544