Add aria-label to directory search/facets if label is hidden

[markconroy]

Closes #322

What does this change?

Checks if the directory channel search block and/or directory channel facets block have their label hidden. If so, add the label as an aria-label so screen reader users will understand what these blocks are, since they come before the H1 in the page.

[finnlewis]

@msayoung wants to review this

[Copilot]

Pull Request Overview

Adds accessibility improvements by ensuring hidden labels on directory search and facets blocks are exposed via aria-label, and assigns appropriate roles.

• Introduces a preprocess function to detect hidden labels on specific blocks
• Sets aria-label and role attributes based on block configuration

Comments suppressed due to low confidence (2)

localgov_microsites_base.theme:693

• The docblock should include @param array $variables and reference hook_preprocess_block to conform with Drupal coding standards.

/**

localgov_microsites_base.theme:696

• Consider adding a render or functional test to verify that aria-label and role are correctly output when label_display is hidden.

function localgov_microsites_base_preprocess_block(&$variables) {

[Copilot]

[nitpick] Applying role='search' to the facets block can be misleading. Scope the role assignment to only the search block or choose a more appropriate ARIA role for facets (e.g., region).

Suggested change

	$variables['attributes']['role'] = 'search';
	$variables['attributes']['role'] = 'region';

[msayoung]

Very cool @markconroy

We're using the block title as the aria-label, if the block title isn't visible.
My concern here is that by default the aria-label is "Directory channel search" which isn't going to mean much to the general public.
The use of the LGD vocab "Directory channel" isn't very user friendly.

I know that's the block title, and it can be changed, but because its not visible people are unlikely to change it.

I don't have an idea of what would be better though.

cc @waako @Mayur2609 (as you both were involved in the original ticket).

[finnlewis]

@waako @Mayur2609 any opinions on this one?

[waako]

Agreed with @msayoung that using the Block title is probably too generic unfortunately, as it won't mean much to users.

Maybe we can get the Page title (h1), and suffix that to the block type ? so end up with aria-label something like:

• Search block: Search services
• Facets block: Filter services

CoPilot is correct that the search role should only be applied to the form element in the Search block.

[markconroy]

@msayoung @waako have we got an agreement on what we want to update this to?

Also, I think role=search on the block is the correct approach. Adrian Roselli agrees - https://adrianroselli.com/2015/08/where-to-put-your-search-role.html

If you have a search form on your site and you want to be a good accessibility soldier and drop ARIA roles in for landmarks, then you may have wondered where to put role="search". If you’re like me (or many others) then you probably put it directly into the form element. Don’t.

[msayoung]

I'm happy with @waako 's suggestion for the aria label. "Search {{node:title}}" makes sense.

Great article from Adrian, lets go with what he advises on the search role.

[markconroy]

@msayoung This is ready for another test now.

[markconroy]

Just thinking about this - surely we want this in LocalGov Base rather than LocalGov Microsites Base?

[markconroy]

Here's the same PR for LocalGov Base: localgovdrupal/localgov_base#843

I know the h1 is before the sidebar in LocalGov Base, but we can't be sure the people always leave it there, so fixing it at the base level is probably a better idea than at the microsite level. It also means we get the role="search" applied to the block.

<div 
  class="facet-inactive contextual-region block-facet--checkbox block block-facets block-facet-blocklocalgov-directories-facets" 
  id="block-localgov-directories-facets-scarfolk--2" 
  aria-label="Search National Parks in the UK" 
  role="search">
...
</div>