Skip to content

Commit

Permalink
Fixes aria-live regions for chrome
Browse files Browse the repository at this point in the history
  • Loading branch information
@cayb0rg
cayb0rg committed Aug 3, 2023
1 parent 3651f03 commit 2d4bd20
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 21 deletions.
38 changes: 26 additions & 12 deletions src/controllers/ctl-player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export const onMateriaStart = ($scope, $sce, instance, qset, version) => {
}

export const showNextQuestion = $scope => {
$scope.focusStatusButton = false

$scope.question.current++
const curItem = _qset.items[$scope.question.current]
if (curItem) {
Expand All @@ -90,6 +92,7 @@ export const showNextQuestion = $scope => {
export const endGame = $scope => {
$scope.gameState.ingame = false
$scope.gameState.endgame = true
$scope.gameState.splashText = 'The End'
Materia.Engine.end(false)
$scope.title = ''
$scope.continueToScores = true
Expand Down Expand Up @@ -145,8 +148,14 @@ export const checkChoice = ($scope, value) => {
}

export const nextClicked = ($scope, $timeout) => {
// update the questions remaining status aria-label
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
let questionsRemaining = ($scope.questionCount - $scope.question.current - 1)
$scope.questionsRemainingText = questionsRemaining + " question" + (questionsRemaining > 1 ? "s" : "") + " remaining. Now on question " + ($scope.question.current + 2) + " of " + $scope.questionCount + ": " + _qset.items[$scope.question.current + 1].questions[0].text
$scope.focusStatusButton = true
} else {
$scope.questionsRemainingText = 'No questions remaining.'
$scope.focusStatusButton = false
}

$scope.gameState.showNext = false
Expand All @@ -161,15 +170,25 @@ export const nextClicked = ($scope, $timeout) => {
$timeout(showNextQuestion.bind(null, $scope), 1200)
}

export const closeIntro = $scope => {
export const closeIntro = ($scope, $timeout) => {
$scope.gameState.ingame = true
$scope.resetFocus = true
assistiveAlert($scope, "Question " + ($scope.question.current + 1) + " of " + $scope.questionCount + ": " + _qset.items[$scope.question.current].questions[0].text)
// make splash modal aria-hidden and focus status indicator
$scope.focusStatusButton = true
$timeout(() => {
assistiveAlert($scope, "Question " + ($scope.question.current + 1) + " of " + $scope.questionCount + ": " + _qset.items[$scope.question.current].questions[0].text)
// set this to false so we can trigger it in nextClicked
$scope.focusStatusButton = false
}, 1200)
}

export const toggleInstructions = $scope => {
// Since aria-live is only read if there's a change in text, there are two descriptions so that if H is pressed more than one time, it will still be read out.
$scope.instructionsOpen = !$scope.instructionsOpen

if (!$scope.instructionsOpen && $scope.prevFocus) {
console.log($scope.prevFocus)
$scope.prevFocus.focus()
$scope.prevFocus = null
}
}

export const ControllerThisOrThatPlayer = function($scope, $timeout, $sce) {
Expand Down Expand Up @@ -205,19 +224,18 @@ export const ControllerThisOrThatPlayer = function($scope, $timeout, $sce) {
$scope.viewScores = viewScores
$scope.checkChoice = checkChoice.bind(null, $scope)
$scope.nextClicked = nextClicked.bind(null, $scope, $timeout)
$scope.closeIntro = closeIntro.bind(null, $scope)
$scope.closeIntro = closeIntro.bind(null, $scope, $timeout)
$scope.toggleInstructions = toggleInstructions.bind(null, $scope)
$scope.instructionsOpen = false
$scope.selectedChoice = -1

$scope.lightboxTarget = -1
$scope.focusThisExpand = false
$scope.focusThatExpand = false
$scope.resetFocus = false;
$scope.focusStatusButton = false

$scope.pressedQOnce = false
$scope.prevFocus = null
$scope.assistiveAlertText = ""

// Opens or closes the image lightbox
// Values of val:
Expand Down Expand Up @@ -287,16 +305,12 @@ export const ControllerThisOrThatPlayer = function($scope, $timeout, $sce) {
} 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') {
if (!$scope.instructionsOpen) {
$scope.prevFocus = event.target
} else {
if ($scope.prevFocus) $scope.prevFocus.focus()
}
toggleInstructions($scope);
}
Expand Down
16 changes: 7 additions & 9 deletions src/player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

<!-- aria-live region to report status updates -->
<!-- note: browser support for aria-live is mixed, behavior may be inconsistent across browsers and devices -->
<div aria-live="assertive" role="status" id="assistive-alert" aria-atomic="true"></div>
<div aria-live="assertive" role="status" id="assistive-alert"></div>
<main id="game" role="main">

<div id="splash" ng-class="{'raised': gameState.ingame}">
Expand All @@ -40,12 +40,10 @@
class="sign"
ng-class="{'raised': gameState.ingame, 'end': gameState.endgame}"
role="{{gameState.endgame ? 'alertdialog' : 'dialog'}}"
aria-describedby="start-btn"
aria-modal="true"
aria-hidden="{{gameState.ingame}}"
ng-attr-inert="{{gameState.ingame || instructionsOpen ? 'true' : undefined }}">

<h1 id="splashText" aria-label="Welcome to {{gameState.splashText}}"aria-hidden="{{gameState.endgame || gameState.ingame}}">{{gameState.splashText}}</h1>
aria-hidden="{{focusStatusButton}}"
ng-attr-inert="{{gameState.ingame || focusStatusButton || instructionsOpen ? 'true' : undefined }}">
<h1 id="splashText" aria-label="Welcome to {{gameState.splashText}}"aria-hidden="{{gameState.ingame}}">{{gameState.splashText}}</h1>

<div class="start-btns">
<button class="start btn"
Expand Down Expand Up @@ -86,7 +84,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" 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" title="Questions Remaining" focus-me="focusStatusButton" 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>
Expand Down Expand Up @@ -300,7 +298,7 @@ <h1 id="question" ng-bind-html="title"></h1>
<div class='modal-bg' ng-click="setLightboxTarget(-1)" aria-hidden="true" tabindex="-1">
</div>
</section>
<section class="instructions" id="instructions-container" ng-show="instructionsOpen" role="alertdialog" aria-describedby="controls" aria-hidden="{{!instructionsOpen}}" ng-attr-inert="{{instructionsOpen ? undefined : 'true'}}">
<section class="instructions" id="instructions-container" ng-show="instructionsOpen" role="alertdialog" aria-describedby="controls" aria-hidden="{{!instructionsOpen}}">
<h2>Keyboard Controls</h2>
<dl id="controls">
<dt>Use the <strong>"A" and "D" keys</strong> </dt>
Expand All @@ -310,7 +308,7 @@ <h2>Keyboard Controls</h2>
<dt>Press the <strong>"H" Key</strong></dt>
<dd>to Open or Close the instructions.</dd>
</dl>
<button class="btn" focus-me="instructionsOpen" ng-click="toggleInstructions()">Okay</button>
<button class="btn" focus-me="instructionsOpen" ng-click="toggleInstructions()" aria-hidden="{{!instructionsOpen}}">Okay</button>
</section>
</main>
</body>
Expand Down

0 comments on commit 2d4bd20

Please sign in to comment.