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.
The delete link was inheriting 1px of extra top padding meant to align
it when displayed alongside a button. In this case it’s not being
displayed alongside a button, so doesn’t need the extra padding.
Our textareas are multi-line and can change in
size based on their content.
Because of this, we need to check the caret for
overlapping, not the whole textarea.
This adds separate tracking for this.
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.
When focus changes in scroll areas, check the
current focused element isn't overlapped by sticky
elements in the area.
If there are overlaps, mimic what browsers do if
focus moves outside the viewport and scroll to
move the focused element into view.
When you’re entering numbers into a field we already add some extra
tracking to make it easier to read.
With this extra tracking the kerning looks a bit more even with the
tabular, not lining numbers. This makes sense because tabular numbers
are designed to be used where the content is numeric-only. Lining
numbers (the default) are more appropriate for numbers that are used in
passages of text.
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.
Because some people don’t know they can put their own logo on letters:
> The HM Government Logo is at the top of the letter and we can't see
> a way of putting the [organisation] logo on
> We are intending to use the letter template feature for the first time
> and wondered whether the branding is configurable or whether the HM
> Government header is the standard default.
> Can we replace HM Government logo with our own in the letter? IF yes,
> then how?
> I don't seem to be able to set the branding on the letters to be
> [organisation]. it's always HM government. Is there something that
> needs enabling for this account?
No-one actually wants the HM Government logo (no-one is sending real
letters using it). So we should leave the space blank and put a button
there prompting people to add their own logo.
The `release` method is meant to clean up a sticky
element before removal from the store.
The part of this that cleared CSS added due to
being in dialog mode was only run if still in that
mode.
In the template folder JS, we set the mode before
running `recalculate` so elements can be cleaned
in a different mode to that they were last in.
This meant some CSS wasn't being cleaned up.
This sometimes caused an effect where elements
that were added back to the DOM but not stuck
would still have CSS used when they were last
stuck.
This commit also includes the addition of some
missing code that adds back CSS to offset an
element when in a dialog stack.
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.)
Bigger hit areas are generally better (cf Fitt’s law[1]), as long as
they’re not ambiguous.
This commit enlarges the hit area of the edit links (using a border) so
they fill the same vertical space as the smallest possible row (going
to the full height might look weird because some of these rows get very
tall).
Bigger hit areas are generally better (cf Fitt’s law[1]), as long as
they’re not ambiguous.
This commit enlarges the hit area of the edit links (using a border) so
they fill the same vertical space as the row they sit in.
We were removing the border to ‘unfold’ the corner of the page. This was
causing the size of the element to shrink.
This meant that it you hovered the bottom 1px of the element it would
cycle in and out of the hover state as fast as the browser could render
it.
This commit fixes that by making the border transparent, rather than
removing it.
Sometimes people print stuff under where we’re folding the letter. It’s
annoying to not be able to see it.
This commit adds a little detail where, once you’ve sent the letter
you can unfolds the corner to see what’s underneath.
It’s better that we do this for all letters for discoverability.
To avoid the problem of having confusing defaults, the postage is now
set explicitly on every template.
Putting the postage ‘inside’ the letter template makes the interaction
for changing it consistent with how other parts of the template are
added.
Plus everyone loves skeumorphism.
The contact block fills from the bottom upwards. So if it only has a few
lines then the ‘Edit’ link button sits quite far away from where the
text appears in the letter. This commit moves the link button to bottom
align with the contact block, so it’s always in close visual proximity.
Duplicates e0ecc95ac6
Copies the code from the normal folder icon, and manually tweaks the
colour, to also get the benefits of minification.
***
IE 10 supports using SVG[1] but has some buggy behaviour when they’re
used as background images.
Without an explicit width/height it stretches the viewBox of the SVG to
fill the containing element. This causes the content of the file to
display centered within the viewBox.
Explicitly setting the width and height seems to be the thing that fixes
this. Out of the suggested fixes on Stackoverflow[2] this one seems to
be the most straightforward.
1. https://caniuse.com/#feat=svg
2. https://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b
