Added consistent aria levels to any role='heading' (#5782)

* Removed heading role from combo and contextualmenus, updated dialog and panel with aria-level 2

* Changefile

common/changes/office-ui-fabric-react/update-aria-level_2018-08-02-22-33.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Removed unnecessary heading roles, and added aria-level to those requiring them",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

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

@@ -1120,7 +1120,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     const { onRenderOption = this._onRenderOptionContent } = this.props;
 
     return (
-      <div key={item.key} className={this._classNames.header} role="heading">
+      <div key={item.key} className={this._classNames.header}>
         {onRenderOption(item, this._onRenderOptionContent)}
       </div>
     );

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

@@ -302,12 +302,7 @@ export class ContextualMenuBase extends BaseComponent<IContextualMenuProps, ICon
             onKeyDown={this._onMenuKeyDown}
             onKeyUp={this._onKeyUp}
           >
-            {title && (
-              <div className={this._classNames.title} role="heading" aria-level={1}>
-                {' '}
-                {title}{' '}
-              </div>
-            )}
+            {title && <div className={this._classNames.title}> {title} </div>}
             {items && items.length ? (
               <FocusZone
                 {...this._adjustedFocusZoneProps}
@@ -574,7 +569,7 @@ export class ContextualMenuBase extends BaseComponent<IContextualMenuProps, ICon
     const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
 
     return (
-      <div className={this._classNames.header} style={item.style} role="heading" aria-level={this.props.title ? 2 : 1}>
+      <div className={this._classNames.header} style={item.style}>
         <ChildrenRenderer
           item={item}
           classNames={classNames}

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

@@ -55,11 +55,13 @@ export class DialogContentBase extends BaseComponent<IDialogContentProps, {}> {
     return (
       <div className={classNames.content}>
         <div className={classNames.header}>
-          <p className={classNames.title} id={titleId} role="heading">
+          <p className={classNames.title} id={titleId} role="heading" aria-level={2}>
             {title}
           </p>
           <div className={classNames.topButton}>
-            {this.props.topButtonsProps!.map((props, index) => <IconButton key={props.uniqueId || index} {...props} />)}
+            {this.props.topButtonsProps!.map((props, index) => (
+              <IconButton key={props.uniqueId || index} {...props} />
+            ))}
             {(type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) && (
               <IconButton
                 className={classNames.button}

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

@@ -19,6 +19,7 @@ exports[`Dialog renders Dialog correctly 1`] = `
         }
   >
     <p
+      aria-level={2}
       className=
           ms-Dialog-title
           {

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

@@ -285,6 +285,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
             className={css('ms-Panel-headerText', styles.headerText, headerClassName)}
             id={headerTextId}
             role="heading"
+            aria-level={2}
           >
             {headerText}
           </p>