Merge pull request #18226 from Yoast/P1-1270-no-label-formfield-a11y

P1 1270 no label formfield a11y

Author: igorschoester

packages/ui-library/src/components/checkbox-group/index.js

@@ -62,7 +62,7 @@ CheckboxGroup.propTypes = {
 	id: PropTypes.string.isRequired,
 	name: PropTypes.string.isRequired,
 	values: PropTypes.arrayOf( PropTypes.string ),
-	label: PropTypes.node,
+	label: PropTypes.node.isRequired,
 	options: PropTypes.arrayOf( PropTypes.shape( {
 		value: PropTypes.string.isRequired,
 		label: PropTypes.string.isRequired,
@@ -74,7 +74,6 @@ CheckboxGroup.propTypes = {
 CheckboxGroup.defaultProps = {
 	children: null,
 	values: [],
-	label: null,
 	className: "",
 };
 

packages/ui-library/src/components/checkbox-group/stories.js

@@ -41,6 +41,7 @@ Factory.args = {
 		{ value: "3", label: "Option 3" },
 		{ value: "4", label: "Option 4" },
 	],
+	label: "A Checkbox Group",
 };
 
 export const WithLabelAndDescription = Template.bind();

packages/ui-library/src/components/radio-group/index.js

@@ -74,7 +74,7 @@ RadioGroup.propTypes = {
 	id: PropTypes.string.isRequired,
 	name: PropTypes.string.isRequired,
 	value: PropTypes.string.isRequired,
-	label: PropTypes.node,
+	label: PropTypes.node.isRequired,
 	options: PropTypes.arrayOf( PropTypes.shape( {
 		value: PropTypes.string.isRequired,
 		label: PropTypes.string.isRequired,
@@ -86,7 +86,6 @@ RadioGroup.propTypes = {
 
 RadioGroup.defaultProps = {
 	children: null,
-	label: null,
 	variant: "default",
 	className: "",
 };

packages/ui-library/src/components/radio-group/stories.js

@@ -43,6 +43,7 @@ Factory.args = {
 		{ value: "3", label: "Option 3" },
 		{ value: "4", label: "Option 4" },
 	],
+	label: "A Radio Group",
 };
 
 export const Variants = ( args ) => (
@@ -57,14 +58,15 @@ export const Variants = ( args ) => (
 				{ value: "3", label: "Option 3" },
 				{ value: "4", label: "Option 4" },
 			] }
+			label="Default Radio Group"
 			onChange={ noop }
 		/>
 		<hr />
 		<RadioGroup
 			id="radio-group-2"
 			name="name-2"
 			value="2"
-			label="Radio group with a label"
+			label="Inline-block Radio Group"
 			options={ [
 				{ value: "1", label: "1" },
 				{ value: "2", label: "2" },

packages/ui-library/src/components/select-field/index.js

@@ -54,7 +54,7 @@ SelectField.propTypes = {
 	id: PropTypes.string.isRequired,
 	name: PropTypes.string.isRequired,
 	value: PropTypes.string,
-	label: PropTypes.node,
+	label: PropTypes.node.isRequired,
 	options: PropTypes.arrayOf( PropTypes.shape( {
 		value: PropTypes.string.isRequired,
 		label: PropTypes.string.isRequired,
@@ -67,7 +67,6 @@ SelectField.propTypes = {
 SelectField.defaultProps = {
 	children: null,
 	value: undefined,
-	label: null,
 	error: null,
 	className: "",
 };

packages/ui-library/src/components/select-field/stories.js

@@ -44,6 +44,7 @@ Factory.args = {
 		{ value: "3", label: "Option 3" },
 		{ value: "4", label: "Option 4" },
 	],
+	label: "A Select Field",
 };
 
 export const WithLabelAndDescription = Template.bind( {} );

packages/ui-library/src/components/text-field/index.js

@@ -54,14 +54,13 @@ const TextField = ( {
 TextField.propTypes = {
 	id: PropTypes.string.isRequired,
 	onChange: PropTypes.func.isRequired,
-	label: PropTypes.node,
+	label: PropTypes.node.isRequired,
 	className: PropTypes.string,
 	description: PropTypes.node,
 	error: PropTypes.node,
 };
 
 TextField.defaultProps = {
-	label: null,
 	className: "",
 	description: null,
 	error: null,

packages/ui-library/src/components/text-field/stories.js

@@ -20,6 +20,7 @@ export default {
 	args: {
 		id: "input-field",
 		onChange: noop,
+		label: "A Text Field",
 	},
 };
 

packages/ui-library/src/components/textarea-field/index.js

@@ -51,14 +51,13 @@ const TextareaField = ( {
 
 TextareaField.propTypes = {
 	id: PropTypes.string.isRequired,
-	label: PropTypes.node,
+	label: PropTypes.node.isRequired,
 	className: PropTypes.string,
 	description: PropTypes.node,
 	error: PropTypes.node,
 };
 
 TextareaField.defaultProps = {
-	label: null,
 	className: "",
 	description: null,
 	error: null,

packages/ui-library/src/components/textarea-field/stories.js

@@ -17,6 +17,7 @@ export default {
 	},
 	args: {
 		id: "textarea-field",
+		label: "A Textarea Field",
 	},
 };