diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts index a02d21bed..b36e5c598 100644 --- 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 { 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 index b2845004f..63e81b307 100644 --- 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 + ((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 index 060465067..20cbc5f8f 100644 --- 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/src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts b/src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts index ba37d1df1..a9b7c780e 100644 --- a/src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts +++ b/src/content-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 index 04853ab06..f7936d130 100644 --- 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 = $( - `${this.content.go}` + `` ); 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 index ec0fc4494..4cf58a0fd 100644 --- 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< ${this.content.next} ` ); - this._$zoomInButton = $('
'); - this._$zoomOutButton = $('
'); + this._$zoomInButton = $(''); + this._$zoomOutButton = $(''); // 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 index 8c2177bc3..e0424b4cd 100644 --- 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 = $( - '' + this.content.go + "" + '" ); 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 index 7f3963a04..7786a3819 100644 --- 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 extends BaseView { } this.$collapseButton = $( - '
' + '' ); this.$collapseButton.prop("title", this.content.collapse); this.$top.append(this.$collapseButton); @@ -51,7 +51,7 @@ export class BaseExpandPanel extends BaseView { this.$element.append(this.$closed); this.$expandButton = $( - '' + '' ); 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 index 0ba575fcf..270f4343b 100644 --- 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 {