From 6f68f181bc206de8a48a202449bc3f8aa6f9964c Mon Sep 17 00:00:00 2001
From: meetup-oleksandr-dudiuk
 <87324157+meetup-oleksandr-dudiuk@users.noreply.github.com>
Date: Fri, 6 Oct 2023 14:31:04 +0300
Subject: [PATCH] Pro Dashboard Form elements must have labels [sc-74561]
 (#890)

* Pro Dashboard Form elements must have labels [sc-74561]

* some changes

* improvements

* remove extra space
---
 src/forms/Checkbox.jsx                         | 6 ++++--
 src/forms/__snapshots__/checkbox.test.jsx.snap | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/forms/Checkbox.jsx b/src/forms/Checkbox.jsx
index 518bb1e6..f988f4a4 100644
--- a/src/forms/Checkbox.jsx
+++ b/src/forms/Checkbox.jsx
@@ -39,7 +39,7 @@ export class Checkbox extends React.PureComponent {
 	}
 
 	handleKeyPress = e => {
-		if (e.key === 'Enter') {
+		if (e.key === ' ') {
 			this.props.onChange && this.props.onChange(e);
 
 			if (this.props.controlled) {
@@ -86,7 +86,6 @@ export class Checkbox extends React.PureComponent {
 					className="checkbox"
 					role="checkbox"
 					aria-checked={stateChecked}
-					aria-label="checkbox"
 					tabIndex={0}
 					onKeyPress={this.handleKeyPress}
 				>
@@ -102,6 +101,9 @@ export class Checkbox extends React.PureComponent {
 					onChange={this.onChange}
 					readOnly={!this.onChange || disabled}
 					name={name}
+					aria-label={
+						typeof label === 'string' ? `${label} - checkbox` : 'checkbox'
+					}
 					value={`${value}`}
 				/>
 				<span>{label}</span>
diff --git a/src/forms/__snapshots__/checkbox.test.jsx.snap b/src/forms/__snapshots__/checkbox.test.jsx.snap
index e154ab83..0bae2a35 100644
--- a/src/forms/__snapshots__/checkbox.test.jsx.snap
+++ b/src/forms/__snapshots__/checkbox.test.jsx.snap
@@ -7,7 +7,6 @@ exports[`Checkbox basic renders checked checkbox 1`] = `
 >
   <span
     aria-checked={true}
-    aria-label="checkbox"
     className="checkbox"
     data-swarm-checkbox-field="checked"
     onKeyPress={[Function]}
@@ -20,6 +19,7 @@ exports[`Checkbox basic renders checked checkbox 1`] = `
     />
   </span>
   <input
+    aria-label="Hello! - checkbox"
     checked={true}
     id="hello"
     name="greeting"
@@ -40,13 +40,13 @@ exports[`Checkbox basic renders unchecked checkbox 1`] = `
 >
   <span
     aria-checked={false}
-    aria-label="checkbox"
     className="checkbox"
     onKeyPress={[Function]}
     role="checkbox"
     tabIndex={0}
   />
   <input
+    aria-label="Hello! - checkbox"
     checked={false}
     id="hello"
     name="greeting"