Accessibilty, first pass (#17)

* Placeholder color contrast @ WCAG 2.0 level AA

* Trailing whitespace removed.

* Remove redundant labels.

* Logo is a link in mobile, if not-embedded; otherwise, span. Fix link labels.

* HREF mandatory on A; menu behaves like a popup button.

* Hide icons from screen readers.

* About icon id keyboard-operarable and is labeled.

* Note about inaccessible modal.

* Missing closing tag.

* Fix nesting/indentation.

* Fix nesting/indentation; add missing closing tag.

* Trailing whitespace removed.

* Don't use NAV landmark for non-nav; add heading for page structure.

* Hide icon.

* Load archive form's buttons visibly receive keyboard focus.

* Trailing whitespace removed.

* "Hide" header button is keyboard-operable, and more-verbosely labeled for screenreader users.

* Don't use NAV landmark for non-nav; add heading for page structure.

* Sort order announced to screen reader users.

* Trailing whitespace removed.

* Delete button only a button when it can be pressed; announce in progress deletion.

* Trailing whitespace removed.

* Use a NAV landmark for replay controls.

* Remove "menu" role, to avoid having to implement arrow key support https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus

* Hide icons.

* Label buttons.

* Links in disguise as buttons need HREF, and to respond to spacebar.

* Re-dub "main menu" to distinguish from replay menu

* Replay nav buttons visually get keyboard focus.

* Trailing whitespace removed.

* Hiding icons; button labels; links-as-buttons are operable.

* Use type=search for additional clarity.

* Add appropriate landmarks and a heading for structure and clarity.

* Tab selection is a nav, and is keyboard operable.

* Indentation; missing closing tag.

* Trailing whitespace removed.

* Title iframe.

* Not a navigation.

* Per discussion, rename tab to "URLs" (label only; route etc. the same while experimenting).

* Announce when expanded/collapsed.

* Remove "menu" to avoid having to implement expected keyboard support.

* Use correct heading level when in sidebar and when main.

* Trailing whitespace removed.

* Semantic markup of table; headings and captions; link-buttons are keyboard operable.

* Skip links for keyboard users.

* Title iframe; hide icon.

* Just a list, not an aside.

* Not an article.

* Remove trailing whitespace.

* Make each page in the list a heading.

* link-buttons are keyboard operable.

* Use semantic list for page list.

* Announce changes to search results.

* More wayfinding tweaks.

* Landmark and heading for replay.

* Dynamic page titles.

* Remove redundant labels from main landmarks.

* additional tweaks after rebase
- add 'role' to each of the tabs, dependent if sidebar or not
- add 'role=main' for replay
- add sr-only headers to each tab

* fix typos

* remaining tweaks:
- url-resources: fix sorter getting moved into notification
- url-resources: fix border for mobile view
- add screenreader labels to expand/hide buttons

* Show hover effect on focus.

* Wrap the whole sidebar is role=complementary, including the tab navigation.

* Make buttons keyboard operable; fix typos.

* Programmatically associate sidebar toggle button with sidebar.

* Per discusson, try calling this "URLs"

* Different heading levels for sidebar and main.

* Announce changes to search results.

* Correct dynamic page title, whe not in sidebar.

* Remove hyperlink focus decoration; reveal obscured focus indicator.

* Focus on replay, when replay changes.

* Make buttons keyboard operable.

* Move spacebar helper to misc instead of duplicating.

* Bump compiled assets.

* Use disabled attribute to match css; update label to describe new sidebar.

* Adjust replay focus styles.

* Adjust replay nav button focus, so visuals onclick in Chrome are less prominent.

* Put wordmark with logo on non-embed desktop, so that logo and wordmark make a single link.

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>

src/coll-index.js

@@ -94,7 +94,7 @@ class CollIndex extends LitElement
     const resp = await fetch("./wabac/api/index");
     try {
       const json = await resp.json();
-      this.colls = json.colls.map((coll) => { 
+      this.colls = json.colls.map((coll) => {
         coll.title = coll.title || coll.filename;
         return coll;
       });
@@ -147,14 +147,14 @@ class CollIndex extends LitElement
     .no-top-padding {
       padding-top: 1.0em;
     }
-    button.is-loading {
+    .is-loading {
       line-height: 1.5em;
       height: 1.5em;
       border: 0px;
       background-color: transparent !important;
       width: auto;
     }
-    nav.panel.is-light {
+    div.panel.is-light {
       margin-bottom: 2em;
     }
 
@@ -251,14 +251,14 @@ class CollIndex extends LitElement
     </header>
     <section class="section no-top-padding">
       <div class="sort-header is-small">
-        <a @click=${(e) => this.hideHeader = !this.hideHeader} class="collapse button is-small">
+        <button @click=${(e) => this.hideHeader = !this.hideHeader} class="collapse button is-small">
           <span class="icon"><fa-icon .svg=${this.hideHeader ? fasArrowDown : fasArrowUp}></span>
-          <span>${this.hideHeader ? 'Show' : 'Hide'}</span>
-        </a>
+          <span>${this.hideHeader ? 'Show ' : 'Hide'} <span class="is-sr-only">Header</span></span>
+        </button>
       </div>
-      <nav class="panel is-light">
-        <div class="panel-heading"><span>Loaded Archives</span>
-        </div>
+      <div class="panel is-light">
+        <h2 class="panel-heading"><span>Loaded Archives</span>
+        </h2>
 
         ${this.colls.length ? html`
         <div class="panel-block sort-header is-small">
@@ -292,13 +292,13 @@ class CollIndex extends LitElement
                 </div>
                 <div class="column is-2"><p class="minihead">Date Loaded</p>${coll.ctime ? new Date(coll.ctime).toLocaleString() : ""}</div>
                 <div class="column is-2"><p class="minihead">Total Size</p>${prettyBytes(Number(coll.size || 0))}
-                 
+
                 </div>
               </div>
               ${!this._deleting[coll.sourceUrl] ? html`
-              <button class="delete" title="Unload Collection" data-coll-index="${i}" @click="${this.onDeleteColl}"></button>
+              <button class="delete" aria-label="Unload Collection" title="Unload Collection" data-coll-index="${i}" @click="${this.onDeleteColl}"></button>
               ` : html`
-              <button class="button delete is-loading is-static"></button>`}
+              <span class="button delete is-loading is-static">Deleting</span`}
             </div>
           `)}
         </div>
@@ -309,7 +309,7 @@ class CollIndex extends LitElement
           <i>No Archives so far! Archives loaded in the section above will appear here.</i>
         </div>
         `}
-      </nav>
+      </div>
     </section>
     `;
   }
@@ -325,4 +325,4 @@ class CollIndex extends LitElement
 
 customElements.define("wr-coll-index", CollIndex);
 
-export { CollIndex };
+export { CollIndex };