Use KeyboardEvent.key over deprecated KeyboardEvent.keyCode in the Button component

[36degrees]

KeyboardEvent.keyCode is deprecated. All of the browsers that now run our JavaScript support the modern KeyboardEvent.key property.

Update the button component to using KeyboardEvent.key instead, removing the KEY_SPACE constant.

Part of #4709

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.47 KiB
dist/govuk-frontend-development.min.js	38.56 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.67 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.94 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.46 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.54 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	70.26 KiB	36.81 KiB
accordion.mjs	21.67 KiB	12.42 KiB
button.mjs	4.67 KiB	2.16 KiB
character-count.mjs	21.24 KiB	9.45 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	6.57 KiB	2.92 KiB
exit-this-page.mjs	16.08 KiB	8.88 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	4.93 KiB	2.09 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for 6fce6ed

[github-actions]

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 13886ee98..b85c7040f 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -360,7 +360,7 @@ class Button extends GOVUKFrontendComponent {
     }
     handleKeyDown(t) {
         const e = t.target;
-        32 === t.keyCode && e instanceof HTMLElement && "button" === e.getAttribute("role") && (t.preventDefault(), e.click())
+        " " === t.key && e instanceof HTMLElement && "button" === e.getAttribute("role") && (t.preventDefault(), e.click())
     }
     debounce(t) {
         if (this.config.preventDoubleClick) return this.debounceFormSubmitTimer ? (t.preventDefault(), !1) : void(this.debounceFormSubmitTimer = window.setTimeout((() => {

---

Action run for 6fce6ed

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index 514baf6ba..51f0fc054 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -733,7 +733,6 @@
    *   'Show' button's accessible name when a section is expanded.
    */
 
-  const KEY_SPACE = 32;
   const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 
   /**
@@ -765,7 +764,7 @@
     }
     handleKeyDown(event) {
       const $target = event.target;
-      if (event.keyCode !== KEY_SPACE) {
+      if (event.key !== ' ') {
         return;
       }
       if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index c52909c71..4bd2f966d 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -727,7 +727,6 @@ const helper = {
  *   'Show' button's accessible name when a section is expanded.
  */
 
-const KEY_SPACE = 32;
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 
 /**
@@ -759,7 +758,7 @@ class Button extends GOVUKFrontendComponent {
   }
   handleKeyDown(event) {
     const $target = event.target;
-    if (event.keyCode !== KEY_SPACE) {
+    if (event.key !== ' ') {
       return;
     }
     if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
diff --git a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
index 5491951c7..e8db70624 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
@@ -122,7 +122,6 @@
     }
   }
 
-  const KEY_SPACE = 32;
   const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 
   /**
@@ -154,7 +153,7 @@
     }
     handleKeyDown(event) {
       const $target = event.target;
-      if (event.keyCode !== KEY_SPACE) {
+      if (event.key !== ' ') {
         return;
       }
       if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
diff --git a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
index c6f41e246..5e00ee6d9 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
@@ -116,7 +116,6 @@ class GOVUKFrontendComponent {
   }
 }
 
-const KEY_SPACE = 32;
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 
 /**
@@ -148,7 +147,7 @@ class Button extends GOVUKFrontendComponent {
   }
   handleKeyDown(event) {
     const $target = event.target;
-    if (event.keyCode !== KEY_SPACE) {
+    if (event.key !== ' ') {
       return;
     }
     if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
diff --git a/packages/govuk-frontend/dist/govuk/components/button/button.mjs b/packages/govuk-frontend/dist/govuk/components/button/button.mjs
index 642d4a343..541e56fab 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/button.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/button/button.mjs
@@ -3,7 +3,6 @@ import { normaliseDataset } from '../../common/normalise-dataset.mjs';
 import { ElementError } from '../../errors/index.mjs';
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
-const KEY_SPACE = 32;
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 
 /**
@@ -35,7 +34,7 @@ class Button extends GOVUKFrontendComponent {
   }
   handleKeyDown(event) {
     const $target = event.target;
-    if (event.keyCode !== KEY_SPACE) {
+    if (event.key !== ' ') {
       return;
     }
     if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {

---

Action run for 6fce6ed