diff --git a/ui/components/input/_doc.scss b/ui/components/input/_doc.scss index 38f800c52e..72f0129a69 100644 --- a/ui/components/input/_doc.scss +++ b/ui/components/input/_doc.scss @@ -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 diff --git a/ui/components/input/base/example.jsx b/ui/components/input/base/example.jsx index 7b45e7b167..8baa1e0d95 100644 --- a/ui/components/input/base/example.jsx +++ b/ui/components/input/base/example.jsx @@ -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>