Merge pull request #319 from acs3ss/accessibility-tests

Add accessibility tests

.github/dependabot.yml

@@ -10,6 +10,10 @@ updates:
       typescript-eslint:
         patterns:
         - "@typescript-eslint/*"
+      playwright:
+        patterns:
+        - "@playwright/*"
+        - "playwright"
 
   - package-ecosystem: "github-actions"
     directory: "/"

package.json

@@ -27,6 +27,7 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.7.3",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@playwright/test": "^1.36.1",
     "@testing-library/vue": "^7.0.0",
@@ -40,7 +41,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.15.1",
     "jsdom": "^22.1.0",
-    "playwright": "^1.35.1",
+    "playwright": "^1.36.1",
     "prettier": "^2.8.8",
     "sass": "^1.63.6",
     "typescript": "^5.1.6",

src/App.vue

@@ -1,6 +1,8 @@
 <template>
-  <Hand :hand="hand" @hand-updated="updateHand" />
-  <Solutions :solutions="solutions" @redraw="redraw" />
+  <main>
+    <Hand :hand="hand" @hand-updated="updateHand" />
+    <Solutions :solutions="solutions" @redraw="redraw" />
+  </main>
   <footer class="text-center mt-auto mb-3">
     <small>
       By

src/ReloadPrompt.vue

@@ -17,12 +17,14 @@ const { needRefresh, updateServiceWorker } = useRegisterSW({
   <div
     v-if="needRefresh"
     class="toast position-fixed bottom-0 end-0 m-3 rounded show"
-    role="alert"
-    aria-live="assertive"
+    role="dialog"
+    aria-labelledby="toast-title"
+    aria-describedby="toast-description"
+    aria-live="polite"
     aria-atomic="true"
   >
     <div class="toast-header">
-      <strong class="me-auto">Updates available</strong>
+      <strong id="toast-title" class="me-auto">Updates available</strong>
       <button
         type="button"
         class="btn-close"
@@ -31,7 +33,9 @@ const { needRefresh, updateServiceWorker } = useRegisterSW({
       ></button>
     </div>
     <div class="toast-body">
-      <div class="mb-3">Reload to get the latest changes!</div>
+      <div id="toast-description" class="mb-3">
+        Reload to get the latest changes!
+      </div>
       <button
         type="button"
         class="btn btn-primary"