Merge pull request #8 from kunai-consulting/COD-1944

COD-1944 - Add screenreader capabilities to thumbnails in Lightbox
kunai-consulting · Aug 18, 2023 · a5632f1 · a5632f1
2 parents b7ef5fa + 2c2a521
commit a5632f1
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kunai-consulting/fork-react-image-lightbox",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "A lightbox component for React.js",
   "scripts": {
     "build": "rollup -c",

diff --git a/src/react-image-lightbox.js b/src/react-image-lightbox.js
@@ -1633,25 +1633,38 @@ class ReactImageLightbox extends Component {
                     />
                   ))}
                 {this.props.thumbnailImages.map((img, index) => (
-                  <img
-                    className={`thumbNails${
-                      imageIndex === index + 1 ? 'active' : ''
-                    }`}
+                  <button
                     style={{
                       margin: '14px',
-                      padding: '2px',
+                      paddingTop: '3px',
+                      paddingRight: '3px',
+                      paddingBottom: '0px',
+                      paddingLeft: '3px',
                       borderRadius: '4px',
                     }}
-                    src={img}
-                    key={img}
-                    role="presentation"
-                    alt={img.caption}
+                    type="button"
+                    aria-label="view fullsize image for this thumbnail"
+                    className={`thumbNails${
+                      imageIndex === index + 1 ? 'active' : ''
+                    }`}
                     onClick={() => {
                       return !this.isAnimating()
                         ? this.requestMoveIndex({ index })
                         : undefined;
                     }}
-                  />
+                    onKeyPress={() => {
+                      return !this.isAnimating()
+                        ? this.requestMoveIndex({ index })
+                        : undefined;
+                    }}
+                  >
+                    <img
+                      src={img}
+                      key={img}
+                      role="presentation"
+                      alt={img.caption}
+                    />
+                  </button>
                 ))}
 
                 {nextSrc &&