Adds aria-expanded for See more options.

refs #3170
sul-dlss · Jul 5, 2023 · 1487999 · 1487999
1 parent 227557b
commit 1487999
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 2 deletions.
diff --git a/app/components/works/subtypes_component.html.erb b/app/components/works/subtypes_component.html.erb
@@ -39,7 +39,7 @@
     </div>
 
     <% unless mixed_material_type? %>
-      <a href="#" class="more-options collapsed" data-action="more-types#toggleMoreTypes" data-more-types-target="moreTypesLink">
+      <a href="#" class="more-options collapsed" data-action="more-types#toggleMoreTypes" data-more-types-target="moreTypesLink" aria-expanded="false" role="button">
         See more options
       </a>
     <% end %>

diff --git a/app/components/works/work_type_modal_component.html.erb b/app/components/works/work_type_modal_component.html.erb
@@ -65,7 +65,7 @@
 
           <div class="mb-4 subtype-container" data-work-type-modal-target="subtype"></div>
 
-          <a href="#" class="more-options collapsed" data-action="work-type-modal#toggleMoreTypes" data-work-type-modal-target="moreTypesLink" hidden>
+          <a href="#" class="more-options collapsed" data-action="work-type-modal#toggleMoreTypes" data-work-type-modal-target="moreTypesLink" hidden aria-expanded="false" role="button">
             See more options
           </a>
 

diff --git a/app/javascript/controllers/more_types_controller.js b/app/javascript/controllers/more_types_controller.js
@@ -15,11 +15,13 @@ export default class extends Controller {
     this.moreTypesTarget.hidden = false
     this.moreTypesLinkTarget.innerHTML = 'See fewer options'
     this.moreTypesLinkTarget.classList.toggle('collapsed', false)
+    this.moreTypesLinkTarget.setAttribute('aria-expanded', true)
   }
 
   hideMoreTypes() {
     this.moreTypesTarget.hidden = true
     this.moreTypesLinkTarget.innerHTML = 'See more options'
     this.moreTypesLinkTarget.classList.toggle('collapsed', true)
+    this.moreTypesLinkTarget.setAttribute('aria-expanded', false)
   }
 }
diff --git a/app/javascript/controllers/work_type_modal_controller.js b/app/javascript/controllers/work_type_modal_controller.js
@@ -61,13 +61,15 @@ export default class extends Controller {
     this.moreTypesTarget.hidden = false
     this.moreTypesLinkTarget.innerHTML = 'See fewer options'
     this.moreTypesLinkTarget.classList.toggle('collapsed', false)
+    this.moreTypesLinkTarget.setAttribute('aria-expanded', true)
     this.continueButtonTarget.focus()
   }
 
   hideMoreTypes() {
     this.moreTypesTarget.hidden = true
     this.moreTypesLinkTarget.innerHTML = 'See more options'
     this.moreTypesLinkTarget.classList.toggle('collapsed', true)
+    this.moreTypesLinkTarget.setAttribute('aria-expanded', false)
   }
 
   displaySubtypeOptions(type) {