From 87eb06f2ceee759ab914ad9e2c3d0195d83e3c5e Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 7 Oct 2021 10:39:55 +0100
Subject: [PATCH] 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.
---
 app/templates/components/live-search.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/templates/components/live-search.html b/app/templates/components/live-search.html
index 8c6641b60..768dfa81b 100644
--- a/app/templates/components/live-search.html
+++ b/app/templates/components/live-search.html
@@ -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 %}