* Updated header and footer
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Updated fonts
* Adjusted grid templating
* Adding images to assets
* Updated account pages, dashboard, and pages in message sending flow
* Updated the styling for the landing pages in the account section once logged in
The existing behaviour focused the form control
for each popup (radios or textbox) when opened.
This gives no indication the submit button or
cancel link have been added to the page.
These changes:
- make the parent element a region to group all
the new content
- label the region to link it to the button that
opened it
- add a description to the region so users know
how to use it and that all the controls have
been added to the page
Suggested by the Digital Accessibility Centre in
their report. Giving these buttons
aria-expanded=false indicates:
- they control a section on the page
- that section is collapsed (and so clicking the
button will open it)
When testing with the JAWS screenreader, we found
a bug around getting it to announce the name of a
fieldset when we ask the user to select from it.
Bug on pivotal:
https://www.pivotaltracker.com/story/show/165565088
The flows for adding a new template and moving a
template/folder both need the user to select an
option from a radio group. When we add the radio
group to the UI, we need to move focus to it so
the user is in the right place to choose an
option.
The expectation of the original code was that
focusing the field set's legend would work like
focusing the heading of a section of content and
announce the label of it. This didn't happen with
JAWS. This tries to achieve the same by focusing
the whole fieldset instead.
When doing this we also hide the focus style, to
follow the convention for this across www.gov.uk.
Adds a guard around all calls to `.render()` after
the first one (which sets the initial state) to
prevent DOM manipulation when not needed.
The original behaviour meant the action buttons
were re-rendered when items from the list of
templates/folders were selected/deselected, even
if the state hadn't changed. This meant, in some
cases, focus was shifted to the buttons when you
were still selecting/deselecting.
Links need to work in isolation from their context
in the page.
This is an attempt at doing that. The one for
'Cancel' is still not ideal but 'Clear selection'
gives more information than 'Clear' about what it
does.
Also adds a 'href' attribute to the link, without
which its accessible role isn't recognised.
Adding a visually hidden live-region creates
duplication in the HTML. End result for users of
screen readers are that you get the same text read
out twice.
This adds `aria-hidden` to hide the visible
version and re-positions the live-region one next
to it. That means the live-region text appears in
the same place in the document order as the
visible one so things are announced as expected.
Inserts a hidden live region to ensure changes to
the count are announced.
The live region is hidden because it needs to be
in the initial markup of the page. The visual
counter is part of a larger region which is
inserted/removed from the DOM.
See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
This was missed out of the work on improving focus
on the templates page.
When you clear the current selection, the 'clear'
link disappears so focus needs to be sent
somewhere.
Moving focus before letting the sticky JS set the
position of sticky elements means focus is shifted
to them when they are still in the page. This
causes the browser to scroll so the focused
elements are visible.
This moves when focus is set to after the sticky
JS has set position therefore avoiding the issue.
Makes sure the tabindex we add for focusing is
removed.
Also removes the outer fieldset from the radios
for new templates. We don't wrap form buttons in
fieldsets anywhere else and it doesn't add any
useful semantics to the form.
Adds some extra styles so <fieldset>'s show as
focused when they are.
Also includes replacement of `overflow: hidden` on
sticky elements with a clearfix. hiding overflow
clips the outline and the clearfix can be used for
containing any floats instead. (I'm assuming that's
why it was set here.)
This was failing with a 'Object doesn't have
method' error on IE11. Assume Babel wasn't
polyfilling Array.includes so reverting to jQuery
version for now.
The templateFolderForm JS was setting the mode to
'dialog' but not back when the state was changed
back to a normal sticky element. This caused
adjustments and scrolling when no adjustment
needed to be accommodated.
There were also problems with adjustForResize. It
was manipulating the same flag that resizing the
window did and returned a value never used.
The `recalculate` method currently does three
things:
1. sync's the internal store with the DOM
2. updates the saved positional and dimensional
data from the new DOM
3. allows the mode to be set
The problem with using it as the way to set the
mode is that, every call to it is effectively
setting the mode but this isn't always the
intention.
This splits off setting the mode so other modules
have to explicity set it and those that don't
intend to can just call `recalculate` to notify of
DOM changes.
make sure the class is applied to a child element, so that `$el.find`
will always find something for `js-will-stick-at-bottom-when-scrolling`.
Also, clean up code by treating all stickies on the template folder
form as dialogs - they all are after all all dialogs - modals that
expect your attention on top of the main page content.
The controls for the template folders are all
present in the page when it loads. The
templateFolderForm JS filters them so you only see
the one you need to for the thing you're trying to
do.
This changes when the controls are made sticky so
it happens after the templateFolderForm JS has
performed its filtering.
Instead of keeping references to nodes detached
from the DOM, remove them from the store.
Likewise, add node appended to the DOM.
This includes code to 'clean' DOM nodes when
removed. This is important because nodes can
retain classes and styles. If they are re-attached
in future this can cause problems with how the
state of the element is determined.
We want a mode for when a single task is shared
between all sticky elements on the page and that
task has the highest priority on the page. In that
case:
- they should stack together into a single block,
attached to the top/bottom of the viewport
- that block should adjust to the vertical space
available
This should also adjust to the height of the
viewport, dropping whatever elements that don't
fit back into the page flow. When this happens, we
scroll the page so all the parts of the dialog are
seen together at the start of the task.
This is better because it saves vertical space for the contents of the
pop-up menu.
This commit also adds some padding to the cancel and clear buttons, to
make them easier targets to hit.
