Accessibility edits

.github/workflows/test.yml

@@ -5,7 +5,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.3.1, 12.x]
+        node-version: [12.3.1]
 
     steps:
     - name: Checkout code

src/audioControls.html

@@ -1,8 +1,10 @@
 <div class='audio-controls'>
-	<span class='play-btn'
+	<button class='play-btn'
+		aria-label="Play audio clue."
 		ng-class="{'paused' : audio.paused}"
-		ng-click='$event.stopPropagation(); play()'>
-	</span>
+		ng-click='$event.stopPropagation(); play()'
+		ng-keypress="$event.stopPropagation()">
+	</button>
 	<span class='time'>
 		<span class='seek-bar'>
 			<input type='range'

src/controllers/player.coffee

@@ -18,14 +18,26 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 	$scope.totalItems = 0
 	$scope.setCreated = false
 	$scope.helpVisible = false
+	$scope.completePerPage = []
 
 	$scope.unfinishedPagesBefore = false
 	$scope.unfinishedPagesAfter = false
+	helpModal = document.getElementById("instructions");
+	helpModal.inert = true;
+
+
+
+	_assistiveAlert = (msg) ->
+		alertEl = document.getElementById('assistive-alert')
+		if alertEl then alertEl.innerHTML = msg
+
 
 	$scope.qset = {}
 
 	$scope.circumference = Math.PI * 80
 
+	_boardElement = document.getElementById('gameboard')
+
 	# these are used for animation
 	$scope.pageAnimate = false
 	$scope.pageNext = false
@@ -42,18 +54,22 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 	CIRCLE_OFFSET = 40
 	PROGRESS_BAR_LENGTH = 160
 
+
 	materiaCallbacks.start = (instance, qset) ->
 		$scope.qset = qset
 		$scope.title = instance.name
 		$scope.totalItems = qset.items[0].items.length
 		$scope.totalPages = Math.ceil $scope.totalItems/ITEMS_PER_PAGE
 
+		document.title = instance.name + ' Materia widget'
+
 		# set up the pages
 		for [1..$scope.totalPages]
 			$scope.pages.push {questions:[], answers:[]}
 			$scope.selectedQA.push {question:-1, answer:-1}
 			$scope.questionCircles.push []
 			$scope.answerCircles.push []
+			$scope.completePerPage.push 0
 
 		_itemIndex = 0
 		_pageIndex = 0
@@ -159,13 +175,31 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 				$scope.pageAnimate = false
 			, ANIMATION_DURATION*1.1
 
+		if _boardElement then _boardElement.focus()
+		if direction == 'next' then _assistiveAlert 'Page incremented. You are on the next page.'
+		else if direction == 'previous' then _assistiveAlert 'Page decremented. You are on the previous page.'
+
+
+	_updateCompletionStatus = () ->
+		$scope.completePerPage  = []
+		for match in $scope.matches
+			if !$scope.completePerPage[match.matchPageId] then $scope.completePerPage[match.matchPageId] = 1
+			else $scope.completePerPage[match.matchPageId]++
+
+
+
+
+
 
 	$scope.checkForQuestionAudio = (index) ->
 		$scope.pages[$scope.currentPage].questions[index].asset != undefined
 
+
+
 	$scope.checkForAnswerAudio = (index) ->
 		$scope.pages[$scope.currentPage].answers[index].asset != undefined
 
+
 	_pushMatch = () ->
 		$scope.matches.push {
 			questionId: $scope.selectedQuestion.id
@@ -174,7 +208,11 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 			answerIndex: $scope.selectedQA[$scope.currentPage].answer
 			matchPageId: $scope.currentPage
 			color: _getColor()
+
 		}
+		_updateCompletionStatus()
+
+		if $scope.matches.length == $scope.totalItems then _assistiveAlert 'All matches complete. The finish button is now available.'
 
 	_applyCircleColor = () ->
 		# find appropriate circle
@@ -238,6 +276,10 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 				$scope.answerCircles[$scope.currentPage][match2_AIndex].color = 'c0'
 				$scope.matches.splice indexOfAnswer, 1
 
+			_assistiveAlert $scope.pages[$scope.currentPage].questions[$scope.selectedQA[$scope.currentPage].question].text + ' matched with ' + 
+					$scope.pages[$scope.currentPage].answers[$scope.selectedQA[$scope.currentPage].answer].text
+
+
 			_pushMatch()
 
 			_applyCircleColor()
@@ -250,10 +292,14 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 
 			$scope.unapplyHoverSelections()
 
+		else if $scope.selectedQA[$scope.currentPage].question != -1 then _assistiveAlert $scope.selectedQuestion.text + ' selected.'
+		else if $scope.selectedQA[$scope.currentPage].answer != -1 then _assistiveAlert $scope.selectedAnswer.text + ' selected.'
+
 	_clearSelections = () ->
 		$scope.selectedQA[$scope.currentPage].question = -1
 		$scope.selectedQA[$scope.currentPage].answer = -1
 
+
 	_updateLines = () ->
 		$scope.lines = []
 		for [1..$scope.totalPages]
@@ -327,6 +373,15 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 
 		return false
 
+	$scope.getMatchWith = (item) ->
+		if item.type == 'question'
+			a = $scope.matches.find( (match) -> match.questionId == item.id)
+			if a then return $scope.pages[a.matchPageId].answers[a.answerIndex].text
+
+		else if item.type == 'answer'
+			q = $scope.matches.find( (match) -> match.answerId == item.id)
+			if q then return $scope.pages[q.matchPageId].questions[q.questionIndex].text
+
 	$scope.drawPrelineToRight = (hoverItem) ->
 		elementId = hoverItem.id
 		# get the index of the item in the current page by finding it with its id
@@ -407,8 +462,9 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 			when "KeyT" then $scope.selectAnswer($scope.pages[$scope.currentPage].answers[4])
 			when "KeyY" then $scope.selectAnswer($scope.pages[$scope.currentPage].answers[5])
 			# left and right arrow keys will change the page
-			when "ArrowLeft" then $scope.changePage('previous')
-			when "ArrowRight" then $scope.changePage('next')
+			when "ArrowLeft"  then document.getElementsByClassName('column1')[0].getElementsByClassName('word')[0].focus()
+			when "ArrowRight" then document.getElementsByClassName('column2')[0].getElementsByClassName('word')[0].focus()
+
 			# enter and space will function the same as clicking on the focused element
 			when "Enter", "Space"
 				switch window.document.activeElement.id
@@ -431,6 +487,7 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 
 					when "finish-button" then $scope.submit()
 
+
 	$scope.getItemLetter = (index) ->
 		# determines the letter that will be displayed next to each answer choice in the second column
 		switch index
@@ -463,6 +520,7 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 		$scope.selectedQA[$scope.currentPage].answer = indexId
 		_checkForMatches()
 
+
 	$scope.submit = () ->
 		return if $scope.getPercentDone() < 1
 		qsetItems = $scope.qset.items[0].items
@@ -488,6 +546,23 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 			randomIndex = Math.floor Math.random() * (index + 1)
 			[qsetItems[index], qsetItems[randomIndex]] = [qsetItems[randomIndex], qsetItems[index]]
 
+	$scope.setIsFirstPage = () ->
+		isFirstPage = false
+		if $scope.currentPage == 0
+			isFirstPage = true
+		return isFirstPage
+
+	$scope.setIsLastPage = () ->
+		isLastPage = false
+		if $scope.currentPage == $scope.pages.length - 1
+			isLastPage = true
+		return isLastPage
+
+
+
+
+
+
 	_checkUnfinishedPages = () ->
 		$scope.unfinishedPagesBefore = false
 		$scope.unfinishedPagesAfter = false
@@ -505,11 +580,45 @@ Matching.controller 'matchingPlayerCtrl', ['$scope', '$timeout', '$sce', ($scope
 				if matchesPerPage[page] < pairsPerPage[page]
 					if matchesPerPage[$scope.currentPage] == pairsPerPage[$scope.currentPage]
 						$scope.unfinishedPagesBefore = true
+
 		unless $scope.currentPage == $scope.pages.length - 1
 			for page in [$scope.currentPage..pairsPerPage.length]
 				if matchesPerPage[page] < pairsPerPage[page]
 					if matchesPerPage[$scope.currentPage] == pairsPerPage[$scope.currentPage]
 						$scope.unfinishedPagesAfter = true
 
+	$scope.unfocused = () ->
+		$scope.helpVisible = !$scope.helpVisible
+		helpButton = document.getElementById("help-button");
+		gameBoard = document.getElementById("gameboard");
+		panelButtons = document.getElementById("page-selector");
+		finishButton = document.getElementById("finish-button");
+
+
+		panelButtons.inert = true;
+		helpButton.inert = true;
+		gameBoard.inert = true;
+		finishButton.inert = true;
+
+		helpModal.inert = false;
+
+	$scope.focused = () ->
+
+		$scope.helpVisible = false
+		helpButton = document.getElementById("help-button");
+		gameBoard = document.getElementById("gameboard");
+		panelButtons = document.getElementById("page-selector");
+		finishButton = document.getElementById("finish-button");
+
+
+		panelButtons.inert = false;
+		helpButton.inert = false;
+		gameBoard.inert = false;
+		finishButton.inert = false;
+
+
+		helpModal.inert = true;
+
+
 	Materia.Engine.start materiaCallbacks
-]
+]

src/install.yaml

@@ -37,3 +37,5 @@ meta_data:
     Students must match one set of words or
     phrases to a corresponding word, phrase,
     or definition.
+accessibility_keyboard: Full
+accessibility_reader: Full