Previously all our error messages had the class `error-message`.
Where we are using the components from GOV.UK Frontend they have the
class `govuk-error-message`.
This makes the code which jumps focus to the first error work in both
cases.
In 674c27a693 we updated the autofocus
Javascript to be compatible with GOV.UK Frontend textboxes, which have
the `data-module` attribute set on the `input` element, rather than on
a wrapper element.
However we still have some `<textarea>`s and `<input>`s which haven’t
moved to GOV.UK Frontend and therefore aren’t getting picked up by the
Javascript which is supposed to focus them.
This commit makes the Javascript work with both kinds of textbox, which
is needed until we move entirely to GOV.UK Frontend.
Previous the text input on the send one off SMS page was wrapped in
an element with a class of `form-group`. We overrode the spacing on this
element to make the links under the textbox move closer to the textbox,
so that visually they group together.
This was broken when we moved to GOV.UK frontend, which uses a class of
`govuk-form-group`. This commit changes the CSS to account for both
possibilities, because the send-a-one-off-letter page is still using a
textbox, not a text input, and textboxes haven’t moved to GOV.UK
Frontend yet.
https://www.pivotaltracker.com/story/show/180026726
There was a bug where if you enter an invalid email address in
to the edit reply to email address form and click save, the
form you get shown with your error message will always contain
the field to set as default the reply to and also delete. This should
not have been the case. If you make an error on the form when
changing a reply to that is already a default, then you should not
be given the chance to change it to not default, nor should you
be able to delete it.
This commit fixes that bug by making sure the additional form fields
are only shown if the reply to being changed is not the default.
The SVG used for the 'X' in the remove area button
has 2 <g> (group) elements, one wrapping
everything and one wrapping the two lines that
make the cross. The first <g> isn't needed and
means that the SVG ends up with 2 accessible
names:
1. the <svg> element gets named with the text from
the <title> because of it's aria-labelledby
attribute referencing it
2. the first <g> gets named with the text from
the <title> because the algorithm that gets the
name looks for any descendent <title>s
This removes the first <g> so only the accessible
name for the <svg> gets announced.
The size and position of the 'X' has deviated a
bit from the design intentions of the original.
The original shared the x-height of the area text
and has positioned to be vertically and
horizontally centered.
These changes assume an x-height of 11px and use
flexbox to center the new 'X' horizontally and
vertically.
This also tweaks the visual state when focused and
then hovered so matches other buttons without
breaking the design.
The text never had underlines like our other
link-button components so always looked like
buttons. If they look like buttons, they should
act like them too and have those semantics.
This give them a role of button and uses the class
and data attribute for the button component from
GOVUK Frontend to make them work like one.
These changes include a fair amount of styles to
override those the govuk-button class brings in.
I've tried to mark those ones to at least make
that obvious.
The current link button for removing an area is
created using a psuedo element with an 'x' as
content.
The inline box for the 'x' overlapped its parent.
This is visible in high contrast mode, breaking the
parent's border. Despite existing in CSS, the 'x'
is also announced by screen readers, which is not
what we want.
This changes it to be an inline SVG with a role of
image. It doesn't require as large an inline box
so doesn't cause visual issues in high contrast
modes. It also means we can set it's label similar to
how you would an image's alt text, giving us
control over what is announced by screen readers.
This commit also includes some extra CSS,
targeting high contrast modes, giving the
link button the following when viewed in those
modes:
- a complete border so it is
distinguishable from the list item
- a focus style
Work prepping the interface that will be used for
emergency alerts for its accessibility audit has
taken priority so the issues in this statement
will need to be worked on later than we expected
when we originally set the dates for them to be
fixed.
This moves the work forward to be started after
the emergency alerts work is complete.
`reference` isn’t very human-friendly – the Environment Agency just
supply a UUID in this field.
The Environment Agency also populate the `<event>`` field with some
human readable text, for example:
> 013 Issue Severe Flood Warning EA
(013 is an ‘area code’ which will be meaningful to the Flood Warning Service team)
This commit changes the frontend to display the value of the `cap_event`
field, if it’s present, which is where the API stores the value of the
`<event>` field from the original CAP XML.
***
Depends on:
- [x] https://github.com/alphagov/notifications-api/pull/3344/files
This was an awkward property to have in a model class because
- it’s presentation not data about the object
- it munged together data from a different object, so it wasn’t well
encapsulated
This commit moves the logic to the template, where it can reference the
`Organisation` and `User` models directly.
You’re supposed to see the two column layout on this page if you have
multiple categories of things to show.
We weren’t counting the ‘platform admin’ section as one of these
categories so platform admin users with only live services or only trial
mode services were inadvertenly seeing a mixture of the one column and
two column layout.
Also this logic around the headings wasn’t tested before – now it is.
I recently found that there is a problem with the
overuse of lists online for sequences of content
that don't need to be in a list. I think that's
what we're doing with our map key.
The problem is large enough that browsers include
heuristics to determine if lists should be
presented as such to the accessibility API (and so
to assistive tech' like screen readers). This
thread contains more details:
https://twitter.com/cookiecrook/status/1337226933822603270
Based on the metric described in the thread:
'If all of the styles that make it “list-like”
have been removed, it’s no longer relevant to
convey it as a list.'
...or
'if a sighted user doesn’t need to know it’s a
list, why would a screen reader user need to know
or want to know?'
Based on that, I think the items in our map key
should be paragraphs, not items in a list.
Also, they read really well as sentences when
announced by a screen reader, partly because of
the extra (hidden) info @quis added to them.
This also doesn't change their visual appearance.
The Siteimprove accessibility testing tool raised
an issue with our having a div with role=region in
the page that was:
- empty
- with no label
The status has a role of 'region' which makes it a
generic landmark. This means that, unlike <nav>
or <footer>, users don't get any hint of its
purpose from its HTML tag. If we did want this,
we'd have to give it a label to explain that.
I don't think we do want those things. I think
it's more of a sentence that sits between the
searchbox and the results, just saying how many
are there.
That being the case, we should just remove the
role. It's also what design system do with their
character count, which is similar:
https://design-system.service.gov.uk/components/character-count/
Unlike that component, I don't think we need to
use aria-describedby to set the status as the
description of the searchbox because it describes
the results, not the search term.
This is currently spelt incorrectly though it
seemed to work nonetheless. Can only assume this
is a common error, for this attribute or all
attribute names, so browsers work it out.
This makes the spelling match the spec:
https://www.w3.org/TR/wai-aria/#aria-describedby
They have the service navigation inside the <main>
block. This means you can't bypass it when you use
the skiplink.
This copies other layouts that inherit from
admin_template.html and sets the contents of the
'main' template block so the service navigation is
placed before the <main> tag.
Since we’ve introduced the ‘on behalf of’ wording to the go live ticket
(to talk about who the agreement has been signed on behalf of) it’s
confusing to use the same terminology to talk about the organisation
for whom the agreement has been accepted.
We can make the `as_agreement_statement_for_go_live_request` method less
complex by offloading some of the content it returns to the presentation
layer.
Jinja is a better language for doing complex templating. And we can use
the global Jinja scope to automatically get access to things like
`current_user` and our formatters.
In https://github.com/alphagov/notifications-admin/pull/3663/files we
made specific routes for sending the ‘tour’ text message, rather than
sharing the ‘one-off’ routes in `send.py`.
This commit moves the final route in the tour journey into `tour.py` as
well, which is where I expected to find it when I was looking for it
just now.
