Accessibility: Tab through sub filters only if they're showing. https…

…://trello.com/c/CEQ5jAe1
APTrust · Mar 18, 2024 · 45b61cb · 45b61cb
1 parent 6101ae5
commit 45b61cb
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/static/js/modules/filters-grid.js b/static/js/modules/filters-grid.js
@@ -18,6 +18,16 @@ export function initFiltersGrid() {
             gridFiltersAll.classList.toggle('is-sr-only');
             gridFiltersMore.classList.toggle('is-hidden');
             gridFiltersLess.classList.toggle('is-hidden');
+
+            // For aria keyboard navigation. https://trello.com/c/CEQ5jAe1
+            var allFiltersAreShowing = gridFiltersMore.classList.contains("is-hidden")
+            if (allFiltersAreShowing) {
+                gridFiltersToggle.setAttribute("aria-expanded", "true")
+                gridFiltersAll.style.display = "block"
+            } else {
+                gridFiltersToggle.setAttribute("aria-expanded", "false")
+                gridFiltersAll.style.display = "none"
+            }
         });
     }
 }
diff --git a/views/events/_filters.html b/views/events/_filters.html
@@ -22,7 +22,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         <div class="column is-align-self-flex-end">
           <div class="filters-grid-controls">
             <input class="filter-button button is-primary" type="submit" value="Filter">
-            <a class="filter-toggle button is-compact is-white is-not-underlined" href="#gridFiltersAll">
+            <a class="filter-toggle button is-compact is-white is-not-underlined" aria-expanded="false" aria-controls="gridFiltersAll" href="#gridFiltersAll">
               <span class="material-icons md-16" aria-hidden="true">expand_more</span>
               <span class="more-filters">More Filters</span>
               <span class="less-filters is-hidden">Fewer Filters</span>
@@ -31,7 +31,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         </div>
       </div>
 
-      <div class="filters-grid-all is-sr-only" id="gridFiltersAll">
+      <div class="filters-grid-all is-sr-only" id="gridFiltersAll" style="display:none">
         <hr>
 
         <div class="columns">

diff --git a/views/files/_filters.html b/views/files/_filters.html
@@ -21,7 +21,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         <div class="column is-align-self-flex-end">
           <div class="filters-grid-controls">
             <input class="filter-button button is-primary" type="submit" value="Filter">
-            <a class="filter-toggle button is-compact is-white is-not-underlined" href="#gridFiltersAll">
+            <a class="filter-toggle button is-compact is-white is-not-underlined" aria-expanded="false" aria-controls="gridFiltersAll" href="#gridFiltersAll">
               <span class="material-icons md-16" aria-hidden="true">expand_more</span>
               <span class="more-filters">More Filters</span>
               <span class="less-filters is-hidden">Fewer Filters</span>
@@ -30,7 +30,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         </div>
       </div>
 
-      <div class="filters-grid-all is-sr-only" id="gridFiltersAll">
+      <div class="filters-grid-all is-sr-only" id="gridFiltersAll" style="display:none">
         <hr>
 
         <div class="columns">

diff --git a/views/objects/_filters.html b/views/objects/_filters.html
@@ -22,7 +22,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         <div class="column is-align-self-flex-end">
           <div class="filters-grid-controls">
             <input class="filter-button button is-primary" type="submit" value="Filter">
-            <a class="filter-toggle button is-compact is-white is-not-underlined" href="#gridFiltersAll">
+            <a class="filter-toggle button is-compact is-white is-not-underlined" aria-expanded="false" aria-controls="gridFiltersAll" href="#gridFiltersAll">
               <span class="material-icons md-16" aria-hidden="true">expand_more</span>
               <span class="more-filters">More Filters</span>
               <span class="less-filters is-hidden">Fewer Filters</span>
@@ -31,7 +31,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         </div>
       </div>
 
-      <div class="filters-grid-all is-sr-only" id="gridFiltersAll">
+      <div class="filters-grid-all is-sr-only" id="gridFiltersAll" style="display:none">
         <hr>
 
         <div class="columns">

diff --git a/views/work_items/_filters.html b/views/work_items/_filters.html
@@ -21,7 +21,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         <div class="column is-align-self-flex-end">
           <div class="filters-grid-controls">
             <input class="filter-button button is-primary" type="submit" value="Filter">
-            <a class="filter-toggle button is-compact is-white is-not-underlined" href="#gridFiltersAll">
+            <a class="filter-toggle button is-compact is-white is-not-underlined" aria-expanded="false" aria-controls="gridFiltersAll" href="#gridFiltersAll">
               <span class="material-icons md-16" aria-hidden="true">expand_more</span>
               <span class="more-filters">More Filters</span>
               <span class="less-filters is-hidden">Fewer Filters</span>
@@ -30,7 +30,7 @@ <h3 class="filters-grid-label text-label text-xs">Filter</h3>
         </div>
       </div>
 
-      <div class="filters-grid-all is-sr-only" id="gridFiltersAll">
+      <div class="filters-grid-all is-sr-only" id="gridFiltersAll" style="display:none">
         <hr>
 
         <div class="columns">