Invalid ARIA attributes: Fix empty values

common/changes/@uifabric/utilities/4985-invalid-aria-attributes_2018-05-30-23-17.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Add utility function to help merge ARIA attributes.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "jagore@microsoft.com"
+}

common/changes/office-ui-fabric-react/4985-invalid-aria-attributes_2018-05-30-23-17.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Prevent invalid empty ARIA values from being output.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jagore@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap

@@ -419,11 +419,11 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 2 1`] = `
                 }
           >
             <button
-              aria-describedby={null}
+              aria-describedby={undefined}
               aria-expanded={false}
               aria-haspopup={true}
               aria-label={undefined}
-              aria-labelledby={null}
+              aria-labelledby={undefined}
               aria-owns={null}
               aria-pressed={undefined}
               className=
@@ -1138,11 +1138,11 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = `
                 }
           >
             <button
-              aria-describedby={null}
+              aria-describedby={undefined}
               aria-expanded={false}
               aria-haspopup={true}
               aria-label={undefined}
-              aria-labelledby={null}
+              aria-labelledby={undefined}
               aria-owns={null}
               aria-pressed={undefined}
               className=
@@ -1505,11 +1505,11 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 5 1`] = `
                 }
           >
             <button
-              aria-describedby={null}
+              aria-describedby={undefined}
               aria-expanded={false}
               aria-haspopup={true}
               aria-label={undefined}
-              aria-labelledby={null}
+              aria-labelledby={undefined}
               aria-owns={null}
               aria-pressed={undefined}
               className=
@@ -1712,11 +1712,11 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 6 1`] = `
                 }
           >
             <button
-              aria-describedby={null}
+              aria-describedby={undefined}
               aria-expanded={false}
               aria-haspopup={true}
               aria-label={undefined}
-              aria-labelledby={null}
+              aria-labelledby={undefined}
               aria-owns={null}
               aria-pressed={undefined}
               className=

packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx

@@ -9,7 +9,8 @@ import {
   getNativeProps,
   KeyCodes,
   createRef,
-  css
+  css,
+  mergeAriaAttributeValues
 } from '../../Utilities';
 import { Icon } from '../../Icon';
 import { DirectionalHint } from '../../common/DirectionalHint';
@@ -142,29 +143,27 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       ]);
 
     // Check for ariaDescription, secondaryText or aria-describedby in the native props to determine source of aria-describedby
-    // otherwise default to null.
-    let ariaDescribedBy;
+    // otherwise default to undefined so property does not appear in output.
+    let ariaDescribedBy = undefined;
     if (ariaDescription) {
       ariaDescribedBy = _ariaDescriptionId;
     } else if (secondaryText) {
       ariaDescribedBy = _descriptionId;
     } else if ((nativeProps as any)['aria-describedby']) {
       ariaDescribedBy = (nativeProps as any)['aria-describedby'];
-    } else {
-      ariaDescribedBy = null;
     }
 
     // If an explicit ariaLabel is given, use that as the label and we're done.
     // If an explicit aria-labelledby is given, use that and we're done.
     // If any kind of description is given (which will end up as an aria-describedby attribute),
     // set the labelledby element. Otherwise, the button is labeled implicitly by the descendent
     // text on the button (if it exists). Never set both aria-label and aria-labelledby.
-    let ariaLabelledBy = null;
+    let ariaLabelledBy = undefined;
     if (!ariaLabel) {
       if ((nativeProps as any)['aria-labelledby']) {
         ariaLabelledBy = (nativeProps as any)['aria-labelledby'];
       } else if (ariaDescribedBy) {
-        ariaLabelledBy = text ? _labelId : null;
+        ariaLabelledBy = text ? _labelId : undefined;
       }
     }
 
@@ -514,7 +513,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         'data-is-focusable': false
       }
     );
-    const ariaDescribedBy = buttonProps.ariaDescription || '';
+    const ariaDescribedBy = buttonProps.ariaDescription;
 
     if (keytipProps && menuProps) {
       keytipProps = {
@@ -534,7 +533,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
             aria-haspopup={ true }
             aria-expanded={ this._isExpanded }
             aria-pressed={ this.props.checked }
-            aria-describedby={ ariaDescribedBy + (keytipAttributes['aria-describedby'] || '') }
+            aria-describedby={ mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby']) }
             className={ classNames && classNames.splitButtonContainer }
             onKeyDown={ this._onSplitButtonContainerKeyDown }
             onTouchStart={ this._onTouchStart }

packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.deprecated.test.tsx.snap

@@ -2,9 +2,9 @@
 
 exports[`Button renders ActionButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -116,11 +116,11 @@ exports[`Button renders ActionButton correctly 1`] = `
 
 exports[`Button renders CommandBarButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-expanded={false}
   aria-haspopup={true}
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-owns={null}
   aria-pressed={undefined}
   className=
@@ -293,7 +293,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
 <button
   aria-describedby="id__14"
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -432,9 +432,9 @@ exports[`Button renders CompoundButton correctly 1`] = `
 
 exports[`Button renders DefaultButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -543,9 +543,9 @@ exports[`Button renders DefaultButton correctly 1`] = `
 
 exports[`Button renders IconButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-label="Emoji"
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -659,7 +659,7 @@ exports[`Button renders a DefaultButton with a keytip correctly 1`] = `
 <button
   aria-describedby=" ktp-layer-id ktp-a"
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button

packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -2,9 +2,9 @@
 
 exports[`Button renders ActionButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -116,11 +116,11 @@ exports[`Button renders ActionButton correctly 1`] = `
 
 exports[`Button renders CommandBarButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-expanded={false}
   aria-haspopup={true}
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-owns={null}
   aria-pressed={undefined}
   className=
@@ -293,7 +293,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
 <button
   aria-describedby="id__14"
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -432,9 +432,9 @@ exports[`Button renders CompoundButton correctly 1`] = `
 
 exports[`Button renders DefaultButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -543,9 +543,9 @@ exports[`Button renders DefaultButton correctly 1`] = `
 
 exports[`Button renders IconButton correctly 1`] = `
 <button
-  aria-describedby={null}
+  aria-describedby={undefined}
   aria-label="Emoji"
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button
@@ -659,7 +659,7 @@ exports[`Button renders a DefaultButton with a keytip correctly 1`] = `
 <button
   aria-describedby=" ktp-layer-id ktp-a"
   aria-label={undefined}
-  aria-labelledby={null}
+  aria-labelledby={undefined}
   aria-pressed={undefined}
   className=
       ms-Button

packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx

@@ -4,7 +4,8 @@ import {
   getId,
   createRef,
   customizable,
-  classNamesFunction
+  classNamesFunction,
+  mergeAriaAttributeValues
 } from '../../Utilities';
 import { Icon } from '../../Icon';
 import {
@@ -115,7 +116,7 @@ export class CheckboxBase extends BaseComponent<ICheckboxProps, ICheckboxState>
             aria-disabled={ disabled }
             aria-label={ ariaLabel }
             aria-labelledby={ ariaLabelledBy }
-            aria-describedby={ (ariaDescribedBy || '') + (keytipAttributes['aria-describedby'] || '') }
+            aria-describedby={ mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby']) }
             aria-posinset={ ariaPositionInSet }
             aria-setsize={ ariaSetSize }
           >

packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.deprecated.test.tsx.snap

@@ -155,10 +155,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       value="testValue"
     />
     <button
-      aria-describedby={null}
+      aria-describedby={undefined}
       aria-hidden={true}
       aria-label={undefined}
-      aria-labelledby={null}
+      aria-labelledby={undefined}
       aria-pressed={false}
       checked={false}
       className=
@@ -441,10 +441,10 @@ exports[`ComboBox renders a ComboBox with a Keytip correctly 1`] = `
       value=""
     />
     <button
-      aria-describedby={null}
+      aria-describedby={undefined}
       aria-hidden={true}
       aria-label={undefined}
-      aria-labelledby={null}
+      aria-labelledby={undefined}
       aria-pressed={false}
       checked={false}
       className=

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

@@ -154,10 +154,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       value="testValue"
     />
     <button
-      aria-describedby={null}
+      aria-describedby={undefined}
       aria-hidden={true}
       aria-label={undefined}
-      aria-labelledby={null}
+      aria-labelledby={undefined}
       aria-pressed={false}
       checked={false}
       className=
@@ -440,10 +440,10 @@ exports[`ComboBox renders a ComboBox with a Keytip correctly 1`] = `
       value=""
     />
     <button
-      aria-describedby={null}
+      aria-describedby={undefined}
       aria-hidden={true}
       aria-label={undefined}
-      aria-labelledby={null}
+      aria-labelledby={undefined}
       aria-pressed={false}
       checked={false}
       className=

packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap

@@ -56,9 +56,9 @@ exports[`CommandBar renders commands correctly 1`] = `
           className="ms-OverflowSet-item"
         >
           <button
-            aria-describedby={null}
+            aria-describedby={undefined}
             aria-label={undefined}
-            aria-labelledby={null}
+            aria-labelledby={undefined}
             aria-posinset={1}
             aria-pressed={undefined}
             aria-setsize={2}
@@ -174,9 +174,9 @@ exports[`CommandBar renders commands correctly 1`] = `
           className="ms-OverflowSet-item"
         >
           <button
-            aria-describedby={null}
+            aria-describedby={undefined}
             aria-label={undefined}
-            aria-labelledby={null}
+            aria-labelledby={undefined}
             aria-posinset={2}
             aria-pressed={undefined}
             aria-setsize={2}

packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap

@@ -56,9 +56,9 @@ exports[`CommandBar renders commands correctly 1`] = `
           className="ms-OverflowSet-item"
         >
           <button
-            aria-describedby={null}
+            aria-describedby={undefined}
             aria-label={undefined}
-            aria-labelledby={null}
+            aria-labelledby={undefined}
             aria-posinset={1}
             aria-pressed={undefined}
             aria-setsize={2}
@@ -173,9 +173,9 @@ exports[`CommandBar renders commands correctly 1`] = `
           className="ms-OverflowSet-item"
         >
           <button
-            aria-describedby={null}
+            aria-describedby={undefined}
             aria-label={undefined}
-            aria-labelledby={null}
+            aria-labelledby={undefined}
             aria-posinset={2}
             aria-pressed={undefined}
             aria-setsize={2}