Add keyboard focus support for thumbnails. (#20)

IIIF-Commons · Oct 24, 2024 · 099b6f9 · 099b6f9
1 parent ba1d5c5
commit 099b6f9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/css/iiif-gallery-component.less b/src/css/iiif-gallery-component.less
@@ -86,6 +86,11 @@
 
             .thumb {
 
+                background-color: inherit;
+                border: 0;
+                padding: 0;
+                text-align: left;
+
                 margin: 0 7px 7px 0;
 
                 .wrap{

diff --git a/src/index.ts b/src/index.ts
@@ -180,18 +180,18 @@ export class GalleryComponent extends BaseComponent {
     $.templates({
       galleryThumbsTemplate:
         '\
-				<div class="{{:~galleryThumbClassName()}}" data-src="{{>uri}}" data-index="{{>index}}" data-visible="{{>visible}}" data-width="{{>width}}" data-height="{{>height}}" data-initialwidth="{{>initialWidth}}" data-initialheight="{{>initialHeight}}">\
+				<button class="{{:~galleryThumbClassName()}}" data-src="{{>uri}}" data-index="{{>index}}" data-visible="{{>visible}}" data-width="{{>width}}" data-height="{{>height}}" data-initialwidth="{{>initialWidth}}" data-initialheight="{{>initialHeight}}">\
 						<div class="wrap" style="width:{{>initialWidth}}px; height:{{>initialHeight}}px" data-link="class{merge:multiSelected toggle=\'multiSelected\'}">\
 						{^{if multiSelectEnabled}}\
-								<input id="thumb-checkbox-{{>id}}" type="checkbox" data-link="checked{:multiSelected ? \'checked\' : \'\'}" class="multiSelect" />\
+								<input id="thumb-checkbox-{{>id}}" tabindex="-1" type="checkbox" data-link="checked{:multiSelected ? \'checked\' : \'\'}" class="multiSelect" />\
 						{{/if}}\
 						</div>\
 						<div class="info">\
 								<span class="index" style="width:{{>initialWidth}}px">{{:#index + 1}}</span>\
 								<span class="label" style="width:{{>initialWidth}}px" title="{{>label}}">{{>label}}&nbsp;</span>\
 								<span class="searchResults" title="{{:~galleryThumbSearchResultsTitle()}}">{{>data.searchResults}}</span>\
 						</div>\
-				</div>',
+				</button>',
     });
 
     const that = this;