Add additional accessible text to linked faceted searches

[thatbudakguy]

This updates the LinkToFacet rendering step to add an additional visually hidden element when creating a link to a faceted search that indicates the facet that will be used in the search.

This helps give additional context to screen reader users when link_to_facet is used, especially when the page may include links that go to searches for the same value in different fields.

Fixes #3427

Visual display (no change):

Emitted HTML:

<dd class="col-md-9 blacklight-author_tsim">
  <a href="/?f%5Bauthor_tsim%5D%5B%5D=Hearth%2C+Amy+Hill%2C+1958-">
    <span>Hearth, Amy Hill, 1958-</span>
    <span class="visually-hidden">Author search</span>
  </a>
</dd>

Accessible name for link (shown in VoiceOver):

[dbranchini]

The proposed solution on this ticket https://github.com/sul-dlss/earthworks/issues/1430 is essentially the same, just slightly different phrasing, so I'm okay with this solution.

[thatbudakguy]

Thanks for sharing that article, I hadn't thought about this tension between different use cases!

I tested your suggestion and indeed it doesn't update the name listed in the rotor, which makes sense because I think it only lists the accessible name there and aria-description doesn't contribute to the name itself.

I'm kind of at a loss for a solution that ticks all the boxes...I think we need the link texts/names to be different so that duplicate values can be distinguished, but I think the solution has to apply in every case where link_to_facet is used. Otherwise, we get into really complex stuff about inspecting what was rendered after all the facets are processed to detect only the cases where a rendered value is duplicated.

That being the case, if we add additional text that is visible, it'll always display for every linked facet, which could add a ton of extra content that might distract or confuse sighted users.

[sandbergja]

@thatbudakguy: First of all, apologies for not responding earlier! I was thinking about this -- even though aria-describedby doesn't get the additional text into the voiceover rotor or NVDA elements list, it is still read if a user navigates by NVDA's K, V, U hotkeys or VoiceOver's Control+Option+Command+L/Control+Option+Command+V. What would you think about adding an id to the field label (in the <dt>) and using that as the aria-describedby? It would not add any more text, visible or not, and would help with link navigation outside the rotor.

[thatbudakguy]

I'm OK with that solution as it seems the least bad option.

The original reason I opened this PR was to resolve a scenario where automated accessibility checkers flag the links because they have the same text but go to different places, and adding an aria-description won't affect that – they will still have the same label and appear the same in contextless lists of links (like the rotor).

Additionally, I just recently learned that as of 2023 JAWS doesn't read aria-describedby unless you are navigating via tab (and the related issue has been sitting for awhile). This seems like a case of "JAWS is just wrong", but it's still unfortunate.

I will need to revisit this PR when I have time because generating and adding an id to the dt requires code outside the link_to_facet helper, so the scope is somewhat different from the original.