COD-1944

Lightbox: nest thumbnail img inside button, add aria label to button, add onKeyPress to button, fix padding

Author: dustin-kunai

package-lock.json

@@ -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 &&