Make keyboard activation consistent (#1164)

UniversalViewer · Oct 28, 2024 · 8d4ee00 · 8d4ee00
1 parent a15f38f
commit 8d4ee00
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 21 deletions.
diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts
@@ -213,11 +213,11 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
 
     this.onAccessibleClick(this.$treeButton, () => {
       this.openTreeView();
-    });
+    }, true, true);
 
     this.onAccessibleClick(this.$thumbsButton, () => {
       this.openThumbsView();
-    });
+    }, true, true);
 
     this.setTitle(this.content.title);
 

diff --git a/src/content-handlers/iiif/modules/uv-dialogues-module/AdjustImageDialogue.ts b/src/content-handlers/iiif/modules/uv-dialogues-module/AdjustImageDialogue.ts
@@ -147,6 +147,9 @@ export class AdjustImageDialogue extends Dialogue<
         }
         this.shell.$overlays.css('background', '');
         super.close();
+
+        // put focus back on the button when the dialogue is closed
+        (<OpenSeadragonExtension>(this.extension)).centerPanel.$adjustImageButton.focus();
     }
 
     resize(): void {

diff --git a/src/content-handlers/iiif/modules/uv-dialogues-module/ShareDialogue.ts b/src/content-handlers/iiif/modules/uv-dialogues-module/ShareDialogue.ts
@@ -219,11 +219,11 @@ export class ShareDialogue<
 
     this.onAccessibleClick(this.$shareButton, () => {
       this.openShareView();
-    });
+    }, true, true);
 
     this.onAccessibleClick(this.$embedButton, () => {
       this.openEmbedView();
-    });
+    }, true, true);
 
     this.$customSizeDropDown.change(() => {
       this.update();

diff --git a/...tent-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts b/...tent-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts
@@ -367,24 +367,40 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
     this.$zoomInButton.prop("aria-label", this.content.zoomIn);
     this.$zoomInButton.addClass("zoomIn viewportNavButton");
 
+    this.onAccessibleClick(this.$zoomInButton, () => {
+      this.zoomIn();
+    });
+
     this.$zoomOutButton = this.$viewer.find('div[title="Zoom out"]');
     this.$zoomOutButton.attr("tabindex", 0);
     this.$zoomOutButton.prop("title", this.content.zoomOut);
     this.$zoomOutButton.prop("aria-label", this.content.zoomOut);
     this.$zoomOutButton.addClass("zoomOut viewportNavButton");
 
+    this.onAccessibleClick(this.$zoomOutButton, () => {
+      this.zoomOut();
+    });
+
     this.$goHomeButton = this.$viewer.find('div[title="Go home"]');
     this.$goHomeButton.attr("tabindex", 0);
     this.$goHomeButton.prop("title", this.content.goHome);
     this.$goHomeButton.prop("aria-label", this.content.goHome);
     this.$goHomeButton.addClass("goHome viewportNavButton");
 
+    this.onAccessibleClick(this.$goHomeButton, () => {
+      this.goHome();
+    });
+
     this.$rotateButton = this.$viewer.find('div[title="Rotate right"]');
     this.$rotateButton.attr("tabindex", 0);
     this.$rotateButton.prop("title", this.content.rotateRight);
     this.$rotateButton.prop("aria-label", this.content.rotateRight);
     this.$rotateButton.addClass("rotate viewportNavButton");
 
+    this.onAccessibleClick(this.$rotateButton, () => {
+      this.rotateRight();
+    });
+
     if (this.showAdjustImageButton) {
       this.$adjustImageButton = this.$rotateButton.clone();
       this.$adjustImageButton.prop('title', this.content.adjustImage);
@@ -393,6 +409,10 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
         this.extensionHost.publish(IIIFEvents.SHOW_ADJUSTIMAGE_DIALOGUE);
       });
       this.$adjustImageButton.insertAfter(this.$rotateButton);
+
+      this.onAccessibleClick(this.$adjustImageButton, () => {
+        this.extensionHost.publish(IIIFEvents.SHOW_ADJUSTIMAGE_DIALOGUE);
+      });
     }
 
     this.$viewportNavButtonsContainer = this.$viewer.find(

diff --git a/src/content-handlers/iiif/modules/uv-pagingheaderpanel-module/PagingHeaderPanel.ts b/src/content-handlers/iiif/modules/uv-pagingheaderpanel-module/PagingHeaderPanel.ts
@@ -217,7 +217,7 @@ export class PagingHeaderPanel extends HeaderPanel<
     this.$search.append(this.$total);
 
     this.$searchButton = $(
-      `<a class="go btn btn-primary" tabindex="0">${this.content.go}</a>`
+      `<button class="go btn btn-primary" tabindex="0">${this.content.go}</button>`
     );
     this.$search.append(this.$searchButton);
 
@@ -407,7 +407,7 @@ export class PagingHeaderPanel extends HeaderPanel<
       $(this).select();
     });
 
-    this.$searchButton.onPressed(() => {
+    this.onAccessibleClick(this.$searchButton, () => {
       if (this.options.autoCompleteBoxEnabled) {
         this.search(this.$autoCompleteBox.val());
       } else {

diff --git a/src/content-handlers/iiif/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts b/src/content-handlers/iiif/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts
@@ -64,8 +64,8 @@ export class PDFCenterPanel extends CenterPanel<
         <span class="sr-only">${this.content.next}</span>
       </button>`
   );
-    this._$zoomInButton = $('<div class="btn zoomIn" tabindex="0"></div>');
-    this._$zoomOutButton = $('<div class="btn zoomOut" tabindex="0"></div>');
+    this._$zoomInButton = $('<button class="btn zoomIn" tabindex="0"></button>');
+    this._$zoomOutButton = $('<button class="btn zoomOut" tabindex="0"></button>');
 
     // Only attach PDF controls if we're using PDF.js; they have no meaning in
     // PDFObject. However, we still create the objects above so that references
@@ -185,9 +185,7 @@ export class PDFCenterPanel extends CenterPanel<
 
     this.disableNextButton();
 
-    this._$zoomInButton.onPressed((e: any) => {
-      e.preventDefault();
-
+    this.onAccessibleClick(this._$zoomInButton, () => {
       const newScale: number = this._scale + 0.5;
 
       if (newScale < this._maxScale) {
@@ -199,9 +197,7 @@ export class PDFCenterPanel extends CenterPanel<
       this._render(this._pageIndex);
     });
 
-    this._$zoomOutButton.onPressed((e: any) => {
-      e.preventDefault();
-
+    this.onAccessibleClick(this._$zoomOutButton, () => {
       const newScale: number = this._scale - 0.5;
 
       if (newScale > this._minScale) {

diff --git a/src/content-handlers/iiif/modules/uv-pdfheaderpanel-module/PDFHeaderPanel.ts b/src/content-handlers/iiif/modules/uv-pdfheaderpanel-module/PDFHeaderPanel.ts
@@ -86,7 +86,7 @@ export class PDFHeaderPanel extends HeaderPanel<
     this.$search.append(this.$total);
 
     this.$searchButton = $(
-      '<a class="go btn btn-primary" tabindex="0">' + this.content.go + "</a>"
+      '<button class="go btn btn-primary" tabindex="0">' + this.content.go + "</button>"
     );
     this.$search.append(this.$searchButton);
     this.$searchButton.disable();
@@ -138,7 +138,7 @@ export class PDFHeaderPanel extends HeaderPanel<
       $(this).select();
     });
 
-    this.$searchButton.onPressed(() => {
+    this.onAccessibleClick(this.$searchButton, () => {
       this.search(this.$searchText.val());
     });
   }

diff --git a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts
@@ -42,7 +42,7 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
     }
 
     this.$collapseButton = $(
-      '<div role="button" class="collapseButton" tabindex="0"></div>'
+      '<button role="button" class="collapseButton" tabindex="0"></button>'
     );
     this.$collapseButton.prop("title", this.content.collapse);
     this.$top.append(this.$collapseButton);
@@ -51,7 +51,7 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
     this.$element.append(this.$closed);
 
     this.$expandButton = $(
-      '<a role="button" class="expandButton" tabindex="0"></a>'
+      '<button role="button" class="expandButton" tabindex="0"></button>'
     );
     this.$expandButton.prop("title", this.content.expand);
 

diff --git a/src/content-handlers/iiif/modules/uv-shared-module/Panel.ts b/src/content-handlers/iiif/modules/uv-shared-module/Panel.ts
@@ -36,18 +36,30 @@ export class Panel {
   onAccessibleClick(
     el: JQuery,
     callback: (e: JQueryEventObject) => void,
-    withClick = true
+    withClick = true,
+    treatAsButton = false
   ) {
+
     if (withClick) {
       el.on("click", (e) => {
         callback(e);
       });
     }
-    el.on("keyup", (e) => {
-      if (e.keyCode === 32) {
+
+    el.on("keydown", (e) => {
+
+      // by passing treatAsButton  as true this will become false
+      // and so an anchor won't be excluded from Space presses
+      let isAnchor = e.target.nodeName === 'A' && !treatAsButton;
+
+      // 13 = Enter, 32 = Space
+      if ((e.which === 32 && !isAnchor) || e.which === 13) {
+        // stops space scrolling the page
+        e.preventDefault();
         callback(e);
       }
     });
+
   }
 
   resize(): void {