From f520c4935a9aeac4102c7e701eee5b0840f76ec0 Mon Sep 17 00:00:00 2001
From: Justin Coyne <jcoyne@justincoyne.com>
Date: Fri, 19 Jan 2024 09:46:41 -0600
Subject: [PATCH] Add role=region and aria-controls to the FacetFieldComponent

This follows the example of https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ for setting the aria properties for an accordion type widget
---
 app/components/blacklight/facet_field_component.html.erb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/blacklight/facet_field_component.html.erb b/app/components/blacklight/facet_field_component.html.erb
index 859a486b78..8fc950fdec 100644
--- a/app/components/blacklight/facet_field_component.html.erb
+++ b/app/components/blacklight/facet_field_component.html.erb
@@ -8,11 +8,12 @@
       data-target="#<%= @facet_field.html_id %>"
       data-bs-target="#<%= @facet_field.html_id %>"
       aria-expanded="<%= @facet_field.collapsed? ? 'false' : 'true' %>"
+      arial-controls="<%= @facet_field.html_id %>"
     >
       <%= label %>
     </button>
   </h3>
-  <div id="<%= @facet_field.html_id %>" aria-labelledby="<%= @facet_field.html_id %>-header" class="panel-collapse facet-content collapse <%= "show" unless @facet_field.collapsed? %>">
+  <div id="<%= @facet_field.html_id %>" role="region" aria-labelledby="<%= @facet_field.html_id %>-header" class="panel-collapse facet-content collapse <%= "show" unless @facet_field.collapsed? %>">
     <div class="card-body">
       <%= body %>