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

@@ -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 */

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');
   }
 
   /**