All other navigations have their selected item as
a link so we should match this.
Includes changes to the pill CSS so:
1. it doesn't use elements in the selectors
2. all the selectors use BEM
I did 2. because I had to change the
classes/selectors anyway, they might as well match
the style GOVUK Design System uses.
Pill pages are:
- /notifications
- /template-usage
- /monthly
- /organisations/<organisation_id>
- /templates
Includes changes to:
- the folder-path component
- the page-header component
...all their h1s have the same id.
Changes the HTML to do the following:
- remove all tabs semantics
- give the list a role of navigation
- label the navigation with the h1
- mark the selected item with aria-current
At maximum zoom, the text in the items gets
cropped horizontally.
This removes the padding on their containers to
give them more space and, instead, puts it on the
content items instead.
Left-aligned content still needs some padding on
the left-hand side but centrally-aligned can grow
into the whole space.
This also reduces the padding applied below 420px
width or when the screen is zoomed below 300%.
Above that, our content needs more space between
items but below that, the space allocated to the
content is more important.
Includes the following pages:
- letter contact (in service settings)
- sms-senders page (in service settings)
- email reply-to (in service settings)
- API key page
Note: the call on the letter contact page uses
the first line of the contact address as the
unique identifier for each button.
Changes the interface so:
- `name` is a required argument
- the heading is only shown if `name` and `thing`
match
These changes reflect a pattern observed in how
the component is used in pages.
It's first worth stating what the `thing` and
`name` arguments are.
`thing` is the type of thing the id is, for
example an reply-to email address.
`name` is which one of that type in the page, for
example the reply-to email address for user 1.
In pages where the id is the only one of its type,
these will have the same value.
When it is the only one of its type in a page, it
always has a heading so this makes the heading
appear based on `name` matching `thing`.
Includes implementation of new code on Reply-to
email addresses page.
The existing code put the live region on the
module element so the id and button were
read out when the state changed.
The report from the Digital Accessibility Centre
(DAC) said screenreader users were confused by the
content changing because it wasn't announced.
These changes attempt to make the state changes
clearer by:
1. moving the live region out into a separate
element so we can better control what is
announced
2. adding hidden text around to the button and text
above (sometimes the id, sometimes the 'Copied
to clipboard' text) to give more context
When the id is copied to clipboard, the button
changes but this is not announced as the
live-region text takes precedence (due to being
set to 'assertive'). Because of this, hidden text
has been added in change 2 to explain what the new
button does.
error pages
The skiplink in those pages is in the error summary
at the top. In this case, it seems redundant
because:
- it jumps to a section of the page just below it
- the section it would jump to is the only error
on the page
Because of this, and because The Digital
Accessibility Centre (DAC) reported that the
skiplinks in these pages may not be needed, we
decided to remove it.
This commit also adds a prefix to the table caption to
indicate that it only contains the errors from the
CSV, not the rest of its contents.
This gives the contents of each item more space
which is useful on smaller screens or at higher
zoom levels.
Each item still has a 2px border so is prevented
from its contents touching those of the other
items. They are also flex-items, set to occupy a
quarter of the available space so will removing
this padding will not effect their width.
Changes those fields in the following forms:
- FreeSMSAllowance
- ProviderForm
- ProviderRatioForm
- ServiceDataRetentionEditForm
Includes changes to templates that use this form
and associated tests.
Changes those fields in the following forms:
- DateFilterForm
- RequiredDateFilterForm
Includes changes to templates that use this form
and associated tests.
Makes it inherit from GovukTextInputField.
Changes to govuk_field_widget to allow the value
attribute to be set by passing a value keyword
argument to the __call__ method.
Includes changes to templates that use this form
and associated tests.
Changes its:
- StringFields to GovukTextInputFields
- EmailFields to GovukEmailFields
Includes changes to templates that use this form
and associated tests.
Updates StringField to GovukTextInputField.
These changes also affect the following forms that
inherit from BaseTemplateForm:
- SMSTemplateForm
- EmailTemplateForm
Includes changes to templates that use these forms
and associated tests.
Changes those fields in the following forms:
- SearchByNameForm
- SearchUsersByEmailForm
- SearchUsersForm
- SearchNotificationsForm
Includes changes to templates that use this form
and associated tests.
Changes those classes so they have the same
interface as a GOVUK field when instantiated and
render GovukTextInputField HTML.
Includes changes to templates that use this form
and associated tests.
Converts them directly in the following forms:
- LoginForm
- ConfirmPasswordForm
Changes the password function to return
GovukPasswordField instead of PasswordField which
effects the following forms:
- RegisterUserForm
- RegisterUserFromInviteForm
- RegisterUserFromOrgInviteForm
- NewPasswordForm
- ChangePasswordForm
It also updates StringField on RegisterUserFromOrgInviteForm
to GovukTextInputField
Also includes changes to templates that use this
form and associated tests.
The fields used for user permissions on
permissions forms were changed as part of the work
converting the checkboxes to GOVUK Frontend.
This removes code added to protect against a
situation where the server-side app was running
this updated code but clients were POSTing from
pages that were not, and so sending the old HTTP
params.
User permissions were handled by a group of
BooleanFields but introducing the new checkboxes
changed this to just one field that stores its
data in a list.
It was mentioned in a comment that there could be
a situation, when the instances roll, where clients
are using the old fields but POSTing to a server
running the new code.
https://github.com/alphagov/notifications-admin/pull/3535#discussion_r460872903
This introduces tests for that situation.
These fields used to use govukCheckboxesField and
so stored their data in a list. They were since
migrated to govukCheckboxField, which extends
BooleanField and so keeps its data as a boolean
value.
The existing macros added data attributes to any
error message displayed which communicated the
error to Google Analytics (if the user had given
consent).
This re-implements that functionality.
Adds the extra text added to each checkbox label.
It's a copy of the text of the link in the same
list item which does add a lot of duplication to
the test data.
This reformats a lot of the test data, stacking it
to separate out the duplicate items.
The checkboxes need an accessible name that
identifies the folder/template and this needs to
include their full path to avoid duplication.
There's a lot of debate about how to write out
breadcrumb/path syntax so this just puts all the
words together under the assumption that the
folder naming will describe the path (and to
introduce as little extra semantics as possible
to start with).
Moves the link out of the label and increases
the hit-size for the checkbox. The intention is to
reduce the chance of clicking the wrong thing by
accident.
This includes a TODO in the checkboxes component
template code. The item meta needs to be
associated with the checkbox input by use of
`aria-describedby` but this needs changes in
govuk-frontend-jinja to happen.
Includes adding filtering to the user permissions
data.
Classes extending BasePermissionsForm have their
user permissions handled by permissions_field
which stores its data in a list. This replaces the
previous approach of having a BooleanField for
each role.
Because permissions_field.data is taken directly
from POST data, it needs extra guarding against
values not present in whatever roles model the
class is based on (ie. broadcast_permissions).
Single checkboxes are distinct because:
- they don't need to be wrapped in a `<fieldset>`
- they are a subclass of BooleanField so their
data is either True or False
Nested checkboxes with a single top-level node
will only have one item in their `items` list.
This is because the other choices are children of
that list item.
This means we need to check the `choices`
attribute, which lists all the checkboxes, to see
if they should be marked as a group (by being
wrapped in a `<fieldset>`) or not.
Includes:
1. changes to make NestedFieldMixin work
with new fields and CSS for nested checkboxes
2. adds custom version of GOVUK checkboxes
component to allow us to:
- add classes to elements currently inaccessible
- wrap the checkboxes in a list
- add child checkboxes to each checkbox (making
tree structures possible through recursion
Change 2. should be pushed upstream to the GOVUK
Design System as a proposal for changes to the
GOVUK Checkboxes component.
Allows checkboxes to be collapsed so they take up
less space in the page. The collapsed state
includes a live summary tracking which of them are
selected.
Includes changes to the JS for collapsible
checkboxes to make it work with the GOVUK
Checkboxes component HTML.
govukCheckboxesField subclasses
SelectMultipleField and overwrites how it renders
HTML to let us use the GOVUK Checkboxes component
while retaining all the functionality of WTForms
fields.
Based on work on github.com/richardjpope/recourse:
https://github.com/richardjpope/recourse/blob/master/recourse/forms.py#L6
When an element is obscured by the sticky nav,
this method allows you to scroll the page until it
is revealled.
The bulk of this code was added in: https://github.com/alphagov/notifications-admin/pull/2843
to ensure elements with focus were in view. This
moves that into a public method so, as well as
being called by the focus event handler, it can be
called directly by other code.
These changes include code that adds a
'sticky-scroll-area' class to scroll areas not
explicitly marked as such in the base HTML but
made to be a scroll area by the sticky JS.
These tests make sure the sub-categories shown
when a category is selected are right but the
comparison looked for a direct match between the
labels for both types.
This looks for the category label in the
sub-category label instead, ie.
'Today at' in 'Today at 1pm'.
...instead of
'Today at' === 'Today at 1pm', which will always
fail.
The existing macros added data attributes to any
error message displayed which communicated the
error to Google Analytics (if the user had given
consent).
This re-implements that functionality.
Adds the extra text added to each checkbox label.
It's a copy of the text of the link in the same
list item which does add a lot of duplication to
the test data.
This reformats a lot of the test data, stacking it
to separate out the duplicate items.
The checkboxes need an accessible name that
identifies the folder/template and this needs to
include their full path to avoid duplication.
There's a lot of debate about how to write out
breadcrumb/path syntax so this just puts all the
words together under the assumption that the
folder naming will describe the path (and to
introduce as little extra semantics as possible
to start with).
Moves the link out of the label and increases
the hit-size for the checkbox. The intention is to
reduce the chance of clicking the wrong thing by
accident.
This includes a TODO in the checkboxes component
template code. The item meta needs to be
associated with the checkbox input by use of
`aria-describedby` but this needs changes in
govuk-frontend-jinja to happen.
Tom Byers