Recent UI and Accessibility fixes

apps/static/css/readux.scss

@@ -40,8 +40,11 @@ html, body {
 
 main { flex-grow: 1; }
 
-/* Home page navigation transparent, light text/icons over dark hero */
+/* Home page navigation: light text/icons over a dark scrim so the text keeps
+   sufficient contrast (a scrim WAVE can detect, since the hero background is an
+   image the checker cannot evaluate). */
 .home-nav {
+  background-color: rgba($rx-color-midnight-blue, 0.85);
   nav { background-color: transparent !important; }
   a, .brand-logo, .brand-tagline { color: $color-white !important; }
   svg line, svg path, svg circle, svg polygon, svg polyline, svg rect {
@@ -73,7 +76,7 @@ main { flex-grow: 1; }
 /* Text & headings */
 .paragraph { color: $rx-color-midnight-blue; line-height: normal; }
 .title { color: $rx-color-midnight-blue; font-size: x-large; font-weight: bold; }
-.hero { padding-top: 15vh; color: $color-white; }
+.hero { padding-top: 15vh; padding-bottom: 2rem; color: $color-white; background-color: rgba($rx-color-midnight-blue, 0.85); }
 .uk-container h2 { margin-bottom: 0.35rem;}
 
 /* Utilities */

apps/static/js/components/InfoUrlExternal.vue

@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="rx-info-content-value">
-      <a :href="localUrl" class="rx-anchor" target="_blank">{{ localUrl }}</a>
+      <a :href="localUrl" class="rx-anchor" target="_blank" rel="noopener" :aria-label="`${label} (opens in a new tab)`">{{ localUrl }}</a>
     </div>
   </div>
 </template>

apps/static/js/components/InfoUrlSingle.vue

@@ -9,7 +9,7 @@
       </div>
     </div>
     <div class="rx-info-content-value">
-      <a :href="url" class="rx-anchor" target="_blank">{{ url }}</a>
+      <a :href="url" class="rx-anchor" target="_blank" rel="noopener" :aria-label="`${label} (opens in a new tab)`">{{ url }}</a>
     </div>
   </div>
 </template>

apps/static/js/components/InfoUrlUnit.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="rx-info-content-value uk-flex-between rx-flex">
-    <a :href="url" class="rx-anchor" target="_blank">{{ url }}</a>
+    <a :href="url" class="rx-anchor" target="_blank" rel="noopener" :aria-label="`${label} (opens in a new tab)`">{{ url }}</a>
     <div>
       <span class="uk-label rx-label-copy" @click="copyText">
         <span uk-icon="icon: copy; ratio: 0.5"></span>
@@ -14,7 +14,8 @@
 export default {
   name: "InfoUrlUnit",
   props: {
-    url: { type: String, required: true }
+    url: { type: String, required: true },
+    label: { type: String, default: "External link" }
   },
   methods: {
     async copyText() {

apps/static/js/components/OcrInspector.vue

@@ -10,11 +10,13 @@
         <input
           type="checkbox"
           id="ocr-overlay"
+          aria-label="Overlay OCR on Page"
           v-model="overlayChecked"
           :disabled="overlayDisabled"
           @change="onOverlayToggle"
         >
         <div class="uk-switch-slider"></div>
+        <span class="sr-only">Overlay OCR on Page</span>
       </label>
       <span style="flex: 1;">Overlay OCR on Page</span>
     </div>

apps/static/js/components/VolumeSearch.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="rx-volume-search">
     <div class="uk-search uk-search-default rx-page-search-container">
-      <span uk-search-icon></span>
+      <span uk-search-icon aria-hidden="true"></span>
       <input
         class="uk-search-input"
         type="search"
         id="volume-search"
         placeholder="Search in volume text or annotations"
+        aria-label="Search in volume text or annotations"
         name="q"
         v-model="keyword"
         @keypress.enter="getSearchResults"

apps/templates/_home/_featured_collections.html

@@ -46,13 +46,13 @@ <h2 class="volume-title-inline">
                 </div>
 
                 <div class="uk-hidden@s uk-light">
-                    <a class="uk-position-center-left uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
-                    <a class="uk-position-center-right uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
+                    <a class="uk-position-center-left uk-position-small" href aria-label="Previous collections" uk-slidenav-previous uk-slider-item="previous"></a>
+                    <a class="uk-position-center-right uk-position-small" href aria-label="Next collections" uk-slidenav-next uk-slider-item="next"></a>
                 </div>
 
                 <div class="uk-visible@s">
-                    <a class="uk-position-center-left-out uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
-                    <a class="uk-position-center-right-out uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
+                    <a class="uk-position-center-left-out uk-position-small" href aria-label="Previous collections" uk-slidenav-previous uk-slider-item="previous"></a>
+                    <a class="uk-position-center-right-out uk-position-small" href aria-label="Next collections" uk-slidenav-next uk-slider-item="next"></a>
                 </div>
 
             </div>

apps/templates/_home/_featured_volumes.html

@@ -56,13 +56,13 @@ <h2 class="volume-title-inline">
                 </div>
 
                 <div class="uk-hidden@s uk-light">
-                    <a class="uk-position-center-left uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
-                    <a class="uk-position-center-right uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
+                    <a class="uk-position-center-left uk-position-small" href aria-label="Previous volumes" uk-slidenav-previous uk-slider-item="previous"></a>
+                    <a class="uk-position-center-right uk-position-small" href aria-label="Next volumes" uk-slidenav-next uk-slider-item="next"></a>
                 </div>
 
                 <div class="uk-visible@s">
-                    <a class="uk-position-center-left-out uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
-                    <a class="uk-position-center-right-out uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
+                    <a class="uk-position-center-left-out uk-position-small" href aria-label="Previous volumes" uk-slidenav-previous uk-slider-item="previous"></a>
+                    <a class="uk-position-center-right-out uk-position-small" href aria-label="Next volumes" uk-slidenav-next uk-slider-item="next"></a>
                 </div>
 
             </div>

apps/templates/_home/_login_modal.html

@@ -3,7 +3,7 @@
 <!-- Login Modal -->
 <div id="login-modal" uk-modal>
   <div class="uk-modal-dialog custom-modal uk-padding">
-    <button class="uk-modal-close-default uk-close-large uk-padding-small" type="button" uk-close>
+    <button class="uk-modal-close-default uk-close-large uk-padding-small" type="button" uk-close aria-label="Close">
     </button>
     <!-- Modal Header -->
     <div class="modal-header">

apps/templates/_page/_urls.html

@@ -4,7 +4,7 @@
 
 <info-url-multiple label="Collection Manifest">
   {% for col in volume.collections.all %}
-  <info-url-unit url="https://{{ request.META.HTTP_HOST }}{% url 'CollectionRender' 'v2' col.pid %}">
+  <info-url-unit label="Collection Manifest" url="https://{{ request.META.HTTP_HOST }}{% url 'CollectionRender' 'v2' col.pid %}">
   </info-url-unit>
   {% endfor %}
 </info-url-multiple>
@@ -26,7 +26,7 @@
 {% if volume.external_links.see_also %}
 <info-url-multiple label="See Also">
   {% for link in volume.external_links.see_also %}
-    <info-url-unit url="{{ link }}">
+    <info-url-unit label="See Also" url="{{ link }}">
     </info-url-unit>
   {% endfor %}
 </info-url-multiple>
@@ -35,7 +35,7 @@
 {% if volume.external_links.related %}
 <info-url-multiple label="External Links">
   {% for link in volume.external_links.related %}
-    <info-url-unit url="{{ link }}">
+    <info-url-unit label="External Links" url="{{ link }}">
     </info-url-unit>
   {% endfor %}
 </info-url-multiple>

apps/templates/collection.html

@@ -47,7 +47,7 @@ <h1 class="collection-title uk-margin-remove uk-text-bold" id="collection-title"
       <div class="hero-image-column">
         <div class="hero-image-wrapper">
           <div class="image-placeholder"></div>
-          {% if collection.metadata %}
+          {% if collection.collection_image_title or collection.collection_image_creator or collection.collection_image_summary %}
             <button
               class="info-icon-button"
               uk-toggle="target: #modal-metadata"
@@ -86,16 +86,19 @@ <h2 class="uk-text-bold">{{ collection.label }}</h2>
     </div>
   {% endwith %}
 
-  {% if collection.metadata %}
+  {% if collection.collection_image_title or collection.collection_image_creator or collection.collection_image_summary %}
     <div id="modal-metadata" class="uk-modal" uk-modal>
       <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
           <button class="uk-modal-close-default" type="button" uk-close></button>
-          <h2 class="uk-modal-title uk-text-bold">Metadata and Image Information</h2>
-          {% for label, value in collection.metadata|metadata_items %}
-              <p><strong>{{ label }}:</strong> {{ value|unescape_html }}</p>
-          {% empty %}
-              <p>No image information available.</p>
-          {% endfor %}
+          {% if collection.collection_image_title %}
+              <p><strong>Title:</strong> {{ collection.collection_image_title|unescape_html }}</p>
+          {% endif %}
+          {% if collection.collection_image_creator %}
+              <p><strong>Creator:</strong> {{ collection.collection_image_creator|unescape_html }}</p>
+          {% endif %}
+          {% if collection.collection_image_summary %}
+              <p><strong>Summary:</strong> {{ collection.collection_image_summary|unescape_html }}</p>
+          {% endif %}
       </div>
     </div>
   {% endif %}

apps/templates/snippets/_search_box.html

@@ -1,7 +1,7 @@
 <div class="search-bar uk-padding-small">
   <form action="{% url 'search' %}" method="get">
-    <label for="q" class="uk-hidden">Search</label>
-    <input class="uk-input" type="text" name="q" id="q" placeholder="Search for a volume in the library">
+    <label for="q" class="sr-only">Search for a volume in the library</label>
+    <input class="uk-input" type="text" name="q" id="q" placeholder="Search for a volume in the library" aria-label="Search for a volume in the library">
     <button type="submit" class="uk-button">
         Search
     </button>