If there is a search term when the page loads, a
statement about the results is added to the
searchbox label.
All subsequent searches are announced via an aria
live-region.
If you’ve searched to select an item and then you want to perform an
action on it it’s confusing when it goes away if you change your search.
It should always be clear which items you’re performing an action on.
This means that checked items should always be visible, no matter what
your search term is.
If you have a folder structure like this:
> FA / FB / FC
and you search for ‘FA’, it’s very noisy to see:
> FA / FB
> FA / FB / T1
> FA / FB / T2
> FA / FB / FC
> FA / FB / FC / T3
> …
It’s clearer to just show:
> FA / FB
This also has the benefit of, if you type ‘template’ (for example) you
don’t get every item any more, because it’s only looking at the name of
the thing. It used to look at the entire description, ie:
> A / B / C / Example
> Text message template
Now it only searches on the name:
> A / B / C / *Example*
> Text message template
At the moment live search works by either setting something to hidden
or displayed. When the search term is empty, it sets everything to
visible.
This doesn’t work with folders because some of them should be hidden by
default (the ones not at the current level).
We can account for this special case (empty search term) by removing
the `display` CSS attribute when the search term is empty. This means
that each item’s visibility will be controlled by whatever is set in the
CSS file. Using jQuery Setting a property to `''` removes it.
Not everyone knows how to use `ctrl` + `f`, and it’s not scoped to
just the list of templates.
The template you want to work with is often not the first one in the
list, but ordering by created at is useful for other reasons (mainly
around first time use).
This commit adds a find as you type control which aims to give users a
quick way of getting to the template they want to work with.
