Added aria-describedby support for images to Lightbox.

wet-boew · Apr 1, 2013 · 79881ad · 79881ad
1 parent 3cd0e1d
commit 79881ad
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/src/js/sass/_pe-ap-ns.scss b/src/js/sass/_pe-ap-ns.scss
@@ -2,22 +2,25 @@
  * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
  * wet-boew.github.com/wet-boew/License-eng.txt / wet-boew.github.com/wet-boew/Licence-fra.txt
  */
+%pe-ap-ns-display-block {
+	display: block;
+}
 .no-js {
 	.lb-inline, .lb-hidden-gallery a {
-		display: block;
+		@extend %pe-ap-ns-display-block;
 		visibility: visible;
 	}
 	.tabs-panel {
 		> {
 			div {
-				display: block;
+				@extend %pe-ap-ns-display-block;
 			}
 		}
 	}
 	details {
 		> {
 			* {
-				display: block;
+				@extend %pe-ap-ns-display-block;
 			}
 		}
 	}

diff --git a/src/js/sass/includes/_lightbox.scss b/src/js/sass/includes/_lightbox.scss
@@ -35,6 +35,10 @@
 	display: block;
 }
 
+%wb-lightbox-visibility-hidden {
+	visibility: hidden;
+}
+
 %wb-lightbox-visibility-visible {
 	visibility: visible;
 }
@@ -276,13 +280,13 @@
 
 .lb-inline {
 	@extend %wb-lightbox-display-none;
-	@extend %wb-lightbox-visibility-visible;
+	@extend %wb-lightbox-visibility-hidden;
 }
 
 .lb-hidden-gallery {
 	a {
 		@extend %wb-lightbox-display-none;
-		@extend %wb-lightbox-visibility-visible;
+		@extend %wb-lightbox-visibility-hidden;
 	}
 	li {
 		&:first-child {

diff --git a/src/js/workers/lightbox.js b/src/js/workers/lightbox.js
@@ -47,14 +47,33 @@
 				onComplete : function () {
 					var $lbTitle = $lbContent.find('#cboxTitle'),
 						$lbCurrent = $lbContent.find('#cboxCurrent'),
-						alt_text = $lbTitle.text() + ($lbCurrent.length !== 0 ? ' - ' + $lbCurrent.text() : '');
-
+						currentText = $lbCurrent.text(),
+						$origImg,
+						$currImg,
+						describedBy,
+						longdesc,
+						alt_text = $lbTitle.text() + (currentText.length !== 0 ? ' - ' + currentText : '');
+
 					$lbLoadedContent = $lbContent.find('#cboxLoadedContent').attr('tabindex', '0');
+					$currImg = $lbLoadedContent.children('.cboxPhoto');
 					$lbLoadedContent.attr('aria-label', alt_text);
-					if ($lbLoadedContent.children('.cboxPhoto').length === 0) {
+					if ($currImg.length === 0) {
 						$lbLoadedContent.attr('role', 'document');
 					} else {
-						$lbLoadedContent.children().attr('alt', alt_text);
+						$currImg.attr('alt', alt_text);
+						$origImg = $.colorbox.element().find('img');
+
+						// Bring over some of the original image attributes
+						describedBy = $origImg.attr('aria-describedby');
+						longdesc = $origImg.attr('longdesc');
+						if (typeof describedBy !== 'undefined') {
+							$lbLoadedContent.attr('aria-describedby', describedBy);
+							$currImg.attr('aria-describedby', describedBy);
+						}
+						if (typeof longdesc !== 'undefined') {
+							$lbLoadedContent.attr('longdesc', longdesc);
+							$currImg.attr('longdesc', longdesc);
+						}
 					}
 					pe.focus($lbLoadedContent);
 					open = true;