Fix invalid mergeAriaAttributeValues output when multiple ID references supplied

common/changes/@uifabric/utilities/keco-space-delimit-aria-attrs_2019-02-25-22-13.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "ARIA: mergeAriaAttributeValues should produce space-delimited output by default",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "keco@microsoft.com"
+}

common/changes/office-ui-fabric-react/keco-space-delimit-aria-attrs_2019-02-25-22-13.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ARIA: Update calls to mergeAriaAttributeValues to no longer explicitly supply output element id padding.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "keco@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx

@@ -385,7 +385,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
                 readOnly={disabled || !allowFreeform}
                 aria-labelledby={label && id + '-label'}
                 aria-label={ariaLabel && !label ? ariaLabel : undefined}
-                aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, ' ', keytipAttributes['aria-describedby'])}
+                aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby'])}
                 aria-activedescendant={this._getAriaActiveDescentValue()}
                 aria-disabled={disabled}
                 aria-owns={isOpen ? id + '-list' : undefined}

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx

@@ -186,7 +186,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
                 aria-valuetext={ariaValueText ? ariaValueText : isNaN(Number(value)) ? value : undefined}
                 aria-valuemin={min}
                 aria-valuemax={max}
-                aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, ' ', keytipAttributes['aria-describedby'])}
+                aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby'])}
                 onBlur={this._onBlur}
                 ref={this._input}
                 onFocus={this._onFocus}

packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Button.Example.tsx.shot

@@ -124,7 +124,7 @@ exports[`Component Examples renders Keytips.Button.Example.tsx correctly 1`] = `
     </div>
   </button>
   <button
-    aria-describedby="id__4 ktp-layer-id ktp-1-b"
+    aria-describedby="id__4  ktp-layer-id ktp-1-b"
     aria-labelledby="id__3"
     className=
         ms-Button

packages/utilities/src/aria.test.ts

@@ -69,7 +69,7 @@ describe('aria utils tests', () => {
         cases: [
           {
             args: ['arg1', 'arg2'],
-            expected: 'arg1arg2'
+            expected: 'arg1 arg2'
           },
           {
             args: ['arg1', undefined],
@@ -84,7 +84,7 @@ describe('aria utils tests', () => {
             expected: 'arg1'
           },
           {
-            args: ['', 'arg1 ', 'arg2 '],
+            args: ['', 'arg1', 'arg2 '],
             expected: 'arg1 arg2'
           }
         ]

packages/utilities/src/aria.ts

@@ -2,14 +2,12 @@
  * ARIA helper to concatenate attributes, returning undefined if all attributes
  * are undefined. (Empty strings are not a valid ARIA attribute value.)
  *
- * NOTE: This function will NOT insert whitespace between provided attributes.
- *
  * @param ariaAttributes - ARIA attributes to merge
  */
 export function mergeAriaAttributeValues(...ariaAttributes: (string | undefined)[]): string | undefined {
   const mergedAttribute = ariaAttributes
     .filter((arg: string | undefined) => arg !== undefined && arg !== null)
-    .join('')
+    .join(' ')
     .trim();
   return mergedAttribute === '' ? undefined : mergedAttribute;
 }