Changes those fields (and sometimes also regular text input fields)
in the following forms:
- LoginForm
- RegisterUserForm
- ChangeEmailForm
- FeedbackOrProblem
- AcceptAgreementForm
- ChangeNameForm (only name field here, but used in the same template
field as ChangeEmailForm here: app/templates/views/user-profile/change.html)
Also includes changes to templates that use this form
and associated tests.
We had 7 classes in _grids.scss named `.column-...` which were being
used to give a certain column width. These worked by using `@include
grid column()`, which is now deprecated.
`.column-whole` and `.column-three-quarters` can be removed and replaced
with `govuk-grid-column-full` and `govuk-grid-column-three-quarters`
respectively. The other column classes don't have a direct replacment in
GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width`
SASS map in `extensions.scss` to add in extra widths, then use this with
the `govuk-grid-column` mixin to create new classes in for our custom
widths in `_grids.scss`
The Design System has standardised on back links being at the top of the
page, decorated with a small text-coloured arrow.
I think this makes more sense than having them at the bottom, because it
suggests, in some way, being able to go back before commiting to any of
the forms on the page. Whereas the things at the bottom of the page
should be performing actions on what’s in the page.
The reason for making this change now is that it de-clutters the area
around the green buttons. This was presenting a design challenge where
multiple levels of interaction were happening in the same form. Moving
these back links to the top of the page should mean that, in these
complicated forms, there’s one fewer thing to compete for the user’s
attention.
I’ve componentised this into a `page_header` macro so that the change is
easier to roll out and maintain.
This will stop us repeatedly forgetting to add `novalidate` and
`autocomplete='off'` to our forms (which is how most of them are set
up).
It uses sensible defaults, based on how we most-commonly configure
forms:
- most of our forms are `post`ed (but this can be overridden)
- `autocomplete` should only be enabled where it makes sense, otherwise
it’s more annoying than useful (but this can be overriden)
- we should never be using HTML5 form validation because our own error
styles and messages are better
This commit:
- uses WTForms email fields wherever we collect email addresses
- makes sure we don’t let the default HTML5 form validation get trigged
(using `novalidate`[1])
We don’t want to use the default validation because:
- it looks out of place
- it’s not well supported by assistive technology
1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-novalidate
Did most of this work in:
https://github.com/alphagov/notifications-admin/pull/1118
> In pages specific to a service (e.g. dashboard and sub pages) the
> title needs to distinguish which service it applies to. This is mainly
> to give context to screen reader users who could be managing multiple
> services.
>
> Implementing this uses template inheritance:
>
> `page_title` includes `per_page_title` includes `service_page_title`
>
> ‘GOV.UK Notify’ is inserted into every page title.
>
> Pages that set `service_page_title` get the service name inserted too.
Pages that don’t have navigation shouldn’t extend the top-level admin
template directly.
They should extend `withoutnav_template.html` instead, because then they
get a wrapping `<main>` element, which is good semantically and for
accessibility, and also defaults the font size to `19px`.
This commit adds a page or series of pages for changing your:
Name | Email address | Mobile number | Password
------------------|-------------------|-------------------|------------
Enter new value | Enter new value | Enter new value | Enter new value
| Enter 2fa code | Enter 2fa code |
Return to profile | Return to profile | Return to profile | Return to profile
(each row is a page)
