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

Fix/input fixed text accessibility

Author: SiTaggart

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

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>