@internetarchive/bookreader 5.0.0-101 → 5.0.0-102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-101",
+  "version": "5.0.0-102",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [
@@ -47,28 +47,28 @@
     "lit": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.25.8",
-    "@babel/eslint-parser": "7.25.7",
+    "@babel/core": "7.28.4",
+    "@babel/eslint-parser": "7.28.5",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.25.7",
-    "@babel/preset-env": "7.25.8",
+    "@babel/plugin-proposal-decorators": "7.28.0",
+    "@babel/preset-env": "7.28.3",
     "@iiif/presentation-2": "^1.0.4",
     "@iiif/presentation-3": "^2.1.3",
     "@open-wc/testing-helpers": "3.0.1",
-    "@types/jest": "29.5.14",
+    "@types/jest": "30.0.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "babel-loader": "9.2.1",
+    "babel-loader": "10.0.0",
     "concurrently": "9.0.1",
-    "core-js": "3.38.1",
+    "core-js": "3.46.0",
     "cpx2": "8.0.0",
-    "eslint": "^7.32.0",
+    "eslint": "7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
-    "eslint-plugin-testcafe": "^0.2.1",
+    "eslint-plugin-testcafe": "0.2.1",
     "http-server": "14.1.1",
     "hypothesis": "^1.1627.0",
     "interactjs": "^1.10.18",
     "iso-language-codes": "2.0.0",
-    "jest": "29.7.0",
+    "jest": "30.2.0",
     "jest-environment-jsdom": "^29.7.0",
     "jquery": "3.6.1",
     "jquery-colorbox": "1.6.4",
@@ -77,19 +77,19 @@
     "jquery.browser": "0.1.0",
     "live-server": "1.2.2",
     "regenerator-runtime": "0.14.1",
-    "sass": "1.79.5",
-    "sinon": "19.0.2",
+    "sass": "1.93.2",
+    "sinon": "21.0.0",
     "soundmanager2": "2.97.20170602",
-    "svgo": "3.3.2",
-    "testcafe": "3.6.2",
+    "svgo": "4.0.0",
+    "testcafe": "3.7.2",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
-    "webpack": "5.95.0",
-    "webpack-cli": "5.1.4"
+    "webpack": "5.102.1",
+    "webpack-cli": "6.0.1"
   },
   "jest": {
     "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
-      "node_modules/(?!(sinon|lit-html|lit-element|lit|@lit|@internetarchive|@open-wc)/)"
+      "node_modules/(?!(sinon|lit-html|lit-element|lit|@lit|@lit-labs|@internetarchive|@open-wc)/)"
     ],
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/$1"
@@ -116,8 +116,8 @@
     "build-hypothesis:watch": "npx cpx --watch --verbose \"node_modules/hypothesis/**/*\" BookReader/hypothesis",
     "build-js": "npx webpack",
     "build-js:watch": "npx webpack --mode=development --watch",
-    "build-css": "npx sass --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
-    "build-css:watch": "npx sass --watch --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
+    "build-css": "npx sass --silence-deprecation=import --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
+    "build-css:watch": "npx sass --silence-deprecation=import --watch --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
     "clean": "rm -r BookReader/ || true",
     "lint": "npx eslint src/ tests/ *.js *.cjs",
     "lint:fix": "npx eslint --fix src/ tests/ *.js *.cjs",

package/src/BookNavigator/search/search-results.js

@@ -5,6 +5,7 @@ import '@internetarchive/ia-activity-indicator/ia-activity-indicator.js';
 import checkmarkIcon from '../assets/icon_checkmark.js';
 import closeIcon from '../assets/icon_close.js';
 import buttonCSS from '../assets/button-base.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 /** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
 export class IABookSearchResults extends LitElement {
@@ -15,7 +16,6 @@ export class IABookSearchResults extends LitElement {
       queryInProgress: { type: Boolean },
       renderHeader: { type: Boolean },
       renderSearchAllFiles: { type: Boolean },
-      displayResultImages: { type: Boolean },
       errorMessage: { type: String },
     };
   }
@@ -29,7 +29,6 @@ export class IABookSearchResults extends LitElement {
     this.queryInProgress = false;
     this.renderHeader = false;
     this.renderSearchAllFiles = false;
-    this.displayResultImages = false;
     this.errorMessage = '';
 
     this.bindBookReaderListeners();
@@ -107,13 +106,13 @@ export class IABookSearchResults extends LitElement {
 
   get resultsCount() {
     const count = this.results.length;
-    return count ? html`<p>(${count} result${count > 1 ? 's' : ''})</p>` : nothing;
+    return count ? `${count} result${count > 1 ? 's' : ''}` : nothing;
   }
 
   get headerSection() {
     const header = html`<header>
       <h3>Search inside</h3>
-      ${this.resultsCount}
+      ${this.resultsCount ? html`(${this.resultsCount})` : nothing}
     </header>`;
     return this.renderHeader ? header : nothing;
   }
@@ -129,7 +128,7 @@ export class IABookSearchResults extends LitElement {
   get loadingIndicator() {
     return html`
       <div class="loading">
-        <ia-activity-indicator mode="processing"></ia-activity-indicator>
+        <ia-activity-indicator mode="processing" aria-hidden="true" role="presentation"></ia-activity-indicator>
         <p>Searching</p>
         <button class="ia-button external cancel-search" @click=${this.cancelSearch}>Cancel</button>
       </div>
@@ -137,36 +136,37 @@ export class IABookSearchResults extends LitElement {
   }
 
   get resultsSet() {
-    const resultsClass = this.displayResultImages ? 'show-image' : '';
     return html`
-      <ul class="results ${resultsClass}">
+    <nav aria-label="Search results">
+      <div>
+        ${this.resultsCount}
+        <a
+          href="#"
+          class="skip-link"
+          @click=${(e) => {
+      e.preventDefault();
+      this.shadowRoot.querySelector('.results li:last-child .result-item').focus();
+    }}
+        >Skip to last result</a>
+      </div>
+      <ul class="results">
         ${this.results.map(match => html`
-            <li @click=${this.selectResult.bind(this, match)}>
-              ${match.cover ? html`<img src="${match.cover}" />` : nothing}
-              <h4>${match.title || nothing}</h4>
-              <p class="page-num">Page ${match.displayPageNumber}</p>
-              <p>${unsafeHTML(match.html)}</p>
+            <li>
+              <button class="result-item" @click=${this.selectResult.bind(this, match)}>
+                <span class="page-num">Page ${match.displayPageNumber}</span> — <span lang=${ifDefined(match.lang)}>${unsafeHTML(match.html)}</span>
+              </button>
             </li>
           `)}
       </ul>
-    `;
-  }
-
-  get searchForm() {
-    return html`
-      <form action="" method="get" @submit=${this.performSearch}>
-        <fieldset>
-          ${this.searchMultipleControls}
-          <input
-            type="search"
-            name="query"
-            alt="Search inside this book."
-            @keyup=${this.setQuery}
-            @search=${this.setQuery}
-            .value=${this.query}
-          />
-        </fieldset>
-      </form>
+        <a
+          href="#"
+          class="skip-link"
+          @click=${(e) => {
+      e.preventDefault();
+      this.shadowRoot.querySelector('.results li:first-child .result-item').focus();
+    }}
+        >Skip to first result</a>
+    </nav>
     `;
   }
 
@@ -176,21 +176,29 @@ export class IABookSearchResults extends LitElement {
     `;
   }
 
-  get searchCTA() {
-    return html`<p class="search-cta"><em>Please enter text to search for</em></p>`;
-  }
-
   render() {
     const showSearchCTA = (!this.queryInProgress && !this.errorMessage)
     && (!this.queryInProgress && !this.results.length);
     return html`
       ${this.headerSection}
-      ${this.searchForm}
-      <div class="results-container">
+      <form action="" method="get" @submit=${this.performSearch}>
+        ${this.searchMultipleControls}
+        <input
+          type="search"
+          name="query"
+          id="br-search-input"
+          @keyup=${this.setQuery}
+          @search=${this.setQuery}
+          .value=${this.query}
+        />
+        <label class="search-cta ${showSearchCTA ? '' : 'sr-only'}" for="br-search-input">
+          Please enter text to search for
+        </label>
+      </form>
+      <div class="results-container" aria-live="polite">
         ${this.queryInProgress ? this.loadingIndicator : nothing}
         ${this.errorMessage ? this.setErrorMessage : nothing}
         ${this.results.length ? this.resultsSet : nothing}
-        ${showSearchCTA ? this.searchCTA : nothing}
       </div>
     `;
   }
@@ -211,6 +219,15 @@ export class IABookSearchResults extends LitElement {
         box-sizing: border-box;
       }
 
+      .skip-link {
+        position: absolute;
+        left: -9999px;
+      }
+      .skip-link:focus {
+        position: static;
+        left: auto;
+      }
+
       mark {
         padding: 0 .2rem;
         color: ${searchResultText};
@@ -238,9 +255,8 @@ export class IABookSearchResults extends LitElement {
         font-style: italic;
       }
 
-      fieldset {
+      form {
         padding: 0 0 1rem 0;
-        border: none;
       }
 
       [type="checkbox"] {
@@ -303,13 +319,15 @@ export class IABookSearchResults extends LitElement {
         background: #fff;
       }
 
-      p.page-num {
+      .page-num {
         font-weight: bold;
         padding-bottom: 0;
       }
 
-      p.search-cta {
+      .search-cta {
+        padding: 10px 0;
         text-align: center;
+        font-style: italic;
       }
 
       .results-container {
@@ -322,33 +340,24 @@ export class IABookSearchResults extends LitElement {
         list-style: none;
       }
 
-      ul.show-image li {
-        display: grid;
-      }
-
-      li {
+      .result-item {
         cursor: pointer;
-        grid-template-columns: 30px 1fr;
-        grid-gap: 0 .5rem;
-      }
-
-      li img {
+        margin-top: 8px;
+        font-size: 12px;
+        padding: 5px;
+        border-radius: 4px;
         display: block;
         width: 100%;
+        /* Reset button styles */
+        background: none;
+        border: none;
+        text-align: left;
+        font-family: inherit;
+        transition: background-color 0.2s;
       }
 
-      li h4 {
-        grid-column: 2 / 3;
-        padding: 0 0 2rem 0;
-        margin: 0;
-        font-weight: normal;
-      }
-
-      li p {
-        grid-column: 2 / 3;
-        padding: 0 0 1.5rem 0;
-        margin: 0;
-        font-size: 1.2rem;
+      .result-item:hover {
+        background-color: rgba(255, 255, 255, 0.1);
       }
 
       .loading {
@@ -367,6 +376,18 @@ export class IABookSearchResults extends LitElement {
         height: 40px;
         margin: 0 auto;
       }
+
+      .sr-only {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        padding: 0 !important;
+        margin: -1px !important;
+        overflow: hidden !important;
+        clip: rect(0 0 0 0) !important;
+        white-space: nowrap !important;
+        border: 0 !important;
+      }
     `;
     return [buttonCSS, mainCSS];
   }

package/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -7,17 +7,17 @@ const visualAdjustmentOptions = [{
   name: 'Adjust brightness',
   active: false,
   min: 0,
-  max: 150,
+  max: 200,
   step: 1,
-  value: 100,
+  value: 120,
 }, {
   id: 'contrast',
   name: 'Adjust contrast',
   active: false,
   min: 0,
-  max: 150,
+  max: 200,
   step: 1,
-  value: 100,
+  value: 120,
 }, {
   id: 'invert',
   name: 'Invert colors (dark mode)',

package/src/BookNavigator/visual-adjustments/visual-adjustments.js

@@ -1,7 +1,6 @@
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from "lit/directives/repeat.js";
-import { nothing } from "lit";
-import checkmarkIcon from '../assets/icon_checkmark.js';
 import "@internetarchive/icon-magnify-minus/icon-magnify-minus.js";
 import "@internetarchive/icon-magnify-plus/icon-magnify-plus.js";
 
@@ -99,6 +98,13 @@ export class IABookVisualAdjustments extends LitElement {
     this.options = updatedOptions;
     this.activeCount = this.activeOptions.length;
     this.emitOptionChangedEvent(checkedOption.id);
+    if (checkedOption.active && checkedOption.value !== undefined) {
+      // move focus to the range input
+      const rangeInput = this.shadowRoot.querySelector(`input[name="${checkedOption.id}_range"]`);
+      requestAnimationFrame(() => {
+        rangeInput?.focus();
+      });
+    }
   }
 
   setRangeValue(id, value) {
@@ -110,7 +116,8 @@ export class IABookVisualAdjustments extends LitElement {
   /* render */
   rangeSlider(option) {
     return html`
-      <div class=${`range${option.active ? " visible" : ""}`}>
+      <label class=${`range${option.active ? " visible" : ""}`}>
+        <span class="sr-only">${option.name}</span>
         <input
           type="range"
           name="${option.id}_range"
@@ -118,30 +125,30 @@ export class IABookVisualAdjustments extends LitElement {
           max=${option.max || 100}
           step=${option.step || 1}
           .value=${option.value}
+          aria-valuetext=${`${option.value}%`}
           @input=${(e) => this.setRangeValue(option.id, e.target.value)}
           @change=${() => this.emitOptionChangedEvent()}
         />
-        <p>${option.value}%</p>
-      </div>
+        <span aria-hidden="true">${option.value}%</span>
+      </label>
     `;
   }
 
   adjustmentCheckbox(option) {
-    const formID = `adjustment_${option.id}`;
-    return html`<li>
-      <label for="${formID}">
-        <span class="name">${option.name}</span>
-        <input
-          type="checkbox"
-          name="${formID}"
-          id="${formID}"
-          @change=${() => this.changeActiveStateFor(option.id)}
-          ?checked=${option.active}
-        />
-        <span class="icon"></span>
-      </label>
-      ${option.value !== undefined ? this.rangeSlider(option) : nothing}
-    </li>`;
+    return html`
+      <div
+        class="adjustment-option ${classMap({active: option.active, 'has-range': option.value !== undefined})}">
+        <label class="checkbox-label">
+          ${option.name}
+          <input
+            type="checkbox"
+            @change=${() => this.changeActiveStateFor(option.id)}
+            ?checked=${option.active}
+          />
+        </label>
+        ${option.value !== undefined ? this.rangeSlider(option) : nothing}
+      </div>
+    `;
   }
 
   get headerSection() {
@@ -158,11 +165,11 @@ export class IABookVisualAdjustments extends LitElement {
   get zoomControls() {
     return html`
       <h4>Adjust zoom</h4>
-      <button class="zoom_out" @click=${this.emitZoomOut} title="zoom out">
-        <ia-icon-magnify-minus></ia-icon-magnify-minus>
+      <button class="zoom_out" @click=${this.emitZoomOut} title="Zoom out" aria-label="Zoom out">
+        <ia-icon-magnify-minus aria-hidden="true" role="presentation"></ia-icon-magnify-minus>
       </button>
-      <button class="zoom_in" @click=${this.emitZoomIn} title="zoom in">
-        <ia-icon-magnify-plus></ia-icon-magnify-plus>
+      <button class="zoom_in" @click=${this.emitZoomIn} title="Zoom in" aria-label="Zoom in">
+        <ia-icon-magnify-plus aria-hidden="true" role="presentation"></ia-icon-magnify-plus>
       </button>
     `;
   }
@@ -171,9 +178,7 @@ export class IABookVisualAdjustments extends LitElement {
   render() {
     return html`
       ${this.headerSection}
-      <ul>
-        ${repeat(this.options, (option) => option.id, this.adjustmentCheckbox.bind(this))}
-      </ul>
+      ${repeat(this.options, (option) => option.id, this.adjustmentCheckbox.bind(this))}
       ${this.showZoomControls ? this.zoomControls : nothing}
     `;
   }
@@ -186,6 +191,7 @@ export class IABookVisualAdjustments extends LitElement {
       overflow-y: auto;
       font-size: 1.4rem;
       box-sizing: border-box;
+      padding: 10px 10px 0 0;
     }
 
     header {
@@ -207,49 +213,48 @@ export class IABookVisualAdjustments extends LitElement {
       font-style: italic;
     }
 
-    ul {
-      padding: 1rem 2rem 0 0;
-      list-style: none;
-      margin-top: 0;
+    .adjustment-option {
+      border: 2px solid transparent;
+      border-radius: 4px;
+      margin-bottom: 4px;
     }
-
-    [type="checkbox"] {
-      display: none;
+    .adjustment-option.has-range.active {
+      border: 2px solid rgba(255, 255, 255, 0.2);
     }
 
-    label {
+    .checkbox-label {
       display: flex;
       justify-content: space-between;
-      align-items: baseline;
+      align-items: center;
       font-size: 1.4rem;
       font-weight: bold;
-      line-height: 150%;
-      vertical-align: middle;
+      cursor: pointer;
+      padding: 6px 8px;
+      transition: background-color 0.2s;
+      border-radius: inherit;
     }
-
-    .icon {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      margin-left: .7rem;
-      border: 1px solid var(--primaryTextColor);
-      border-radius: 2px;
-      background: var(--activeButtonBg) 50% 50% no-repeat;
+    .checkbox-label:hover {
+      background-color: rgba(255, 255, 255, 0.1);
     }
-    :checked + .icon {
-      background-image: url('${checkmarkIcon}');
+    .adjustment-option.has-range.active > .checkbox-label {
+      border-radius: 4px 4px 0 0;
+    }
+
+    [type="checkbox"] {
+      transform: scale(1.5);
     }
 
     .range {
       display: none;
-      padding-top: .5rem;
+      padding: 10px;
+      align-items: center;
+      gap: 10px;
     }
     .range.visible {
       display: flex;
     }
-
-    .range p {
-      margin-left: 1rem;
+    .range input[type="range"] {
+      flex: 1;
     }
 
     h4 {
@@ -262,19 +267,32 @@ export class IABookVisualAdjustments extends LitElement {
       -webkit-appearance: none;
       appearance: none;
       border: none;
-      border-radius: 0;
       background: transparent;
-      outline: none;
       cursor: pointer;
       --iconFillColor: var(--primaryTextColor);
       --iconStrokeColor: var(--primaryTextColor);
       height: 4rem;
       width: 4rem;
+      transition: background-color 0.2s;
+      border-radius: 4px;
     }
 
-    button * {
-      display: inline-block;
-    }`;
+    button:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .sr-only {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0 0 0 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+`;
   }
 }
 customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);