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

@@ -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>

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"