From f7f5f0c4baf04211bfb7c5a4c7acec6c61e67898 Mon Sep 17 00:00:00 2001
From: Theodore Abshire <theodab@google.com>
Date: Thu, 2 May 2019 15:27:53 -0700
Subject: [PATCH] Hide contents of hamburger menu when it is hidden.

The contents being visible but offscreen was causing issues with
screen-readers, where the section headers, inputs, etc could still be
tabbed over when the hamburger menu was "closed".

Closes b/131840079

Change-Id: Ic34c6771981da2a8c4893edac0cb44e56869c3bb
---
 demo/config.js | 16 ++++++++++++++++
 demo/main.js   | 24 ++++++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/demo/config.js b/demo/config.js
index 306daa7734..7f3c082930 100644
--- a/demo/config.js
+++ b/demo/config.js
@@ -60,6 +60,22 @@ class ShakaDemoConfig {
       // changes based on the config changes.
       this.reloadAndSaveState_();
     });
+    document.addEventListener('shaka-main-drawer-state-change', () => {
+      this.setContentAvailability_(shakaDemoMain.getIsDrawerOpen());
+    });
+    this.setContentAvailability_(shakaDemoMain.getIsDrawerOpen());
+  }
+
+  /**
+   * @param {boolean} availability
+   * @private
+   */
+  setContentAvailability_(availability) {
+    if (availability) {
+      this.container_.classList.remove('hidden');
+    } else {
+      this.container_.classList.add('hidden');
+    }
   }
 
   /** @private */
diff --git a/demo/main.js b/demo/main.js
index 0ee70bb3c5..2b3aaebcda 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -190,7 +190,31 @@ class ShakaDemoMain {
     drawerCloseButton.addEventListener('click', () => {
       const layout = document.getElementById('main-layout');
       layout.MaterialLayout.toggleDrawer();
+      this.dispatchEventWithName_('shaka-main-drawer-state-change');
+      this.hideNode_(drawerCloseButton);
     });
+    // Dispatch drawer state change events when the drawer button or obfuscator
+    // are pressed also.
+    const drawerButton = document.querySelector('.mdl-layout__drawer-button');
+    goog.asserts.assert(drawerButton, 'There should be a drawer button.');
+    drawerButton.addEventListener('click', () => {
+      this.dispatchEventWithName_('shaka-main-drawer-state-change');
+      this.showNode_(drawerCloseButton);
+    });
+    const obfuscator = document.querySelector('.mdl-layout__obfuscator');
+    goog.asserts.assert(obfuscator, 'There should be an obfuscator.');
+    obfuscator.addEventListener('click', () => {
+      this.dispatchEventWithName_('shaka-main-drawer-state-change');
+      this.hideNode_(drawerCloseButton);
+    });
+    this.hideNode_(drawerCloseButton);
+  }
+
+  /** @return {boolean} */
+  getIsDrawerOpen() {
+    const drawer = document.querySelector('.mdl-layout__drawer');
+    goog.asserts.assert(drawer, 'There should be a drawer.');
+    return drawer.classList.contains('is-visible');
   }
 
   /**