Fixes for firefox

ucfopen · Aug 2, 2023 · 3651f03 · 3651f03
1 parent 725947f
commit 3651f03
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/src/controllers/ctl-player.js b/src/controllers/ctl-player.js
@@ -67,6 +67,8 @@ export const onMateriaStart = ($scope, $sce, instance, qset, version) => {
 	$scope.choices = getAllAnswerChoices($sce, _qset)
 	$scope.questionCount = _qset.items.length
 
+	$scope.questionsRemainingText = ($scope.questionCount - $scope.question.current - 1) + " questions remaining. Now on question " + ($scope.question.current + 2) + " of " + $scope.questionCount + ": " + _qset.items[$scope.question.current + 1].questions[0].text
+
 	showNextQuestion($scope)
 }
 
@@ -80,8 +82,6 @@ export const showNextQuestion = $scope => {
 		$scope.question.selected = false
 		$scope.question.transition = false
 		$scope.selectedChoice = -1
-
-		document.getElementById('questions-remaining').focus()
 	} else {
 		endGame($scope)
 	}
@@ -145,6 +145,10 @@ export const checkChoice = ($scope, value) => {
 }
 
 export const nextClicked = ($scope, $timeout) => {
+	if ($scope.question.current + 1 < $scope.questionCount) {
+		$scope.questionsRemainingText = ($scope.questionCount - $scope.question.current - 1) + " questions remaining. Now on question " + ($scope.question.current + 2) + " of " + $scope.questionCount + ": " + _qset.items[$scope.question.current + 1].questions[0].text
+	}
+
 	$scope.gameState.showNext = false
 	$scope.question.correct = ['', '']
 	$scope.answers[0].options.feedback = ''
@@ -153,9 +157,6 @@ export const nextClicked = ($scope, $timeout) => {
 	$scope.question.transition = true
 	$scope.hands.thisRaised = false
 	$scope.hands.thatRaised = false
-	$scope.reachedFocusEnd = true
-
-	if (($scope.question.current + 1) < $scope.questionCount) assistiveAlert($scope, "Now on question " + ($scope.question.current + 2) + " of " + $scope.questionCount + ": " + _qset.items[$scope.question.current + 1].questions[0].text)
 
 	$timeout(showNextQuestion.bind(null, $scope), 1200)
 }
@@ -189,6 +190,7 @@ export const ControllerThisOrThatPlayer = function($scope, $timeout, $sce) {
 	}
 
 	$scope.questionCount = 0
+	$scope.questionsRemainingText = ''
 
 	// the stage hands
 	$scope.hands = {
@@ -214,7 +216,7 @@ export const ControllerThisOrThatPlayer = function($scope, $timeout, $sce) {
 	$scope.resetFocus = false;
 
 	$scope.pressedQOnce = false
-	$scope.pressedH = false
+	$scope.prevFocus = null
 	$scope.assistiveAlertText = ""
 
 	// Opens or closes the image lightbox
@@ -283,9 +285,21 @@ export const ControllerThisOrThatPlayer = function($scope, $timeout, $sce) {
 					$scope.pressedQOnce = false
 				}
 			} else if (event.key == 'H' || event.key == 'h') {
+				if (!$scope.instructionsOpen) {
+					$scope.prevFocus = event.target
+				} else {
+					if ($scope.prevFocus) $scope.prevFocus.focus()
+				}
 				toggleInstructions($scope);
 			}
-		} else if (event.key == 'H' || event.key == 'h') toggleInstructions($scope);
+		} else if (event.key == 'H' || event.key == 'h') {
+			if (!$scope.instructionsOpen) {
+				$scope.prevFocus = event.target
+			} else {
+				if ($scope.prevFocus) $scope.prevFocus.focus()
+			}
+			toggleInstructions($scope);
+		}
 	}
 
 	$scope.getAdjustedTextSize = (text) => {

diff --git a/src/player.html b/src/player.html
@@ -86,7 +86,7 @@ <h1 id="splashText" aria-label="Welcome to {{gameState.splashText}}"aria-hidden=
 				<button id="ingame-instructions-btn" title="Help"
 				ng-click="toggleInstructions()" ng-class="{'drop': gameState.ingame}" aria-label="Keyboard controls: Press A to select the first choice. Press D to select the second choice. Then, click to lock in your answer. Press Q to hear the question again. Press H to open the instructions. You may also navigate using your screen reader's dedicated key bindings.">?</button>
 
-				<div id="questions-remaining" title="Questions Remaining" ng-mouseover="showBack = true" ng-mouseout="showBack = false" ng-class="{'drop': gameState.ingame, 'front': !showBack, 'back': showBack}" aria-label="{{questionCount - question.current + ' questions remaining. On question ' + (question.current + 1) + ' of ' + questionCount + ': ' + title}}" role="status" tabindex="0">
+				<div id="questions-remaining" title="Questions Remaining" focus-me="question.transition == true" ng-mouseover="showBack = true" ng-mouseout="showBack = false" ng-class="{'drop': gameState.ingame, 'front': !showBack, 'back': showBack}" aria-label="{{questionsRemainingText}}" role="status" tabindex="0">
 					<div id="questions-remaining-inner" aria-hidden="true">
 						<p id="remaining-front">{{question.current + 1}}</p>
 						<p id="remaining-back">of {{questionCount}}</p>
@@ -280,7 +280,7 @@ <h1 id="question" ng-bind-html="title"></h1>
 						ng-class="{'raised': hands.thatRaised || question.choice == 1, 'correct': question.correct[1] == 'Correct!', 'incorrect': question.correct[1] == 'Incorrect'}"></div>
 				</div>
 
-				<div id="next-container" ng-class="{'raised': gameState.showNext}" aria-hidden="{{!gameState.showNext || lightboxTarget >= 0}}">
+				<div id="next-container" ng-class="{'raised': gameState.showNext}" aria-hidden="{{(!gameState.showNext && question.transition == false) || lightboxTarget >= 0}}">
 					<div class="background-stand" aria-hidden="true"></div>
 					<button class="btn"
 						id="next"