Merge pull request #4 from kunai-consulting/COD-1399

COD-1399 Next and previous buttons are not keyboard accessible
kunai-consulting · Nov 22, 2022 · 5fc64fb · 5fc64fb
2 parents 7202da2 + 611a51c
commit 5fc64fb
Show file tree

Hide file tree

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

diff --git a/src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap b/src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap
@@ -62,6 +62,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
         aria-hidden="true"
       />
     }
+    aria-labelledby="dialogName"
     ariaHideApp={true}
     bodyOpenClassName="ReactModal__Body--open"
     closeTimeoutMS={0}
@@ -95,6 +96,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
         },
         "overlay": Object {
           "backgroundColor": "transparent",
+          "display": "block",
           "zIndex": 1000,
         },
       }
@@ -107,7 +109,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
         >
           <div
             class="ReactModal__Overlay"
-            style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: transparent; z-index: 1000;"
+            style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: transparent; z-index: 1000; display: block;"
           >
             <div
               aria-label="Lightbox"
@@ -123,7 +125,6 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
                 tabindex="-1"
               >
                 <div
-                  aria-hidden="true"
                   class="ril-inner ril__inner"
                 >
                   <div
@@ -181,6 +182,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
                 >
                   <div
                     class="ril_title"
+                    id="dialogName"
                   >
                     <div
                       class="ril_status"
@@ -222,6 +224,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
             aria-hidden="true"
           />
         }
+        aria-labelledby="dialogName"
         ariaHideApp={true}
         bodyOpenClassName="ReactModal__Body--open"
         closeTimeoutMS={0}
@@ -281,6 +284,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
             },
             "overlay": Object {
               "backgroundColor": "transparent",
+              "display": "block",
               "zIndex": 1000,
             },
           }
@@ -294,6 +298,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
             Object {
               "backgroundColor": "transparent",
               "bottom": 0,
+              "display": "block",
               "left": 0,
               "position": "fixed",
               "right": 0,
@@ -349,7 +354,6 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
               tabIndex="-1"
             >
               <div
-                aria-hidden="true"
                 className="ril-inner ril__inner"
                 onClick={[Function]}
               >
@@ -425,6 +429,7 @@ exports[`Snapshot Testing Lightbox renders properly" 1`] = `
               >
                 <div
                   className="ril_title"
+                  id="dialogName"
                 >
                   <div
                     className="ril_status"

diff --git a/src/react-image-lightbox.js b/src/react-image-lightbox.js
@@ -1436,6 +1436,7 @@ class ReactImageLightbox extends Component {
       overlay: {
         zIndex: 1000,
         backgroundColor: 'transparent',
+        display: 'block',
         ...reactModalStyle.overlay, // Allow style overrides via props
       },
       content: {
@@ -1476,6 +1477,8 @@ class ReactImageLightbox extends Component {
             ? global.window.document.body
             : undefined
         }
+        role="dialog"
+        aria-labelledby="dialogName"
         {...reactModalProps}
       >
         <div // eslint-disable-line jsx-a11y/no-static-element-interactions
@@ -1502,7 +1505,6 @@ class ReactImageLightbox extends Component {
             // Image holder
             className="ril-inner ril__inner"
             onClick={clickOutsideToClose ? this.closeIfClickInner : undefined}
-            aria-hidden="true"
           >
             {images}
           </div>
@@ -1515,7 +1517,7 @@ class ReactImageLightbox extends Component {
                 totalImageCount={images.length + 1}
               />
             ) : (
-              <div className="ril_title">
+              <div className="ril_title" id="dialogName">
                 {imageTitle}
                 <div className="ril_status">
                   Image {imageIndex} of {images.length + 1}