Added keyboard accessibility for checkboxes.

Updated Components to improve checkbox accessibility.

.github/workflows/Build.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: gh-pages
           path: gh-pages
@@ -33,8 +33,7 @@ jobs:
         run: composer validate
 
       - name: Cache dependencies
-        id: composer-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: vendor
           key: php-${{ hashFiles('composer.lock') }}

.github/workflows/Storybook.yml

@@ -10,9 +10,9 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           repository: 250/Storybook
           path: sb
@@ -24,8 +24,7 @@ jobs:
           php-version: 8.2
 
       - name: Cache PHP dependencies
-        id: composer-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: vendor
           key: php-${{ hashFiles('composer.lock') }}

assets/js/250.ts

@@ -17,7 +17,7 @@ class S250 {
 
         // UI stuff.
         S250.initRatingColourGradient();
-        Checkbox.initTristateCheckboxes();
+        Checkbox.initCheckboxes();
         S250.initChevrons();
 
         // User stuff.

assets/js/Checkbox.ts

@@ -11,7 +11,7 @@ declare global {
 }
 
 export default class Checkbox {
-    public static initTristateCheckboxes() {
+    public static initCheckboxes() {
         document.querySelectorAll<HTMLDivElement>('[role=checkbox]').forEach(div => {
             const
                 radios = [...div.querySelectorAll('input')],
@@ -57,8 +57,25 @@ export default class Checkbox {
                 }
             });
 
-            // Cycle states when user presses [spacebar].
-            div.addEventListener('keydown', ev => ev.key === ' ' && go2(++currentState % 3));
+            // Cycle states when pressing [spacebar].
+            div.addEventListener('keydown', ev => {
+                if (ev.key === ' ') {
+                    go2(++currentState % 3);
+
+                    ev.preventDefault();
+                }
+            });
         });
+
+        // Toggle checked state for binary checkboxes when pressing [spacebar].
+        document.querySelectorAll<HTMLElement>('label[tabindex]:has(input[type=checkbox])').forEach(label =>
+            label.addEventListener('keydown', ev => {
+                if (ev.key === ' ') {
+                    label.click();
+
+                    ev.preventDefault();
+                }
+            })
+        );
     }
 }

storybook/stories/Checkbox.stories.ts

@@ -3,7 +3,7 @@ import template from '@components/checkbox.twig';
 import Checkbox from '../../assets/js/Checkbox';
 
 // Only respond to Storybook emulated DOM loaded event to prevent double-loading.
-addEventListener('DOMContentLoaded', e => e.isTrusted || Checkbox.initTristateCheckboxes());
+addEventListener('DOMContentLoaded', e => e.isTrusted || Checkbox.initCheckboxes());
 
 export default {
     title: 'Form/Checkbox',