Skip to content

Commit 25b43f9

Browse files
committed
Renders label correctly if both label and assistiveText are set
Also, throws a console warning stating that only one is needed
1 parent d8883bf commit 25b43f9

File tree

2 files changed

+16
-6
lines changed

2 files changed

+16
-6
lines changed

components/forms/input/check-props.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
1111
/* eslint-disable import/no-mutable-exports */
1212

1313
import oneOfRequiredProperty from '../../../utilities/warning/one-of-required-property';
14+
import onlyOneOfProperties from '../../../utilities/warning/only-one-of-properties';
1415

1516
let checkProps = function () {};
1617

@@ -21,6 +22,10 @@ if (process.env.NODE_ENV !== 'production') {
2122
assistiveText: props.assistiveText,
2223
label: props.label
2324
});
25+
onlyOneOfProperties(COMPONENT, {
26+
assistiveText: props.assistiveText,
27+
label: props.label
28+
});
2429
/* eslint-enable max-len */
2530
};
2631
}

components/forms/input/index.jsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ const Input = React.createClass({
191191
const hasIcon = iconCategory && iconName;
192192

193193
// One of these is required to pass accessibility tests
194-
const labelText = assistiveText || label;
194+
const labelText = label || assistiveText;
195195

196196
return (
197197
<div
@@ -201,14 +201,19 @@ const Input = React.createClass({
201201
},
202202
className)}
203203
>
204-
{labelText && (!readOnly
205-
? <label className={classNames('slds-form-element__label', { 'slds-assistive-text': assistiveText })} htmlFor={id}>
204+
{labelText && (readOnly
205+
? <span
206+
className={classNames('slds-form-element__label', { 'slds-assistive-text': assistiveText && !label })}
207+
>
208+
{labelText}
209+
</span>
210+
: <label
211+
className={classNames('slds-form-element__label', { 'slds-assistive-text': assistiveText && !label })} htmlFor={id}
212+
>
206213
{required && <abbr className="slds-required" title="required">*</abbr>}
207214
{labelText}
208215
</label>
209-
: <span className={classNames('slds-form-element__label', { 'slds-assistive-text': assistiveText })}>
210-
{labelText}
211-
</span>)}
216+
)}
212217
<div
213218
className={classNames('slds-form-element__control', hasIcon && [
214219
'slds-input-has-icon',

0 commit comments

Comments
 (0)