From 07e487070b38576d7e7a203ef78243be9b0289d3 Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Tue, 20 Oct 2020 11:32:51 -0700
Subject: [PATCH] Command bar role (#15614)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See https://github.com/microsoft/fluentui/issues/15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_Cherry-pick of #15511._

_Original PR description:_

Fix having incorrectly set `role="group"` in between `menubar` and `menuitem`.

#### Focus areas to test

(optional)
---
 ...react-internal-2020-10-20-10-32-20-commandBarRole.json | 8 ++++++++
 .../react/__snapshots__/CommandBar.Basic.Example.tsx.shot | 4 ++--
 .../__snapshots__/CommandBar.ButtonAs.Example.tsx.shot    | 4 ++--
 .../CommandBar.CommandBarButtonAs.Example.tsx.shot        | 2 +-
 .../react/__snapshots__/CommandBar.Lazy.Example.tsx.shot  | 2 +-
 .../CommandBar.SplitDisabled.Example.tsx.shot             | 2 +-
 .../__snapshots__/DetailsList.Advanced.Example.tsx.shot   | 4 ++--
 .../__snapshots__/Keytips.CommandBar.Example.tsx.shot     | 4 ++--
 .../src/components/CommandBar/CommandBar.base.tsx         | 2 ++
 .../__snapshots__/CommandBar.deprecated.test.tsx.snap     | 2 +-
 .../CommandBar/__snapshots__/CommandBar.test.tsx.snap     | 4 ++--
 11 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 change/@fluentui-react-internal-2020-10-20-10-32-20-commandBarRole.json

diff --git a/change/@fluentui-react-internal-2020-10-20-10-32-20-commandBarRole.json b/change/@fluentui-react-internal-2020-10-20-10-32-20-commandBarRole.json
new file mode 100644
index 0000000000000..66ceede18d064
--- /dev/null
+++ b/change/@fluentui-react-internal-2020-10-20-10-32-20-commandBarRole.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "CommandBar: Fixing incorrect aria role.",
+  "packageName": "@fluentui/react-internal",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-20T17:32:20.124Z"
+}
diff --git a/packages/react-examples/src/react/__snapshots__/CommandBar.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/CommandBar.Basic.Example.tsx.shot
index c24e009c2e919..429153abf132e 100644
--- a/packages/react-examples/src/react/__snapshots__/CommandBar.Basic.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/CommandBar.Basic.Example.tsx.shot
@@ -58,7 +58,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] =
                   flex-wrap: nowrap;
                   position: relative;
                 }
-            role="group"
+            role="none"
           >
             <div
               className=
@@ -998,7 +998,7 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] =
                   flex-wrap: nowrap;
                   position: relative;
                 }
-            role="group"
+            role="none"
           >
             <div
               className=
diff --git a/packages/react-examples/src/react/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot
index ae2e0cb388117..2b6feafef94b4 100644
--- a/packages/react-examples/src/react/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/CommandBar.ButtonAs.Example.tsx.shot
@@ -57,7 +57,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1`
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=
@@ -1001,7 +1001,7 @@ exports[`Component Examples renders CommandBar.ButtonAs.Example.tsx correctly 1`
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=
diff --git a/packages/react-examples/src/react/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
index 9ba8bbcb7b8a4..2a600abb2b8cd 100644
--- a/packages/react-examples/src/react/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
@@ -57,7 +57,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=
diff --git a/packages/react-examples/src/react/__snapshots__/CommandBar.Lazy.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/CommandBar.Lazy.Example.tsx.shot
index 78566d65a0239..d214eedbd8788 100644
--- a/packages/react-examples/src/react/__snapshots__/CommandBar.Lazy.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/CommandBar.Lazy.Example.tsx.shot
@@ -57,7 +57,7 @@ exports[`Component Examples renders CommandBar.Lazy.Example.tsx correctly 1`] =
                   flex-wrap: nowrap;
                   position: relative;
                 }
-            role="group"
+            role="none"
           >
             <div
               className=
diff --git a/packages/react-examples/src/react/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot
index 539526094cb8a..da5cd85a197f9 100644
--- a/packages/react-examples/src/react/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/CommandBar.SplitDisabled.Example.tsx.shot
@@ -58,7 +58,7 @@ exports[`Component Examples renders CommandBar.SplitDisabled.Example.tsx correct
                   flex-wrap: nowrap;
                   position: relative;
                 }
-            role="group"
+            role="none"
           >
             <div
               className=
diff --git a/packages/react-examples/src/react/__snapshots__/DetailsList.Advanced.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/DetailsList.Advanced.Example.tsx.shot
index 6012fa7f844fd..cbaacaed68e07 100644
--- a/packages/react-examples/src/react/__snapshots__/DetailsList.Advanced.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/DetailsList.Advanced.Example.tsx.shot
@@ -64,7 +64,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1
                   flex-wrap: nowrap;
                   position: relative;
                 }
-            role="group"
+            role="none"
           >
             <div
               className=
@@ -663,7 +663,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1
                   flex-wrap: nowrap;
                   position: relative;
                 }
-            role="group"
+            role="none"
           >
             <div
               className=
diff --git a/packages/react-examples/src/react/__snapshots__/Keytips.CommandBar.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Keytips.CommandBar.Example.tsx.shot
index 74b27a551ae20..381175db90ab0 100644
--- a/packages/react-examples/src/react/__snapshots__/Keytips.CommandBar.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/Keytips.CommandBar.Example.tsx.shot
@@ -56,7 +56,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`]
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=
@@ -436,7 +436,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`]
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=
diff --git a/packages/react-internal/src/components/CommandBar/CommandBar.base.tsx b/packages/react-internal/src/components/CommandBar/CommandBar.base.tsx
index 079ac3ad8744a..c5e8c38bfa06f 100644
--- a/packages/react-internal/src/components/CommandBar/CommandBar.base.tsx
+++ b/packages/react-internal/src/components/CommandBar/CommandBar.base.tsx
@@ -126,6 +126,7 @@ export class CommandBarBase extends React.Component<ICommandBarProps, {}> implem
       >
         {/*Primary Items*/}
         <OverflowSet
+          role="none"
           componentRef={this._overflowSet}
           className={css(this._classNames.primarySet)}
           items={data.primaryItems}
@@ -137,6 +138,7 @@ export class CommandBarBase extends React.Component<ICommandBarProps, {}> implem
         {/*Secondary Items*/}
         {data.farItems && data.farItems.length > 0 && (
           <OverflowSet
+            role="none"
             className={css(this._classNames.secondarySet)}
             items={data.farItems}
             onRenderItem={this._onRenderItem}
diff --git a/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap b/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap
index 7a0627772197c..24017b5024e82 100644
--- a/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap
+++ b/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=
diff --git a/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
index 1a733f7b93513..647d97c0bcb0f 100644
--- a/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
+++ b/packages/react-internal/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=
@@ -407,7 +407,7 @@ exports[`CommandBar renders empty farItems correctly 1`] = `
                 flex-wrap: nowrap;
                 position: relative;
               }
-          role="group"
+          role="none"
         >
           <div
             className=