Means our rollup bundling doesn't leave any
artefact files lying around that we'd then have to
deal with.
Also includes:
- removal of some JSHint config' marking the
artefacts as scripts to ignore
- use of streamqueue package to allow the same
ordering of scripts as before
It's not obvious how the code that includes JS
Modules in the frontend build works.
This adds lots of comments to explain the various
bits and flattens `modules/all.mjs` to just be a
single function that starts off the window.GOVUK
namespace.
Also removes `module/all.js` from the repo'. It's
an artefact used by the frontend build so
shouldn't be included as source code.
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.
This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
This includes the JS for all GOV.UK Frontend code.
If our frontend build includes a module bundler in
future, we should only include the JS for the
components we use, as with our Sass.
Means our rollup bundling doesn't leave any
artefact files lying around that we'd then have to
deal with.
Also includes:
- removal of some JSHint config' marking the
artefacts as scripts to ignore
- use of streamqueue package to allow the same
ordering of scripts as before
It's not obvious how the code that includes JS
Modules in the frontend build works.
This adds lots of comments to explain the various
bits and flattens `modules/all.mjs` to just be a
single function that starts off the window.GOVUK
namespace.
Also removes `module/all.js` from the repo'. It's
an artefact used by the frontend build so
shouldn't be included as source code.
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.
This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
This includes the JS for all GOV.UK Frontend code.
If our frontend build includes a module bundler in
future, we should only include the JS for the
components we use, as with our Sass.
HighlightTags was bad because:
- we haven’t called placeholders ‘tags’ for a long time
- it also does resizing of the `<textarea>`, not just highlighting the
placeholders
Scrolling within textareas on the page is a bit grim. Which is why we
don’t do it for the textboxes that people use to edit templates.
This commit will allow us to extend the auto-resizing of `<textarea>`s
to those which don’t need the highlighting of placeholders.
The code is still quite coupled to the placeholder highlighting code,
because both work by copying the content of the `<textarea>` into a
`<div>` that underlaps the textbox. This `<div>` is used for both
rendering the placeholder highlights, and calculating the natural height
of the content. So it would be hard/confusing to split the two bits of
code into separate modules.
This is mainly because tests don't inferr that
global variables are just properties of the window
object, as browsers do, but it also makes this
more explicit.
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.
`clearEvents` helps write the tests and also gives
users the opportunity to remove all of this
functionality.
Refactor of `setEvents` tidies up use of `self`.
This module creates a clone of the existing table
as an extra layer which sits on top of it.
This allows the row headers to sit above the table
content when it scrolls.
We were setting `role=presentation` on the extra
table to hide it from assistive technologies.
It seems that this wasn't working. From the spec'
`role-presentation` should remove the semantics of
the table but leave the content.
Testing in Safari, with the OSX Accessibility
Inspector, this isn't happening and the table is
still being reported as a table by the
accessibility API.
This changes to the `aria-hidden` attribute, to
make sure the extra table is ignored.
Keyboard users select a time slot by moving to the
radio for that slot, using the arrow keys, and
selecting it by pressing 'space' or 'enter', like
a `<select>`.
We allow this by listening for 'keydown' events
from the 'enter' or 'space' keys on time slot
radios that are checked.
Browsers fire 'click' events alongside the
'keydown' event meaning it's possible for the
code that makes the selection to be run twice.
We currently guard against this by checking for
the `pageX` property of the event object,
reasoning that a click event fired by a key press
won't have a cursor position.
Most browsers we support set it to `0` but it
isn't always the case:
https://dom-event-test.glitch.me/results.html
For those browsers, the `!event.pageX` condition
resolves correctly so this works. Safari and
versions of Internet Explorer before 11 however,
set it to a positive number.
In those browsers, moving the selection between
radios using the arrow keys fired a 'click' event
which, in Safari and IE<11, was treated as a
mouse/touch event and so confirmed the selection.
This made it impossible to select a later time.
These changes replace the 'click' event on time
slots with an artifical one that tracks
mouse/trackpad clicks by listening for a
'mousedown' followed by a 'mouseup' on a time
slot. This doesn't fire on key presses so avoids
the problem.
Clicking the 'Done' button resets the module to
its default state. 'Done' implies you've
completed your selection so this doesn't make
sense.
This changes it so any selection made will be
confirmed when 'Done' is clicked.
It helps the tests to know the `Hogan` variable is
actually a property of the global variable
(`window` in this case) and doesn't hurt the
readability of the script.
AJAX requests stop on success or failure, as the waiting page
does not have to referesh any longer.
Also on failure a form that allows user to try again
is shown.
The `getSharedAttributes` method gathers all
attributes, and [DOM tokens](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
in the `class` attribute not controlled by the
module for re-applying in the `render` method.
Because it gathered them for all items, many
duplicates ended up being added to new items.
Browser engines were tidying up the duplicates
but we shouldn't be adding them in the first
place.
Also removes setting of the `$` variable to
jQuery.
This can mess up the unit tests if they run
against JSDOM, which doesn't set the global `this`
to `window`, as browsers do.
We don't set `$` in any other module scripts and
adding it to `this` without making explicit that
`this` means `window` isn't useful.
Running the sticky JS in Jest raised errors due to
these variables not being assigned properly.
It's JavaScript so any variable not defined by the
`var` prefix will automatically become a property
of the global object. That is not what is intended
by the code so requires changing.
Live regions need to be in the original HTML of
the page to work. We were generating the summary
in JS.
This changes the JS to only generate the contents
of the summary so changes to its contents are
announces by the existing live-region.
Expands the API of the macro to allow nested
checkboxes to have a summary tracking the current
selection, the fieldset to expand/collapse and
buttons to be added to allow jumping between
states.
Includes making 'Done' button inline on mobile.
Helps differentiate it form the form submit.
We use ‘back’ to label a control which navigates to a previous page now.
It could be confusing to keep this control labelled the same way. And
in the future the folder permissions interaction definitely shouldn’t be
using ‘back’, because it suggests undoing the selection you’ve made.
Since it moved to ES Modules in version 2.3.1,
diff-dom stopped including the `diffDOM.js` file
in its NPM package.
We don't do any kind of bundling in our build yet,
just concatenation of our scripts and some
minification of the results so we can't take
advantage of this yet.
The `diffDOM.js` file is still available in the
Github release so this moves to referencing that
in the `package.json` instead, until we start
using a bundler.
I opened an issue to check this is what the author
intended:
https://github.com/fiduswriter/diffDOM/issues/84
The latest version also adds Rollup as a peer
dependency.
If users scroll a page with an autofocus component
on so it is off-screen it seems safe to assume
they won't want it focused if they return to it.
This prevents that happening.
This adds a data-attribute flag to allow this
behaviour to be overridden.
We have some situations where the assumption here
isn't appropriate, for example on pages where the
component with autofocus is in a sticky element.
This means it will appear offscreen when the page
loads but, when its parent becomes sticky, will be
visible again.
