From 099b42b31ebb3ba4717011decf1c445fef57814c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Sun, 20 Sep 2020 21:20:51 +0100
Subject: [PATCH] Make all control buttons aria-expanded=false

Suggested by the Digital Accessibility Centre in
their report. Giving these buttons
aria-expanded=false indicates:
- they control a section on the page
- that section is collapsed (and so clicking the
  button will open it)
---
 app/assets/javascripts/templateFolderForm.js | 10 ++++++----
 tests/javascripts/templateFolderForm.test.js |  4 ++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index c21a3a8cd..0b49494c9 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -260,8 +260,10 @@
     this.nothingSelectedButtons = $(`
       <div id="nothing_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="add-new-template">New template</button>
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="add-new-folder">New folder</button>
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="add-new-template" aria-expanded="false">
+            New template
+          </button>
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="add-new-folder" aria-expanded="false">New folder</button>
           <div class="template-list-selected-counter">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.default}
@@ -274,10 +276,10 @@
     this.itemsSelectedButtons = $(`
       <div id="items_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="move-to-existing-folder">
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="move-to-existing-folder" aria-expanded="false">
             Move<span class="govuk-visually-hidden"> selection to folder</span>
           </button>
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="move-to-new-folder">Add to new folder</button>
+          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
           <div class="template-list-selected-counter" aria-hidden="true">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.selected(1)}
diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js
index 094b39026..ab884351a 100644
--- a/tests/javascripts/templateFolderForm.test.js
+++ b/tests/javascripts/templateFolderForm.test.js
@@ -261,6 +261,8 @@ describe('TemplateFolderForm', () => {
 
       expect(document.querySelector('button[value=add-new-template]')).not.toBeNull();
       expect(document.querySelector('button[value=add-new-folder]')).not.toBeNull();
+      expect(document.querySelector('button[value=add-new-template]').getAttribute('aria-expanded')).toEqual('false');
+      expect(document.querySelector('button[value=add-new-folder]').getAttribute('aria-expanded')).toEqual('false');
       expect(visibleCounter).not.toBeNull();
 
     });
@@ -544,6 +546,8 @@ describe('TemplateFolderForm', () => {
 
       expect(formControls.querySelector('button[value=move-to-new-folder]')).not.toBeNull();
       expect(formControls.querySelector('button[value=move-to-existing-folder]')).not.toBeNull();
+      expect(formControls.querySelector('button[value=move-to-new-folder]').getAttribute('aria-expanded')).toEqual('false');
+      expect(formControls.querySelector('button[value=move-to-existing-folder]').getAttribute('aria-expanded')).toEqual('false');
 
     });