Fix keyboard thumbnail activation (fixes #1068) (#1155)

UniversalViewer · Oct 23, 2024 · 0687aba · 0687aba
1 parent b024fbf
commit 0687aba
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts
@@ -44,10 +44,12 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
   $treeViewOptions: JQuery;
   $treeSelect: JQuery;
   $views: JQuery;
+  $keyElement: JQuery
   expandFullEnabled: boolean = false;
   galleryView: GalleryView;
   isThumbsViewOpen: boolean = false;
   isTreeViewOpen: boolean = false;
+  keyPress:boolean = false;
   treeData: TreeNode;
   treeSortType: TreeSortType = TreeSortType.NONE;
   treeView: TreeView;
@@ -505,10 +507,12 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
         onClick: (thumb: Thumb) => {
           this.extensionHost.publish(IIIFEvents.THUMB_SELECTED, thumb);
         },
+        onKeyDown: (thumb: Thumb) => {          
+            this.extensionHost.publish(IIIFEvents.THUMB_SELECTED, thumb);                                             
+        },        
       })
     );
   }
-
   createGalleryView(): void {
     this.galleryView = new GalleryView(this.$galleryView);
     this.galleryView.galleryData = this.getGalleryData();

diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ThumbsView.tsx b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ThumbsView.tsx
@@ -7,13 +7,15 @@ import cx from "classnames";
 const ThumbImage = ({
   first,
   onClick,
+  onKeyDown,
   paged,
   selected,
   thumb,
   viewingDirection,
 }: {
   first: boolean;
   onClick: (thumb: Thumb) => void;
+  onKeyDown: (thumb: Thumb) => void;
   paged: boolean;
   selected: boolean;
   thumb: Thumb;
@@ -28,6 +30,7 @@ const ThumbImage = ({
   return (
     <div
       onClick={() => onClick(thumb)}
+      onKeyDown= {(e) => {if(e.key === 'Enter'){onKeyDown(thumb)}}}
       className={cx("thumb", {
         first: first,
         placeholder: !thumb.uri,
@@ -64,12 +67,14 @@ const ThumbImage = ({
 
 const Thumbnails = ({
   onClick,
+  onKeyDown,
   paged,
   selected,
   thumbs,
   viewingDirection,
 }: {
   onClick: (thumb: Thumb) => void;
+  onKeyDown: (thumb: Thumb) => void;
   paged: boolean;
   selected: number[];
   thumbs: Thumb[];
@@ -122,6 +127,7 @@ const Thumbnails = ({
           <ThumbImage
             first={index === firstNonPagedIndex}
             onClick={onClick}
+            onKeyDown={onKeyDown}
             paged={paged}
             selected={selected.includes(index)}
             thumb={thumb}