From d5129e5fc07dc03088d8ba9562860f1d32766b86 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <micahgodbolt@gmail.com>
Date: Fri, 10 Aug 2018 03:03:18 +0530
Subject: [PATCH] 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
---
 .../update-aria-level_2018-08-02-22-33.json           | 11 +++++++++++
 .../src/components/ComboBox/ComboBox.tsx              |  2 +-
 .../components/ContextualMenu/ContextualMenu.base.tsx |  9 ++-------
 .../src/components/Dialog/DialogContent.base.tsx      |  6 ++++--
 .../Dialog/__snapshots__/Dialog.test.tsx.snap         |  1 +
 .../src/components/Panel/Panel.tsx                    |  1 +
 6 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 common/changes/office-ui-fabric-react/update-aria-level_2018-08-02-22-33.json

diff --git a/common/changes/office-ui-fabric-react/update-aria-level_2018-08-02-22-33.json b/common/changes/office-ui-fabric-react/update-aria-level_2018-08-02-22-33.json
new file mode 100644
index 0000000000000..be8904b0b01d2
--- /dev/null
+++ b/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": "mgodbolt@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
index df5af5e16d53d..c51393acbf09a 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
+++ b/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>
     );
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.base.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.base.tsx
index 5436717a54698..40576ef788cdc 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.base.tsx
+++ b/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}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx
index 38f7353522541..9ffbf25eca17a 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx
+++ b/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}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index 59ceea4b871b3..83b9759810491 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/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
           {
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index c9aacd0c9e1aa..1ad3574e200f2 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/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>