HFP-1266 Add accessibility support to dialog and timer

Improved keyboard support.
Made labels translatable.

card.js

@@ -8,10 +8,11 @@
    * @param {Object} image
    * @param {number} id
    * @param {string} alt
+   * @param {Object} l10n Localization
    * @param {string} [description]
    * @param {Object} [styles]
    */
-  MemoryGame.Card = function (image, id, alt, description, styles) {
+  MemoryGame.Card = function (image, id, alt, l10n, description, styles) {
     /** @alias H5P.MemoryGame.Card# */
     var self = this;
 
@@ -47,13 +48,13 @@
     self.updateLabel = function (isMatched, announce, reset) {
 
       // Determine new label from input params
-      var label = (reset ? 'Unturned' : alt);
+      var label = (reset ? l10n.cardUnturned : alt);
       if (isMatched) {
-        label = 'Match found. ' + label; // TODO l10n
+        label = l10n.cardMatched + ' ' + label;
       }
 
       // Update the card's label
-      $wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': ' + label); // TODO l10n
+      $wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + label);
 
       // Update disabled property
       $wrapper.attr('aria-disabled', reset ? null : 'true');
@@ -155,9 +156,20 @@
               self.trigger('prev');
               event.preventDefault();
               return;
+            case 35:
+              // Move to last card
+              self.trigger('last');
+              event.preventDefault();
+              return;
+            case 36:
+              // Move to first card
+              self.trigger('first');
+              event.preventDefault();
+              return;
           }
         });
-      $wrapper.attr('aria-label', 'Card ' + ($wrapper.index() + 1) + ': Unturned.'); // TODO l10n
+
+      $wrapper.attr('aria-label', l10n.cardPrefix.replace('%num', $wrapper.index() + 1) + ' ' + l10n.cardUnturned);
       $card = $wrapper.children('.h5p-memory-card')
         .children('.h5p-front')
           .click(function () {

language/ar.json

@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "البطاقات",
       "entity": "بطاقة",
       "field": {
@@ -10,53 +15,53 @@
             "label": "الصورة"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
             "label": "الوصف",
             "description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
+      "label": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
+          "label": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
+          "label": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -64,21 +69,44 @@
       "label": "الأقلمة",
       "fields": [
         {
-          "label": "نص تدوير البطاقة"
+          "label": "نص تدوير البطاقة",
+          "default": "Card turns"
         },
         {
-          "label": "نص التوقيت الزمني"
+          "label": "نص التوقيت الزمني",
+          "default": "Time spent"
         },
         {
-          "label": "نص الملاحظات"
+          "label": "نص الملاحظات",
+          "default": "Good work!"
         },
         {
-          "englishLabel": "Try again button text",
+          "label": "Try again button text",
-          "englishDefault": "Try again?"
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
+          "label": "Close button label",
-          "englishDefault": "Close"
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/bs.json

@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Karte",
       "entity": "karte",
       "field": {
@@ -10,53 +15,53 @@
             "label": "Slika"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Ista slika",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "Opcionalna slika koja se koristi umjestodvije iste slike."
           },
           {
             "label": "Opis",
             "description": "Kratak tekst koji će biti prikazan čim se pronađu dvije iste karte."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Podešavanje ponašanja",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Poredaj karte u redove ",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Broj karata za upotrebu",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
+      "label": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
+          "label": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Poleđina karata",
+          "label": "Card Back",
-          "englishDescription": "Koristi standardnu pozadinu za karte."
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -76,14 +81,32 @@
           "default": "BRAVO!"
         },
         {
-          "englishLabel": "Try again button text",
           "label": "Tekst na dugmetu pokušaj ponovo",
-          "englishDefault": "Try again?",
           "default": "Pokušaj ponovo?"
         },
         {
-          "englishLabel": "Close button label",
+          "label": "Close button label",
-          "englishDefault": "Close"
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/de.json

@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Karten",
       "entity": "karte",
       "field": {
@@ -10,53 +15,53 @@
             "label": "Bild"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
             "label": "Beschreibung",
             "description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
+      "label": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
+          "label": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
+          "label": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -76,12 +81,32 @@
           "default": "Gute Arbeit!"
         },
         {
-          "englishLabel": "Try again button text",
+          "label": "Try again button text",
-          "englishDefault": "Try again?"
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
+          "label": "Close button label",
-          "englishDefault": "Close"
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/fr.json

@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Cartes",
       "entity": "carte",
       "field": {
@@ -10,53 +15,53 @@
             "label": "Image"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
             "label": "Description",
             "description": "Petit texte affiché quand deux cartes identiques sont trouvées."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
+      "label": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
+          "label": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
+          "label": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -76,12 +81,32 @@
           "default": "Bien joué !"
         },
         {
-          "englishLabel": "Try again button text",
+          "label": "Try again button text",
-          "englishDefault": "Try again?"
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
+          "label": "Close button label",
-          "englishDefault": "Close"
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/it.json

@@ -1,6 +1,11 @@
 {
   "semantics": [
     {
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Carte",
       "entity": "carta",
       "field": {
@@ -10,53 +15,53 @@
             "label": "Immagine"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Matching Image",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "An optional image to match against instead of using two cards with the same image."
           },
           {
             "label": "Descrizione",
             "description": "Breve testo visualizzato quando due carte uguali vengono trovate."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Behavioural settings",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "These options will let you control how the game behaves.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Position the cards in a square",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Number of cards to use",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Add button for retrying when the game is over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
+      "label": "Look and feel",
-      "englishDescription": "Control the visuals of the game.",
+      "description": "Control the visuals of the game.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
+          "label": "Theme Color",
-          "englishDescription": "Choose a color to create a theme for your card game."
+          "description": "Choose a color to create a theme for your card game.",
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
+          "label": "Card Back",
-          "englishDescription": "Use a custom back for your cards."
+          "description": "Use a custom back for your cards."
         }
       ]
     },
@@ -64,21 +69,44 @@
       "label": "Localizzazione",
       "fields": [
         {
-          "label": "Testo Gira carta"
+          "label": "Testo Gira carta",
+          "default": "Card turns"
         },
         {
-          "label": "Testo Tempo trascorso"
+          "label": "Testo Tempo trascorso",
+          "default": "Time spent"
         },
         {
-          "label": "Testo Feedback"
+          "label": "Testo Feedback",
+          "default": "Good work!"
         },
         {
-          "englishLabel": "Try again button text",
+          "label": "Try again button text",
-          "englishDefault": "Try again?"
+          "default": "Reset"
         },
         {
-          "englishLabel": "Close button label",
+          "label": "Close button label",
-          "englishDefault": "Close"
+          "default": "Close"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

language/nb.json

@@ -1,110 +1,112 @@
 {
   "semantics": [
     {
-      "englishLabel": "Cards",
+      "widgets": [
+        {
+          "label": "Default"
+        }
+      ],
       "label": "Kort",
-      "englishEntity": "card",
       "entity": "kort",
       "field": {
-        "englishLabel": "Card",
         "label": "Kort",
         "fields": [
           {
-            "englishLabel": "Image",
             "label": "Bilde"
           },
           {
-            "englishLabel": "Matching Image",
             "label": "Tilhørende bilde",
-            "englishDescription": "An optional image to match against instead of using two cards with the same image.",
             "description": "Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme bilde."
           },
           {
-            "englishLabel": "Description",
             "label": "Beskrivelse",
-            "englishDescription": "An optional short text that will pop up once the two matching cards are found.",
             "description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
+          },
+          {
+            "label": "Alternative text for Matching Image",
+            "description": "Describe what can be seen in the photo. The text is read by text-to-speech tools needed by visually impaired users."
+          },
+          {
+            "label": "Description",
+            "description": "An optional short text that will pop up once the two matching cards are found."
           }
         ]
       }
     },
     {
-      "englishLabel": "Behavioural settings",
       "label": "Innstillinger for oppførsel",
-      "englishDescription": "These options will let you control how the game behaves.",
       "description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
       "fields": [
         {
-          "englishLabel": "Position the cards in a square",
           "label": "Plasser kortene i en firkant",
-          "englishDescription": "Will try to match the number of columns and rows when laying out the cards. Afterward, the cards will be scaled to fit the container.",
           "description": "Vil forsøk å samsvare antall kolonner og rader når kortene legges ut. Etterpå vil kortene bli skalert til å passe beholderen."
         },
         {
-          "englishLabel": "Number of cards to use",
           "label": "Antall kort som skal brukes",
-          "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
           "description": "Ved å sette antallet høyere enn 2 vil spillet plukke tilfeldige kort fra listen over kort."
         },
         {
-          "englishLabel": "Add button for retrying when the game is over",
           "label": "Legg til knapp for å prøve på nytt når spillet er over"
         }
       ]
     },
     {
-      "englishLabel": "Look and feel",
       "label": "Tilpass utseende",
-      "englishDescription": "Control the visuals of the game.",
       "description": "Kontroller de visuelle aspektene ved spillet.",
       "fields": [
         {
-          "englishLabel": "Theme Color",
           "label": "Temafarge",
-          "englishDescription": "Choose a color to create a theme for your card game.",
+          "description": "Velg en farge for å skape et tema over kortspillet ditt.",
-          "description": "Velg en farge for å skape et tema over kortspillet ditt."
+          "default": "#909090"
         },
         {
-          "englishLabel": "Card Back",
           "label": "Kortbaksiden",
-          "englishDescription": "Use a custom back for your cards.",
           "description": "Bruk en tilpasset kortbakside for kortene dine."
         }
       ]
     },
     {
-      "englishLabel": "Localization",
       "label": "Oversettelser",
       "fields": [
         {
-          "englishLabel": "Card turns text",
           "label": "Etikett for antall vendte kort",
-          "englishDefault": "Card turns",
           "default": "Kort vendt"
         },
         {
-          "englishLabel": "Time spent text",
           "label": "Etikett for tid brukt",
-          "englishDefault": "Time spent",
           "default": "Tid brukt"
         },
         {
-          "englishLabel": "Feedback text",
           "label": "Tilbakemeldingstekst",
-          "englishDefault": "Good work!",
           "default": "Godt jobbet!"
         },
         {
-          "englishLabel": "Try again button text",
           "label": "Prøv på nytt-tekst",
-          "englishDefault": "Try again?",
           "default": "Prøv på nytt?"
         },
         {
-          "englishLabel": "Close button label",
           "label": "Lukk knapp-merkelapp",
-          "englishDefault": "Close",
           "default": "Lukk"
+        },
+        {
+          "label": "Game label",
+          "default": "Memory Game. Find the matching cards."
+        },
+        {
+          "label": "Game finished label",
+          "default": "All of the cards have been found."
+        },
+        {
+          "label": "Card indexing label",
+          "default": "Card %num:"
+        },
+        {
+          "label": "Card unturned label",
+          "default": "Unturned."
+        },
+        {
+          "label": "Card matched label",
+          "default": "Match found."
         }
       ]
     }

memory-game.css

@@ -194,9 +194,6 @@
   margin: 0 1em 0 0;
   font-weight: bold;
 }
-.h5p-memory-game .h5p-status > dt:after {
-  content: ":";
-}
 .h5p-memory-game .h5p-status > dd {
   margin: 0;
 }
@@ -314,3 +311,6 @@
   transform: translate(-50%,-450%) scale(0) rotate(360deg);
   opacity: 0;
 }
+.h5p-memory-complete {
+  display: none;
+}

memory-game.js

@@ -22,13 +22,29 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var flipped, timer, counter, popup, $bottom, $feedback, $wrapper, maxWidth, numCols;
+    var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols;
     var cards = [];
     var flipBacks = []; // Que of cards to be flipped back
     var numFlipped = 0;
     var removed = 0;
     numInstances++;
 
+    // Add defaults
+    parameters = $.extend(true, {
+      l10n: {
+        cardTurns: 'Card turns',
+        timeSpent: 'Time spent',
+        feedback: 'Good work!',
+        tryAgain: 'Reset',
+        closeLabel: 'Close',
+        label: 'Memory Game. Find the matching cards.',
+        done: 'All of the cards have been found.',
+        cardPrefix: 'Card %num: ',
+        cardUnturned: 'Unturned.',
+        cardMatched: 'Match found.'
+      }
+    }, parameters);
+
     /**
      * Check if these two cards belongs together.
      *
@@ -69,7 +85,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         if (card.hasTwoImages) {
           imgs.push(mate.getImage());
         }
-        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function () {
+        popup.show(desc, imgs, cardStyles ? cardStyles.back : undefined, function (refocus) {
           if (isFinished) {
             // Game done
             card.makeUntabbable();
@@ -78,6 +94,10 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           else {
             // Popup is closed, continue.
             timer.play();
+
+            if (refocus) {
+              card.setFocus();
+            }
           }
         });
       }
@@ -94,6 +114,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var finished = function () {
       timer.stop();
+      $taskComplete.show();
       $feedback.addClass('h5p-show'); // Announce
       $bottom.focus();
 
@@ -140,6 +161,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       // Remove feedback
       $feedback[0].classList.remove('h5p-show');
+      $taskComplete.hide();
 
       // Reset timer and counter
       timer.reset();
@@ -196,6 +218,14 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var addCard = function (card, mate) {
       card.on('flip', function () {
+
+        // Always return focus to the card last flipped
+        for (var i = 0; i < cards.length; i++) {
+          cards[i].makeUntabbable();
+        }
+        card.makeTabbable();
+
+        popup.close();
         self.triggerXAPI('interacted');
         // Keep track of time spent
         timer.play();
@@ -232,8 +262,12 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       });
 
       /**
+       * Create event handler for moving focus to the next or the previous
+       * card on the table.
+       *
        * @private
-       * @param {number} direction
+       * @param {number} direction +1/-1
+       * @return {function}
        */
       var createCardChangeFocusHandler = function (direction) {
         return function () {
@@ -261,8 +295,38 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         };
       };
 
+      // Register handlers for moving focus to next and previous card
       card.on('next', createCardChangeFocusHandler(1));
       card.on('prev', createCardChangeFocusHandler(-1));
+
+      /**
+       * Create event handler for moving focus to the first or the last card
+       * on the table.
+       *
+       * @private
+       * @param {number} direction +1/-1
+       * @return {function}
+       */
+      var createEndCardFocusHandler = function (direction) {
+        return function () {
+          var focusSet = false;
+          for (var i = 0; i < cards.length; i++) {
+            var j = (direction === -1 ? cards.length - (i + 1) : i);
+            if (!focusSet && !cards[j].isRemoved()) {
+              cards[j].setFocus();
+              focusSet = true;
+            }
+            else if (cards[j] === card) {
+              card.makeUntabbable();
+            }
+          }
+        };
+      };
+
+      // Register handlers for moving focus to first and last card
+      card.on('first', createEndCardFocusHandler(1));
+      card.on('last', createEndCardFocusHandler(-1));
+
       cards.push(card);
     };
 
@@ -320,16 +384,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       var cardParams = cardsToUse[i];
       if (MemoryGame.Card.isValid(cardParams)) {
         // Create first card
-        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
+        var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
 
         if (MemoryGame.Card.hasTwoImages(cardParams)) {
           // Use matching image for card two
-          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.matchAlt, parameters.l10n, cardParams.description, cardStyles);
           cardOne.hasTwoImages = cardTwo.hasTwoImages = true;
         }
         else {
           // Add two cards with the same image
-          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, cardParams.description, cardStyles);
+          cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.imageAlt, parameters.l10n, cardParams.description, cardStyles);
         }
 
         // Add cards to card list for shuffeling
@@ -366,7 +430,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         $('<div/>', {
           id: 'h5p-intro-' + numInstances,
           'class': 'h5p-memory-hidden-read',
-          html: 'Memory Game. Find the matching cards.', // TODO: l10n
+          html: parameters.l10n.label,
           appendTo: $container
         });
         $list.appendTo($container);
@@ -375,9 +439,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
           tabindex: '-1',
           appendTo: $container
         });
-        $('<div/>', {
+        $taskComplete = $('<div/>', {
-          'class': 'h5p-memory-hidden-read',
+          'class': 'h5p-memory-complete h5p-memory-hidden-read',
-          html: 'All of the cards have been found.', // TODO: l10n
+          html: parameters.l10n.done,
           appendTo: $bottom
         });
 
@@ -385,13 +449,13 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         // Add status bar
         var $status = $('<dl class="h5p-status">' +
-                        '<dt>' + parameters.l10n.timeSpent + '</dt>' +
+                        '<dt>' + parameters.l10n.timeSpent + ':</dt>' +
-                        '<dd class="h5p-time-spent">0:00</dd>' + // TODO: Add hidden dot ?
+                        '<dd class="h5p-time-spent"><time role="timer" datetime="PT0M0S">0:00</time><span class="h5p-memory-hidden-read">.</span></dd>' +
-                        '<dt>' + parameters.l10n.cardTurns + '</dt>' +
+                        '<dt>' + parameters.l10n.cardTurns + ':</dt>' +
-                        '<dd class="h5p-card-turns">0</dd>' +
+                        '<dd class="h5p-card-turns">0<span class="h5p-memory-hidden-read">.</span></dd>' +
                         '</dl>').appendTo($bottom);
 
-        timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
+        timer = new MemoryGame.Timer($status.find('time')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
         popup = new MemoryGame.Popup($container, parameters.l10n);
 

popup.js

@@ -13,16 +13,16 @@
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop" role="dialog"><div class="h5p-memory-top"></div><div class="h5p-memory-desc" tabindex="-1"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 
     // Hook up the close button
     $popup.find('.h5p-memory-close').on('click', function () {
-      self.close();
+      self.close(true);
     }).on('keypress', function (event) {
       if (event.which === 13 || event.which === 32) {
-        self.close();
+        self.close(true);
         event.preventDefault();
       }
     });
@@ -41,22 +41,26 @@
         $('<div class="h5p-memory-image"' + (styles ? styles : '') + '></div>').append(imgs[i]).appendTo($top);
       }
       $popup.show();
+      $desc.focus();
       closed = done;
     };
 
     /**
      * Close the popup.
+     *
+     * @param {boolean} refocus Sets focus after closing the dialog
      */
-    self.close = function () {
+    self.close = function (refocus) {
       if (closed !== undefined) {
         $popup.hide();
-        closed();
+        closed(refocus);
         closed = undefined;
       }
     };
 
     /**
      * Sets popup size relative to the card size
+     *
      * @param {number} fontSize
      */
     self.setSize = function (fontSize) {

semantics.json

@@ -169,6 +169,41 @@
         "name": "closeLabel",
         "type": "text",
         "default": "Close"
+      },
+      {
+        "label": "Game label",
+        "importance": "low",
+        "name": "label",
+        "type": "text",
+        "default": "Memory Game. Find the matching cards."
+      },
+      {
+        "label": "Game finished label",
+        "importance": "low",
+        "name": "done",
+        "type": "text",
+        "default": "All of the cards have been found."
+      },
+      {
+        "label": "Card indexing label",
+        "importance": "low",
+        "name": "cardPrefix",
+        "type": "text",
+        "default": "Card %num:"
+      },
+      {
+        "label": "Card unturned label",
+        "importance": "low",
+        "name": "cardUnturned",
+        "type": "text",
+        "default": "Unturned."
+      },
+      {
+        "label": "Card matched label",
+        "importance": "low",
+        "name": "cardMatched",
+        "type": "text",
+        "default": "Match found."
       }
     ]
   }

timer.js

@@ -28,6 +28,11 @@
 
       var minutes = Timer.extractTimeElement(time, 'minutes');
       var seconds = Timer.extractTimeElement(time, 'seconds') % 60;
+
+      // Update duration attribute
+      element.setAttribute('datetime', 'PT' + minutes + 'M' + seconds + 'S');
+
+      // Add leading zero
       if (seconds < 10) {
         seconds = '0' + seconds;
       }