make elements tabbable, fix fields exported with roles, styling changes

client/src/modules/GameCreationStepManager.js

@@ -163,8 +163,8 @@ function renderModerationTypeStep (game, containerId, stepNumber) {
     setAttributes(stepContainer, { id: 'step-' + stepNumber, class: 'flex-row-container step' });
 
     stepContainer.innerHTML =
-        "<div id='moderation-dedicated'>I will be the <strong>dedicated mod.</strong> Don't deal me a card.</div>" +
-        "<div id='moderation-self'>The <strong>first person out</strong> will mod. Deal me into the game <span>(mod will be assigned automatically).</span></div>";
+        "<div tabindex=\"0\" id='moderation-dedicated'>I will be the <strong>dedicated mod.</strong> Don't deal me a card.</div>" +
+        "<div tabindex=\"0\" id='moderation-self'>The <strong>first person out</strong> will mod. Deal me into the game <span>(mod will be assigned automatically).</span></div>";
 
     const dedicatedOption = stepContainer.querySelector('#moderation-dedicated');
     if (game.hasDedicatedModerator) {
@@ -175,17 +175,27 @@ function renderModerationTypeStep (game, containerId, stepNumber) {
         selfOption.classList.add('option-selected');
     }
 
-    dedicatedOption.addEventListener('click', () => {
-        dedicatedOption.classList.add('option-selected');
-        selfOption.classList.remove('option-selected');
-        game.hasDedicatedModerator = true;
-    });
+    let dedicatedHandler = (e) => {
+        if (e.type === 'click' || e.code === 'Enter') {
+            dedicatedOption.classList.add('option-selected');
+            selfOption.classList.remove('option-selected');
+            game.hasDedicatedModerator = true;
+        }
+    }
 
-    selfOption.addEventListener('click', () => {
-        selfOption.classList.add('option-selected');
-        dedicatedOption.classList.remove('option-selected');
-        game.hasDedicatedModerator = false;
-    });
+    let tempModHandler = (e) => {
+        if (e.type === 'click' || e.code === 'Enter') {
+            selfOption.classList.add('option-selected');
+            dedicatedOption.classList.remove('option-selected');
+            game.hasDedicatedModerator = false;
+        }
+    }
+
+    dedicatedOption.addEventListener('click', dedicatedHandler);
+    dedicatedOption.addEventListener('keyup', dedicatedHandler);
+
+    selfOption.addEventListener('click', tempModHandler);
+    selfOption.addEventListener('keyup', tempModHandler);
 
     document.getElementById(containerId).appendChild(stepContainer);
 }
@@ -198,16 +208,29 @@ function renderRoleSelectionStep (game, containerId, step, deckManager) {
     stepContainer.innerHTML += templates.CREATE_GAME_DECK_STATUS;
     stepContainer.innerHTML += templates.CREATE_GAME_DECK;
 
+    const exportHandler = (e) => {
+        if (e.type === 'click' || e.code === 'Enter') {
+            e.preventDefault();
+            deckManager.downloadCustomRoles('play-werewolf-custom-roles', JSON.stringify(
+                deckManager.getCurrentCustomRoleOptions()
+                    .map((option) => (
+                        {role: option.role, team: option.team, description: option.description, custom: option.custom}
+                    ))
+            ));
+        }
+    }
     document.getElementById(containerId).appendChild(stepContainer);
-    document.querySelector('#custom-roles-export').addEventListener('click', (e) => {
-        e.preventDefault();
-        deckManager.downloadCustomRoles('play-werewolf-custom-roles', JSON.stringify(deckManager.getCurrentCustomRoleOptions()));
-    });
+    document.querySelector('#custom-roles-export').addEventListener('click', exportHandler);
+    document.querySelector('#custom-roles-export').addEventListener('keyup', exportHandler);
 
-    document.querySelector('#custom-roles-import').addEventListener('click', (e) => {
-        e.preventDefault();
-        ModalManager.displayModal('upload-custom-roles-modal', 'modal-background', 'close-upload-custom-roles-modal-button');
-    });
+    const importHandler = (e) => {
+        if (e.type === 'click' || e.code === 'Enter') {
+            e.preventDefault();
+            ModalManager.displayModal('upload-custom-roles-modal', 'modal-background', 'close-upload-custom-roles-modal-button');
+        }
+    }
+    document.querySelector('#custom-roles-import').addEventListener('click', importHandler);
+    document.querySelector('#custom-roles-import').addEventListener('keyup', importHandler);
 
     document.getElementById('upload-custom-roles-form').onsubmit = (e) => {
         e.preventDefault();
@@ -351,7 +374,7 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu
     document.querySelector('#create-game')?.remove();
     if (back) {
         const backButton = document.createElement('button');
-        backButton.innerText = '\u25C0';
+        backButton.innerHTML = '<img alt="back" src="../images/caret-back.svg"/>';
         backButton.addEventListener('click', backHandler);
         backButton.setAttribute('id', 'step-back-button');
         backButton.classList.add('cancel');
@@ -361,7 +384,7 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu
 
     if (forward && builtGame === null) {
         const fwdButton = document.createElement('button');
-        fwdButton.innerHTML = '\u25b6';
+        fwdButton.innerHTML = '<img alt="next" src="../images/caret-forward.svg"/>';
         fwdButton.addEventListener('click', forwardHandler);
         fwdButton.setAttribute('id', 'step-forward-button');
         fwdButton.classList.add('app-button');
@@ -428,14 +451,14 @@ function constructCompactDeckBuilderElement (card, deckManager) {
     cardContainer.setAttribute('id', 'card-' + card.role.replaceAll(' ', '-'));
 
     cardContainer.innerHTML =
-        "<div class='compact-card-left'>" +
+        "<div tabindex='0' class='compact-card-left'>" +
             '<p>-</p>' +
         '</div>' +
         "<div class='compact-card-header'>" +
             "<p class='card-role'></p>" +
         "<div class='card-quantity'></div>" +
         '</div>' +
-        "<div class='compact-card-right'>" +
+        "<div tabindex='0' class='compact-card-right'>" +
             '<p>+</p>' +
         '</div>';
 
@@ -447,22 +470,33 @@ function constructCompactDeckBuilderElement (card, deckManager) {
         cardContainer.classList.add('selected-card');
     }
 
-    cardContainer.querySelector('.compact-card-right').addEventListener('click', () => {
-        deckManager.addCopyOfCard(card.role);
-        updateDeckStatus(deckManager);
-        cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
-        if (deckManager.getCard(card.role).quantity > 0) {
-            document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.add('selected-card');
+    const addHandler = (e) => {
+        if (e.type === 'click' || e.code === 'Enter') {
+            deckManager.addCopyOfCard(card.role);
+            updateDeckStatus(deckManager);
+            cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
+            if (deckManager.getCard(card.role).quantity > 0) {
+                document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.add('selected-card');
+            }
         }
-    });
-    cardContainer.querySelector('.compact-card-left').addEventListener('click', () => {
-        deckManager.removeCopyOfCard(card.role);
-        updateDeckStatus(deckManager);
-        cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
-        if (deckManager.getCard(card.role).quantity === 0) {
-            document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.remove('selected-card');
+    };
+
+    const removeHandler = (e) => {
+        if (e.type === 'click' || e.code === 'Enter') {
+            deckManager.removeCopyOfCard(card.role);
+            updateDeckStatus(deckManager);
+            cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
+            if (deckManager.getCard(card.role).quantity === 0) {
+                document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.remove('selected-card');
+            }
         }
-    });
+    }
+
+    cardContainer.querySelector('.compact-card-right').addEventListener('click', addHandler);
+    cardContainer.querySelector('.compact-card-right').addEventListener('keyup', addHandler);
+    cardContainer.querySelector('.compact-card-left').addEventListener('click', removeHandler);
+    cardContainer.querySelector('.compact-card-left').addEventListener('keyup', removeHandler);
+
     return cardContainer;
 }
 
@@ -560,56 +594,72 @@ function addOptionsToList (deckManager, selectEl) {
 function addCustomRoleEventListeners (deckManager, select) {
     document.querySelectorAll('.deck-select-role').forEach((role) => {
         const name = role.querySelector('.deck-select-role-name').innerText;
-        role.querySelector('.deck-select-include').addEventListener('click', (e) => {
-            e.preventDefault();
-            if (!deckManager.getCard(name)) {
-                deckManager.addToDeck(name);
-                const cardEl = constructCompactDeckBuilderElement(deckManager.getCard(name), deckManager);
-                toast('"' + name + '" made available below.', 'success', true, true, 4);
-                if (deckManager.getCard(name).team === globals.ALIGNMENT.GOOD) {
-                    document.getElementById('deck-good').appendChild(cardEl);
-                } else {
-                    document.getElementById('deck-evil').appendChild(cardEl);
-                }
-                updateCustomRoleOptionsList(deckManager, select);
-            } else {
-                toast('"' + select.value + '" already included.', 'error', true, true, 3);
-            }
-        });
-
-        role.querySelector('.deck-select-remove').addEventListener('click', (e) => {
-            if (confirm("Delete the role '" + name + "'?")) {
+        const includeHandler = (e) => {
+            if (e.type === 'click' || e.code === 'Enter') {
                 e.preventDefault();
-                deckManager.removeFromCustomRoleOptions(name);
-                updateCustomRoleOptionsList(deckManager, select);
+                if (!deckManager.getCard(name)) {
+                    deckManager.addToDeck(name);
+                    const cardEl = constructCompactDeckBuilderElement(deckManager.getCard(name), deckManager);
+                    toast('"' + name + '" made available below.', 'success', true, true, 4);
+                    if (deckManager.getCard(name).team === globals.ALIGNMENT.GOOD) {
+                        document.getElementById('deck-good').appendChild(cardEl);
+                    } else {
+                        document.getElementById('deck-evil').appendChild(cardEl);
+                    }
+                    updateCustomRoleOptionsList(deckManager, select);
+                } else {
+                    toast('"' + select.value + '" already included.', 'error', true, true, 3);
+                }
             }
-        });
+        }
+        role.querySelector('.deck-select-include').addEventListener('click', includeHandler);
+        role.querySelector('.deck-select-include').addEventListener('keyup', includeHandler);
 
-        role.querySelector('.deck-select-info').addEventListener('click', (e) => {
-            const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
-            alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
-            alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
-            e.preventDefault();
-            const option = deckManager.getCustomRoleOption(name);
-            document.getElementById('custom-role-info-modal-name').innerText = name;
-            alignmentEl.classList.add(option.team);
-            document.getElementById('custom-role-info-modal-description').innerText = option.description;
-            alignmentEl.innerText = option.team;
-            ModalManager.displayModal('custom-role-info-modal', 'modal-background', 'close-custom-role-info-modal-button');
-        });
+        const removeHandler = (e) => {
+            if (e.type === 'click' || e.code === 'Enter') {
+                if (confirm("Delete the role '" + name + "'?")) {
+                    e.preventDefault();
+                    deckManager.removeFromCustomRoleOptions(name);
+                    updateCustomRoleOptionsList(deckManager, select);
+                }
+            }
+        }
+        role.querySelector('.deck-select-remove').addEventListener('click', removeHandler);
+        role.querySelector('.deck-select-remove').addEventListener('keyup', removeHandler);
 
-        role.querySelector('.deck-select-edit').addEventListener('click', (e) => {
-            e.preventDefault();
-            const option = deckManager.getCustomRoleOption(name);
-            document.getElementById('role-name').value = option.role;
-            document.getElementById('role-alignment').value = option.team;
-            document.getElementById('role-description').value = option.description;
-            deckManager.createMode = false;
-            deckManager.currentlyEditingRoleName = option.role;
-            const createBtn = document.getElementById('create-role-button');
-            createBtn.setAttribute('value', 'Update');
-            ModalManager.displayModal('role-modal', 'modal-background', 'close-modal-button');
-        });
+        const infoHandler = (e) => {
+            if (e.type === 'click' || e.code === 'Enter') {
+                const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
+                alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
+                alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
+                e.preventDefault();
+                const option = deckManager.getCustomRoleOption(name);
+                document.getElementById('custom-role-info-modal-name').innerText = name;
+                alignmentEl.classList.add(option.team);
+                document.getElementById('custom-role-info-modal-description').innerText = option.description;
+                alignmentEl.innerText = option.team;
+                ModalManager.displayModal('custom-role-info-modal', 'modal-background', 'close-custom-role-info-modal-button');
+            }
+        }
+        role.querySelector('.deck-select-info').addEventListener('click', infoHandler);
+        role.querySelector('.deck-select-info').addEventListener('keyup', infoHandler);
+
+        const editHandler = (e) => {
+            if (e.type === 'click' || e.code === 'Enter') {
+                e.preventDefault();
+                const option = deckManager.getCustomRoleOption(name);
+                document.getElementById('role-name').value = option.role;
+                document.getElementById('role-alignment').value = option.team;
+                document.getElementById('role-description').value = option.description;
+                deckManager.createMode = false;
+                deckManager.currentlyEditingRoleName = option.role;
+                const createBtn = document.getElementById('create-role-button');
+                createBtn.setAttribute('value', 'Update');
+                ModalManager.displayModal('role-modal', 'modal-background', 'close-modal-button');
+            }
+        }
+        role.querySelector('.deck-select-edit').addEventListener('click', editHandler);
+        role.querySelector('.deck-select-edit').addEventListener('keyup', editHandler);
     });
 }
 

client/src/modules/GameStateRenderer.js

@@ -46,11 +46,15 @@ export class GameStateRenderer {
         const linkDiv = document.createElement('div');
         linkDiv.innerText = window.location;
         gameLinkContainer.prepend(linkDiv);
-        gameLinkContainer.addEventListener('click', () => {
-            navigator.clipboard.writeText(gameLinkContainer.innerText).then(() => {
-                toast('Link copied!', 'success', true);
-            });
-        });
+        const linkCopyHandler = (e) => {
+            if (e.type === 'click' || e.code === 'Enter') {
+                navigator.clipboard.writeText(gameLinkContainer.innerText).then(() => {
+                    toast('Link copied!', 'success', true);
+                });
+            }
+        }
+        gameLinkContainer.addEventListener('click', linkCopyHandler);
+        gameLinkContainer.addEventListener('keyup', linkCopyHandler);
         const copyImg = document.createElement('img');
         copyImg.setAttribute('src', '../images/copy.svg');
         gameLinkContainer.appendChild(copyImg);

client/src/modules/ModalManager.js

@@ -21,6 +21,7 @@ function displayModal (modalId, backgroundId, closeButtonId) {
     } else {
         throw new Error('One or more of the ids supplied to ModalManager.displayModal is invalid.');
     }
+    modal.focus();
 }
 
 function dispelModal (modalId, backgroundId) {

client/src/modules/Templates.js

@@ -3,7 +3,7 @@ export const templates = {
     "<div id='lobby-header'>" +
         '<div>' +
             "<label for='game-link'>Share Link</label>" +
-            "<div id='game-link'></div>" +
+            "<div tabindex='0' id='game-link'></div>" +
         '</div>' +
         "<div id='game-parameters'>" +
             '<div>' +
@@ -188,7 +188,7 @@ export const templates = {
         '</div>',
     NAME_CHANGE_MODAL:
         "<div id='change-name-modal-background' class='modal-background'></div>" +
-        "<div id='change-name-modal' class='modal'>" +
+        "<div tabindex='-1' id='change-name-modal' class='modal'>" +
             "<form id='change-name-form'>" +
                 "<div id='transfer-mod-form-content'>" +
                     "<label for='player-new-name'>Your name:</label>" +
@@ -201,7 +201,7 @@ export const templates = {
         '</div>',
     ROLE_INFO_MODAL:
         "<div id='role-info-modal-background' class='modal-background'></div>" +
-        "<div id='role-info-modal' class='modal'>" +
+        "<div tabindex='-1' id='role-info-modal' class='modal'>" +
             '<h2>Roles in this game:</h2>' +
             "<div id='game-role-info-container'></div>" +
             "<div class='modal-button-container'>" +
@@ -243,8 +243,8 @@ export const templates = {
                 '</span>' +
             '</button>' +
             '<div id="custom-role-actions" style="display:none">' +
-                '<div class="custom-role-action" id="custom-roles-export">Export</div>' +
-                '<div class="custom-role-action" id="custom-roles-import">Import</div>' +
+                '<div tabindex="0" class="custom-role-action" id="custom-roles-export">Export</div>' +
+                '<div tabindex="0" class="custom-role-action" id="custom-roles-import">Import</div>' +
             '</div>' +
             '<label for="add-card-to-deck-form">Custom Role Box</label>' +
             '<div id="deck-select"></div>' +
@@ -258,9 +258,9 @@ export const templates = {
     DECK_SELECT_ROLE:
         '<div class="deck-select-role-name"></div>' +
         '<div class="deck-select-role-options">' +
-            '<img class="deck-select-include" src="images/add.svg" title="make available" alt="include"/>' +
-            '<img class="deck-select-info" src="images/info.svg" title="info" alt="info"/>' +
-            '<img class="deck-select-edit" src="images/pencil.svg" title="edit" alt="edit"/>' +
-            '<img class="deck-select-remove" src="images/delete.svg" title="remove" alt="remove"/>' +
+            '<img tabindex="0" class="deck-select-include" src="images/add.svg" title="make available" alt="include"/>' +
+            '<img tabindex="0" class="deck-select-info" src="images/info.svg" title="info" alt="info"/>' +
+            '<img tabindex="0" class="deck-select-edit" src="images/pencil.svg" title="edit" alt="edit"/>' +
+            '<img tabindex="0" class="deck-select-remove" src="images/delete.svg" title="remove" alt="remove"/>' +
         '</div>'
 };