Continued accessibility improvements to media pages

thexerteproject · Mar 10, 2016 · 8f96c8b · 8f96c8b
1 parent d261041
commit 8f96c8b
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 58 deletions.
diff --git a/languages/engine_en-GB.xml b/languages/engine_en-GB.xml
@@ -157,6 +157,8 @@
 	  <tabNav description="This page contains a tabbed panel where the selection of a tab changes the information presented. To select a tab: Click Enter twice (Jaws) or click Shift-Enter (NVDA)."/>
 	  <accNav selected="selected"/>
 	  <slideshow description="This page contains a slideshow where clicking the next and previous buttons changes the information presented."/>
+	  <audioSlideshow description="This page displays content in synch with an audio files. New content is added to the page as the audio plays."/>
+	  <videoSynch description="This page displays content in synch with a video. New content is added to the page as the video plays."/>
   </screenReaderInfo>
 
 </language>
diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/css/themeStyles.css b/modules/xerte/parent_templates/Nottingham/common_html5/css/themeStyles.css
@@ -70,6 +70,14 @@ h3 {
 	margin:		0px;
 }
 
+.noFocus {
+	border: 2px solid transparent;
+}
+
+.focusBorder {
+	border-color: orange;
+}
+
 /* see pngs in modules/xerte/parent_templates/Nottingham/common_html5 to see how replacement images for buttons should be made (with 4 states in one image file) */
 /* the easiest way is to keep button dimensions the same (42 x 40px) so background-positions below don't need adjusting */
 

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/audioSlideshow.html b/modules/xerte/parent_templates/Nottingham/models_html5/audioSlideshow.html
@@ -21,10 +21,13 @@
 	// pageChanged & sizeChanged functions are needed in every model file
 	// other functions for model should also be in here to avoid conflicts
 	var audioSlideshow = new function() {
-		var loaded;
+		var loaded,
+			$pageContents;
 
 		// function called every time the page is viewed after it has initially loaded
 		this.pageChanged = function() {
+			$pageContents = $("#pageContents");
+
 			$("#infoHolder").scrollTop(0);
 			$("#infoHolder .slide")
 				.hide()
@@ -48,26 +51,27 @@
 
 			} else {
 				// not the 1st load of the page - scale images to new size and reset slides and audio
+				$pageContents.data("mediaElement").setCurrentTime(0);
+				$pageContents.data("count", $pageContents.data("count") + 1);
+
 				$("#infoHolder .slide")
 					.hide()
 					.filter(function() {return $(this).data("synch") == "0";}).show();
 
-				$("#infoHolder").scrollTop(0);
-
-				var $pageContents = $("#pageContents");
-				$pageContents.data("count", $pageContents.data("count") + 1);
-
 				this.scaleImages();
 				this.loadAudio();
+
+				$("#infoHolder").scrollTop(0);
 			}
 		}
 
 		this.init = function() {
-			$("#pageContents").data("count", 0);
+			$pageContents = $("#pageContents");
+			$pageContents.data("count", 0);
 
 			var panelWidth = x_currentPageXML.getAttribute("panelWidth");
 			if (panelWidth == "Full") {
-				$("#pageContents .panel").appendTo($("#pageContents"));
+				$("#pageContents .panel").appendTo($pageContents);
 				$("#pageContents .splitScreen").remove();
 			} else {
 				$("#textHolder").html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));
@@ -153,8 +157,6 @@
 
 		// function scales image on visible slide - have to do them individually after slide change as I can't get dimensions of images on hidden slides
 		this.scaleImages = function() {
-			var $pageContents = $("#pageContents");
-
 			// has img already been scaled to fit this size screen?
 			if ($pageContents.data("count") != $("#infoHolder .pageImg img:visible").data("count")) {
 				var $img = $("#infoHolder .pageImg img:visible"),
@@ -190,6 +192,8 @@
 
 		// function called from mediaPlayer.js when audio player has been set up
 		this.mediaFunct = function(mediaElement) {
+			$pageContents.data("mediaElement", mediaElement);
+
 			var $slides = $("#infoHolder .slide");
 			mediaElement.addEventListener("timeupdate", function(e) {
 				var currentTime = mediaElement.currentTime,
@@ -251,7 +255,7 @@
 
 	<div class="splitScreen">
 
-		<div id="textHolder" class="left" tabindex="1"></div>
+		<div id="textHolder" class="left"></div>
 
 		<div class="right">
 			<div class="panel">

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/imageViewer.html b/modules/xerte/parent_templates/Nottingham/models_html5/imageViewer.html
@@ -87,10 +87,12 @@
 					$("#pageContents").prepend($textHolder);
 				}
 				$("#imgHolder").addClass("centerAlign");
-				$pageImg.css({
-					"left"	:0,
-					"top"	:0
-				});
+				$pageImg
+					.addClass("noFocus")
+					.css({
+						"left"	:0,
+						"top"	:0
+					});
 			} else if (textAlign == "Right") {
 				$panel.addClass("x_floatLeft");
 			} else {
@@ -137,11 +139,11 @@
 						.draggable({disabled:	false})
 						.focusin(function() {
 							if ($pageImg.hasClass("move")) {
-								$cropImg.addClass("focus");
+								$cropImg.addClass("focusBorder");
 							}
 						})
 						.focusout(function() {
-							$cropImg.removeClass("focus");
+							$cropImg.removeClass("focusBorder");
 						});
 
 					imageViewer.calculateDragArea();
@@ -208,7 +210,7 @@
 					$imgCover.show();
 					$("#pageContents").off("keydown");
 
-					$cropImg.removeClass("focus");
+					$cropImg.removeClass("focusBorder");
 				}
 			);
 
@@ -567,11 +569,6 @@
 	#cropImg {
 		position:	relative;
 		overflow:	hidden;
-		border:	2px solid transparent;
-	}
-
-	#cropImg.focus {
-		border-color:	orange;
 	}
 
 	#pageImg {

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/transcriptReader.html b/modules/xerte/parent_templates/Nottingham/models_html5/transcriptReader.html
@@ -42,10 +42,16 @@
 				$infoHolder.height($panel.height() - x_audioBarH);
 			}
 
+			if ($pageContents.data("mediaElement") != undefined) {
+				$pageContents.data("mediaElement").setCurrentTime(0);
+			}
+
 			$infoHolder.scrollTop(0);
-			$infoHolder.find("div").each(function() {
+			$infoHolder.children("div").each(function() {
 				var $caption = $(this);
-				$caption.data("scrollPos", $caption.position().top);
+				$caption
+					.data("scrollPos", $caption.position().top)
+					.removeClass("highlight");
 			});
 			this.loadAudio();
 		}
@@ -110,28 +116,43 @@
 		}
 
 		this.createCaptions = function(captionInfo) {
-			var	captions = new Array();
+			var	captions = new Array(),
+				tabIndex = 1;
 
 			$(captionInfo).each(function() {
 				var	$this = $(this);
 
-				var $caption = $("<div>" + x_addLineBreaks($this.attr("text")) + "</div>")
+				var $caption = $('<div tabindex="' + tabIndex + '" class="noFocus">' + x_addLineBreaks($this.attr("text")) + '</div>')
 					.data("synch", $this.attr("synch"));
 
 				$infoHolder.append($caption);
 				captions.push($caption[0]);
+				tabIndex++;
 			});
 
 			$pageContents.data("captions", captions);
 
-			$(captions).click(function() {
-				$infoHolder.find(".highlight").removeClass("highlight");
-
-				var $this = $(this);
-				$this.addClass("highlight");
-				$infoHolder.scrollTop($this.data("scrollPos") - parseInt($("#pageContents .panel").css("padding-top")) - 1);
-				$pageContents.data("mediaElement").setCurrentTime($this.data("synch"));
-			});
+			$(captions)
+				.click(function() {
+					$infoHolder.find(".highlight").removeClass("highlight");
+
+					var $this = $(this);
+					$this.addClass("highlight");
+					$infoHolder.scrollTop($this.data("scrollPos") - parseInt($("#pageContents .panel").css("padding-top")) - 1);
+					$pageContents.data("mediaElement").setCurrentTime($this.data("synch") + 0.1);
+				})
+				.focusin(function() {
+					$(this).addClass("focusBorder");
+				})
+				.focusout(function() {
+					$(this).removeClass("focusBorder");
+				})
+				.keypress(function(e) {
+					var charCode = e.charCode || e.keyCode;
+					if (charCode == 32) {
+						$(this).trigger("click");
+					}
+				});
 
 			setTimeout(function() { // audio won't load properly without a delay here
 				transcriptReader.sizeChanged();
@@ -180,11 +201,11 @@
 <style type="text/css">
 
 	#infoHolder {
-		overflow:	auto;
+		overflow: auto;
 	}
 
 	#infoHolder div {
-		padding:		10px;
+		padding: 10px;
 	}
 
 </style>
@@ -193,7 +214,7 @@
 
 	<div class="splitScreen">
 
-		<div id="textHolder" class="left" tabindex="1">
+		<div id="textHolder" class="left">
 
 		</div>