Remove region role from live-search status

The Siteimprove accessibility testing tool raised
an issue with our having a div with role=region in
the page that was:
- empty
- with no label

The status has a role of 'region' which makes it a
generic landmark. This means that, unlike <nav>
or <footer>, users don't get any hint of its
purpose from its HTML tag. If we did want this,
we'd have to give it a label to explain that.

I don't think we do want those things. I think
it's more of a sentence that sits between the
searchbox and the results, just saying how many
are there.

That being the case, we should just remove the
role. It's also what design system do with their
character count, which is similar:

https://design-system.service.gov.uk/components/character-count/

Unlike that component, I don't think we need to
use aria-describedby to set the status as the
description of the searchbox because it describes
the results, not the search term.
This commit is contained in:
Tom Byers
2021-10-07 10:39:55 +01:00
parent 2b91d1d524
commit 87eb06f2ce

View File

@@ -19,7 +19,7 @@
{% if show %}
<div class="live-search js-header" data-module="live-search" data-targets="{{ target_selector }}">
{{ form.search(param_extensions=param_extensions) }}
<div role="region" aria-live="polite" class="live-search__status govuk-visually-hidden"></div>
<div aria-live="polite" class="live-search__status govuk-visually-hidden"></div>
</div>
{% endif %}
{% endmacro %}