Merge pull request #1464 from salesforce-ux/check-error

Associate radios and checkboxes with their error messages

Author: stefsullrew

ui/components/forms/flavors/checkbox-alternate/index.react.example.jsx

@@ -37,7 +37,7 @@ let CheckboxGroup = props =>
 
 let Checkbox = props =>
   <span className={className(pf('button checkbox--button'), props.className)} htmlFor={props.id}>
-    <input name="checkbox" type="checkbox" id={props.id} disabled={props.disabled} />
+    <input name="checkbox" type="checkbox" id={props.id} disabled={props.disabled}  aria-describedby={props.errorId} />
     <label className={pf('checkbox--button__label')} htmlFor={props.id}>
       <span className={pf('checkbox--faux')}>
         {props.children}
@@ -66,13 +66,13 @@ let StateB = props =>
   <Demo>
     <Fieldset className={pf('has-error')}>
       <CheckboxGroup>
-        <Checkbox id="monday">Mon</Checkbox>
-        <Checkbox id="tuesday">Tue</Checkbox>
-        <Checkbox id="wednesday">Wed</Checkbox>
-        <Checkbox id="thursday">Thu</Checkbox>
-        <Checkbox id="friday">Fri</Checkbox>
+        <Checkbox errorId="error_01" id="monday">Mon</Checkbox>
+        <Checkbox errorId="error_01" id="tuesday">Tue</Checkbox>
+        <Checkbox errorId="error_01" id="wednesday">Wed</Checkbox>
+        <Checkbox errorId="error_01" id="thursday">Thu</Checkbox>
+        <Checkbox errorId="error_01" id="friday">Fri</Checkbox>
       </CheckboxGroup>
-      <div className={pf('form-element__help')}>This field is required</div>
+      <div id="error_01" className={pf('form-element__help')}>This field is required</div>
     </Fieldset>
   </Demo>;
 

ui/components/forms/flavors/checkbox-toggle/_index.scss

@@ -63,7 +63,7 @@
       }
     }
 
-     &:focus {
+    &:focus {
 
       & + .#{$css-prefix}checkbox--faux,
       & ~ .#{$css-prefix}checkbox--faux,

ui/components/forms/flavors/checkbox/index.react.example.jsx

@@ -50,7 +50,7 @@ export let Checkbox = props => {
   return (
     <span className={pf('checkbox')}>
       {props.children}
-      <input type="checkbox" name="options" id={ props.id ? props.id : uniqueId } disabled={props.disabled} defaultChecked={props.checked} />
+      <input type="checkbox" name="options" id={ props.id ? props.id : uniqueId } disabled={props.disabled} defaultChecked={props.checked} aria-describedby={props.errorId} />
       <label className={className(pf('checkbox__label'), props.className)} htmlFor={ props.id ? props.id : uniqueId }>
         <span className={pf('checkbox--faux')}></span>
         <span className={className(pf('form-element__label'), props.hideLabel ? pf('assistive-text') : null)}>{props.label}</span>
@@ -94,9 +94,9 @@ let ErrorState = props =>
   <Demo>
     <FormElement className={pf('is-required has-error')}>
       <FormElementControl>
-        <Checkbox label="Checkbox Label"><abbr className={pf('required')} title="required">*</abbr></Checkbox>
+        <Checkbox label="Checkbox Label" errorId="error_01"><abbr className={pf('required')} title="required">*</abbr></Checkbox>
       </FormElementControl>
-      <div className={pf('form-element__help')} iref="form-element__help">This field is required</div>
+      <div id="error_01" className={pf('form-element__help')} iref="form-element__help">This field is required</div>
     </FormElement>
   </Demo>;
 
@@ -136,10 +136,10 @@ let GroupError = props =>
     <Fieldset className={pf('is-required has-error')}>
       <Legend><abbr className={pf('required')} title="required">*</abbr> Checkbox Group Label</Legend>
       <FormElementControl>
-        <Checkbox label="Checkbox Label" checked />
-        <Checkbox label="Checkbox Label" />
+        <Checkbox errorId="error_01" label="Checkbox Label" checked />
+        <Checkbox errorId="error_01" label="Checkbox Label" />
       </FormElementControl>
-      <div className={pf('form-element__help')} iref="form-element__help">This field is required</div>
+      <div id="error_01" className={pf('form-element__help')} iref="form-element__help">This field is required</div>
     </Fieldset>
   </Demo>;
 

ui/components/forms/flavors/radio-group-alternate/index.react.example.jsx

@@ -37,7 +37,7 @@ let RadioGroup = props =>
 
 let Radio = props =>
   <span className={className(pf('button radio--button'), props.className)}>
-    <input name="radio" type="radio" id={props.id} disabled={props.disabled} />
+    <input name="radio" type="radio" id={props.id} disabled={props.disabled} aria-describedby={props.errorId} />
     <label className={pf('radio--button__label')} htmlFor={props.id}>
       <span className={pf('radio--faux')}>
         {props.children}
@@ -66,13 +66,13 @@ let StateB = props =>
   <Demo>
     <Fieldset className={pf('has-error')}>
       <RadioGroup>
-        <Radio id="monday">Mon</Radio>
-        <Radio id="tuesday">Tue</Radio>
-        <Radio id="wednesday">Wed</Radio>
-        <Radio id="thursday">Thu</Radio>
-        <Radio id="friday">Fri</Radio>
+        <Radio errorId="error_01" id="monday">Mon</Radio>
+        <Radio errorId="error_01" id="tuesday">Tue</Radio>
+        <Radio errorId="error_01" id="wednesday">Wed</Radio>
+        <Radio errorId="error_01" id="thursday">Thu</Radio>
+        <Radio errorId="error_01" id="friday">Fri</Radio>
       </RadioGroup>
-      <div className={pf('form-element__help')}>This field is required</div>
+      <div id="error_01" className={pf('form-element__help')}>This field is required</div>
     </Fieldset>
   </Demo>;
 

ui/components/forms/flavors/radio/index.react.example.jsx

@@ -41,7 +41,7 @@ export let Radio = props => {
 
   return (
     <span className={pf('radio')}>
-      <input type="radio" id={ uniqueId } name="options" disabled={props.disabled} defaultChecked={props.checked} />
+      <input type="radio" id={ uniqueId } name="options" disabled={props.disabled} defaultChecked={props.checked} aria-describedby={props.errorId} />
       <label className={pf('radio__label')} htmlFor={ uniqueId }>
         <span className={pf('radio--faux')}></span>
         <span className={pf('form-element__label')}>{props.children}</span>
@@ -81,10 +81,10 @@ let ErrorState = props =>
     <Fieldset className={pf('is-required has-error')}>
       <Legend><abbr className={pf('required')} title="required">*</abbr> Radio Group Label</Legend>
       <FormElementControl>
-        <Radio checked>Radio Label One</Radio>
-        <Radio>Radio Label Two</Radio>
+        <Radio errorId="error_01" checked>Radio Label One</Radio>
+        <Radio errorId="error_01">Radio Label Two</Radio>
       </FormElementControl>
-      <div className={pf('form-element__help')} iref="form-element__help">This field is required</div>
+      <div id="error_01" className={pf('form-element__help')} iref="form-element__help">This field is required</div>
     </Fieldset>
   </Demo>;