fix(ContextualMenu): use menuitem role (#1328)

BREAKING CHANGE: If you have any tests that rely on the old role button for this component, change them to look for menuitem role instead.

Author: ethanashaw

src/components/ContextualMenu/ContextualMenu.test.tsx

@@ -137,7 +137,7 @@ describe("ContextualMenu ", () => {
 
   it("can display links", () => {
     render(<ContextualMenu links={[{ children: "Link1" }]} visible />);
-    expect(screen.getByRole("button", { name: "Link1" })).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: "Link1" })).toBeInTheDocument();
   });
 
   it("can display links in groups", () => {
@@ -147,7 +147,7 @@ describe("ContextualMenu ", () => {
     ) as HTMLElement;
     expect(group).toBeInTheDocument();
     expect(
-      within(group).getByRole("button", { name: "Link1" }),
+      within(group).getByRole("menuitem", { name: "Link1" }),
     ).toBeInTheDocument();
   });
 
@@ -163,12 +163,12 @@ describe("ContextualMenu ", () => {
     ) as HTMLElement;
     expect(group).toBeInTheDocument();
     expect(
-      within(group).getByRole("button", { name: "Link1" }),
+      within(group).getByRole("menuitem", { name: "Link1" }),
     ).toBeInTheDocument();
     expect(
-      within(group).queryByRole("button", { name: "Link2" }),
+      within(group).queryByRole("menuitem", { name: "Link2" }),
     ).not.toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Link2" })).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: "Link2" })).toBeInTheDocument();
   });
 
   it("can supply content instead of links", () => {
@@ -194,7 +194,7 @@ describe("ContextualMenu ", () => {
     await userEvent.click(screen.getByRole("button", { name: "Toggle" }));
     expect(screen.getByLabelText(DropdownLabel.Dropdown)).toBeInTheDocument();
     // Click on an item:
-    await userEvent.click(screen.getByRole("button", { name: "Link1" }));
+    await userEvent.click(screen.getByRole("menuitem", { name: "Link1" }));
     expect(
       screen.queryByLabelText(DropdownLabel.Dropdown),
     ).not.toBeInTheDocument();

src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx

@@ -145,6 +145,7 @@ const generateLink = <L,>(
     <Button<L>
       className={classNames("p-contextual-menu__link", className)}
       key={key}
+      role="menuitem"
       onClick={
         onClick
           ? (evt) => {