From d465ac9c772f78a4cea481e96b7b76f22b3a941c Mon Sep 17 00:00:00 2001 From: Devon Aleshire Date: Tue, 12 Jun 2018 07:08:56 -0400 Subject: [PATCH] Update to challenge verbiage for radio/checkbox (#17527) Updated create radio / create checkbox to identify that the input element is not required to be inside the label element. Tried to use soft language without making user think it was incorrect because current tests still require the input to be nested within the label element. Also, this is not necessarily incorrect syntax as noted at W3 - Forms - Labels: https://bit.ly/2sLiXvE. Nesting implies implicit association vs explicit association using for attribute. --- .../basic-html-and-html5.json | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/seed/challenges/01-responsive-web-design/basic-html-and-html5.json b/seed/challenges/01-responsive-web-design/basic-html-and-html5.json index 67c24f9b57..fa2f65dd90 100644 --- a/seed/challenges/01-responsive-web-design/basic-html-and-html5.json +++ b/seed/challenges/01-responsive-web-design/basic-html-and-html5.json @@ -2010,14 +2010,14 @@ "description": [ "You can use radio buttons for questions where you want the user to only give you one answer out of multiple options.", "Radio buttons are a type of input.", - "Each of your radio buttons should be nested within its own label element. Wrapping an input element inside of a label element makes the label text clickable.", - "All related radio buttons should have the same name attribute.", + "Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will autoatically associate the radio button input with the label element surrounding it.", + "All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.", "Here's an example of a radio button:", "
<label>
<input type=\"radio\" name=\"indoor-outdoor\">Indoor
</label>
", "It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element. For example:", "
<label for=\"indoor\">
<input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\">Indoor
</label>
", "
", - "Add a pair of radio buttons to your form. One should have the option of indoor and the other should have the option of outdoor. Both should share the name attribute of indoor-outdoor." + "Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of indoor and the other should have the option of outdoor. Both should share the name attribute of indoor-outdoor to create a radio group." ], "tests": [ { @@ -2145,8 +2145,9 @@ "description": [ "Forms commonly use checkboxes for questions that may have more than one answer.", "Checkboxes are a type of input", - "Each of your checkboxes should be nested within its own label element.", + "Each of your checkboxes can be nested within its own label element. By wrapping an input element inside of a label element it will autoatically associate the checkbox input with the label element surrounding it.", "All related checkbox inputs should have the same name attribute.", + "It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element.", "Here's an example of a checkbox:", "<label for=\"loving\"><input id=\"loving\" type=\"checkbox\" name=\"personality\"> Loving</label>", "
", @@ -2610,4 +2611,4 @@ } } ] -} \ No newline at end of file +}