From 6c232a1d370fabd5856cfbd93242e056e4372a0c Mon Sep 17 00:00:00 2001 From: Lee Rowlands Date: Sat, 9 Oct 2021 18:07:01 +1000 Subject: [PATCH] Use a fieldset for a11y sake --- blog/react-radio-button/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/blog/react-radio-button/index.md b/blog/react-radio-button/index.md index cf79efe4..d6eb057b 100644 --- a/blog/react-radio-button/index.md +++ b/blog/react-radio-button/index.md @@ -92,7 +92,7 @@ const RadioButton = ({ label, value, onChange }) => { Our Radio Button component is a [reusable component](/react-reusable-components) now. For example, if you would give your input field some [CSS style in React](/react-css-styling), every Radio Button component which is used in your React project would use the same style. -If you would want to create a radio button group now, you could just use multiple Radio Button components side by side and maybe style them with some border and some alignment, so that a user perceives them as a group of radio buttons: +If you would want to create a radio button group now, you could just use multiple Radio Button components side by side inside a fieldset element, with a legend so that the user (and more importantly, screen readers) perceive them as a group of options.: ```javascript const App = () => { @@ -108,7 +108,8 @@ const App = () => { }; return ( -
+
+ What sort of pet person are you? { value={dogPerson} onChange={handleDogChange} /> -
+ ); }; ``` @@ -155,4 +156,4 @@ const App = () => { }; ``` -That's is it for creating a Radio Button component in React. If you are a beginner in React, I hope this tutorial helped you to understand some concepts and patterns! \ No newline at end of file +That's is it for creating a Radio Button component in React. If you are a beginner in React, I hope this tutorial helped you to understand some concepts and patterns!