Skip to content
Permalink
Browse files

Merge pull request #3039 from salesforce-ux/fix/input-fixed-text-acce…

…ssibility

Fix/input fixed text accessibility
  • Loading branch information...
SiTaggart committed Jan 30, 2018
2 parents 6de28b6 + 5ca99aa commit 25d51d71b8a08a1cf87bbf1f32b53a4275b31725
Showing with 18 additions and 2 deletions.
  1. +13 −0 ui/components/input/_doc.scss
  2. +5 −2 ui/components/input/base/example.jsx
@@ -29,6 +29,19 @@
*
* In some cases, the read-only field state is swapped and has no `<input>`. This is called `static` in the examples. In that case, don’t use a `<label>`. This provides better accessibility for screen readers and keyboard navigators. Instead, use a `<span>` with the `.slds-form-element__label` class. Instead of an `<input>`, use the `.slds-form-element__static` class inside the `.slds-form-element__control` wrapper.
*
* ##### Fixed Text
*
* When using the fixed text variants for prepending or appending symbols to inputs,
* please be sure to use `aria-labelledby` on the input, that points to the ids of the label,
* prepended text and appended text as a space separated list. The IDs must appear in that order:
* label, prepended, then appended.
*
* The reason we do this is to create a better association between the input and the supporting labels around it.
* By only using the traditional `label[for]` method, the fixed text is never read out in the context of editing
* the input value. With using the `aria-labelledby` attribute we can create a better label with all the
* visual labels associated with it, in a relevant order, that is read by assistive technology when the user
* needs it; when they're editing the value.
*
* @summary Text inputs are used for freeform data entry
*
* @base
@@ -23,6 +23,7 @@ export let FormElementLabel = props => (
<label
className={classNames('slds-form-element__label', props.className)}
htmlFor={props.id || inputId}
id={props.labelID}
>
{props.children}
</label>
@@ -274,12 +275,14 @@ export let examples = [
label: 'Fixed text',
element: (
<FormElement>
<FormElementLabel>Input Label</FormElementLabel>
<FormElementLabel labelID="fixed-text-label">
Input Label
</FormElementLabel>
<FormElementControl className="slds-input-has-fixed-addon">
<span className="slds-form-element__addon" id="fixed-text-addon-pre">
$
</span>
<Input aria-describedby="fixed-text-addon-pre fixed-text-addon-post" />
<Input aria-labelledby="fixed-text-label fixed-text-addon-pre fixed-text-addon-post" />
<span className="slds-form-element__addon" id="fixed-text-addon-post">
euro
</span>

0 comments on commit 25d51d7

Please sign in to comment.
You can’t perform that action at this time.