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
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.
This commit applies a carefully selected blend of `white-space`,
`display` and `background-position` to ensure that:
- you can always see the full name of the current folder in the heading
(which is useful because people might have mutiple folders with the
same name, differentiated by some king of suffix)
- the clickable are of a single folder or template in the list is 100%
width, for the biggest possible hit area
- the name of a folder or template wraps underneath the folder icon (ie
the folder icon is treated like a normal character, not like a bullet
point)
It’s a bit rudimentary to only show the current place in the hierarchy
and the parent. You lose a sense of how deep you are.
But we can’t just show the full path, because it can be arbitrarily
long. So what this commit does is show the full path, but truncates the
display of any items. Further-up than the current folder or its parent.
This also helps disambiguate between folders and templates, because
folders are always shown with the folder icon.
This probably won’t affect many teams, because we don’t anticipate a lot
of deep nesting.
The work done to stack sticky elements closer
together only effected the stack when stuck to the
top/bottom edge:
707c426b9a
It should have included the same for when a stack
of sticky elements is stopped at the end of it's
scroll area. This adds code to deal with that.
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.
