a11y improvements for gists (#576)

- MWC now requires `aria-label` instead of `label`
- Don't close flyout when clicking buttons with keyboard (bugfix)
- Recover from not being allowed to write to clipboard (actually just affects Safari generally)

Part of #533

Author: aomarks

packages/lit-dev-content/rollup.config.js

@@ -95,7 +95,7 @@ export default [
   // We compile them separately here because they include imports for a small
   // amount of code that we want to inline directly (again, because we want to
   // execute immediately), even though that code is technically duplicated into
-  // the asyncronously-loaded module bundles above.
+  // the asynchronously-loaded module bundles above.
   {
     input: [
       'lib/global/apply-mods.js',

packages/lit-dev-content/src/components/copy-button.ts

@@ -28,7 +28,7 @@ export class CopyButton extends LitElement {
     return html`<mwc-icon-button
       outlined
       @click=${this._click}
-      label="Copy to clipboard"
+      aria-label="Copy to clipboard"
     >
       ${copyIcon}
     </mwc-icon-button>`;

packages/lit-dev-content/src/components/litdev-drawer.ts

@@ -112,7 +112,7 @@ export class LitDevDrawer extends LitElement {
 
         <mwc-icon-button-toggle
           id="openCloseButton"
-          label="Open or close examples drawer"
+          aria-label="Open or close examples drawer"
           .on=${!this.open}
           @click=${this._onClickToggleButton}
         >

packages/lit-dev-content/src/components/litdev-flyout.ts

@@ -121,15 +121,15 @@ export class LitDevFlyout extends LitElement {
       // Defer a microtask so that the click that opened this flyout won't cause
       // it to close.
       if (this.open) {
-        window.addEventListener('click', this._onWindowClick);
+        window.addEventListener('mouseup', this._onWindowMouseup);
       }
     });
   }
 
   private _removeEventListeners() {
     window.removeEventListener('keydown', this._onWindowKeydown);
     this.removeEventListener('mousedown', this._onThisMousedown);
-    window.removeEventListener('click', this._onWindowClick);
+    window.removeEventListener('mouseup', this._onWindowMouseup);
   }
 
   private _clickStartedWithinThis = false;
@@ -143,7 +143,7 @@ export class LitDevFlyout extends LitElement {
     this._clickStartedWithinThis = true;
   };
 
-  private readonly _onWindowClick = () => {
+  private readonly _onWindowMouseup = () => {
     if (this._clickStartedWithinThis) {
       this._clickStartedWithinThis = false;
     } else {

packages/lit-dev-content/src/components/litdev-playground-share-gist.ts

@@ -289,11 +289,20 @@ export class LitDevPlaygroundShareGist extends LitElement {
       });
 
       window.location.hash = '#gist=' + gist.id;
-      await navigator.clipboard.writeText(window.location.toString());
+      let statusText = 'Gist created';
+      try {
+        await navigator.clipboard.writeText(window.location.toString());
+        statusText += ' and URL copied to clipboard';
+      } catch {
+        // The browser isn't allowing us to copy. This could happen because it's
+        // disabled in settings, or because we're in a browser like Safari that
+        // only allows copying from a synchronous event handler.
+        statusText += ' and URL bar updated';
+      }
       this.dispatchEvent(new Event('created'));
       this.dispatchEvent(
         new CustomEvent('status', {
-          detail: {text: 'Gist created and URL copied to clipboard'},
+          detail: {text: statusText},
           bubbles: true,
         })
       );
@@ -350,11 +359,15 @@ export class LitDevPlaygroundShareGist extends LitElement {
       });
 
       window.location.hash = '#gist=' + gist.id;
-      await navigator.clipboard.writeText(window.location.toString());
+      let statusText = 'Gist updated';
+      try {
+        await navigator.clipboard.writeText(window.location.toString());
+        statusText += ' and URL copied to clipboard';
+      } catch {}
       this.dispatchEvent(new Event('created'));
       this.dispatchEvent(
         new CustomEvent('status', {
-          detail: {text: 'Gist updated and URL copied to clipboard'},
+          detail: {text: statusText},
           bubbles: true,
         })
       );

packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts

@@ -77,11 +77,20 @@ export class LitDevPlaygroundShareLongUrl extends LitElement {
 
   async save() {
     history.pushState({}, '', this._url);
-    await navigator.clipboard.writeText(this._url);
+    let statusText;
+    try {
+      await navigator.clipboard.writeText(window.location.toString());
+      statusText = 'URL copied to clipboard';
+    } catch {
+      // The browser isn't allowing us to copy. This could happen because it's
+      // disabled in settings, or because we're in a browser like Safari that
+      // only allows copying from a synchronous event handler.
+      statusText += 'URL bar updated';
+    }
     this.dispatchEvent(new Event('copied'));
     this.dispatchEvent(
       new CustomEvent('status', {
-        detail: {text: 'URL copied to clipboard'},
+        detail: {text: statusText},
         bubbles: true,
       })
     );

packages/lit-dev-content/src/components/litdev-tutorial.ts

@@ -91,7 +91,7 @@ export class LitDevTutorial extends LitElement {
         <nav>
           <mwc-icon-button
             id="prevButton"
-            label="Previous step"
+            aria-label="Previous step"
             .disabled=${this._idx <= 0}
             @click=${this._onClickPrevButton}
           >
@@ -105,7 +105,7 @@ export class LitDevTutorial extends LitElement {
 
           <mwc-icon-button
             id="nextButton"
-            label="Next step"
+            aria-label="Next step"
             .disabled=${this._idx >= manifest.steps.length - 1}
             @click=${this._onClickNextButton}
           >