MM-53999 Fix keyboard support for Menu components (#24282)

* Cherry-pick test changes from #24243

* Add required change from Saturn's PR to make reminder menu accessible

* MM-53999 Flip provider order so that MUI props are passed

* MM-53999 Pass MUI props through custom MenuItem components

* Address feedback

* Update snapshots

e2e-tests/playwright/support/ui/components/channels/post_create.ts

@@ -20,7 +20,7 @@ export default class ChannelsPostCreate {
         this.sendMessageButton = container.getByTestId('SendMessageButton');
     }
 
-    async postMessage(message: string) {
+    async writeMessage(message: string) {
         await this.input.fill(message);
     }
 

e2e-tests/playwright/support/ui/components/channels/post_dot_menu.ts

@@ -6,22 +6,43 @@ import {expect, Locator} from '@playwright/test';
 export default class PostDotMenu {
     readonly container: Locator;
 
+    readonly replyMenuItem;
+    readonly forwardMenuItem;
+    readonly followMessageMenuItem;
+    readonly markAsUnreadMenuItem;
+    readonly remindMenuItem;
+    readonly saveMenuItem;
+    readonly removeFromSavedMenuItem;
+    readonly pinToChannelMenuItem;
+    readonly unpinFromChannelMenuItem;
+    readonly copyLinkMenuItem;
+    readonly editMenuItem;
+    readonly copyTextMenuItem;
     readonly deleteMenuItem;
 
     constructor(container: Locator) {
         this.container = container;
 
-        this.deleteMenuItem = this.container.getByText('Delete', {exact: true});
+        const getMenuItem = (hasText: string) => container.getByRole('menuitem').filter({hasText});
+
+        this.replyMenuItem = getMenuItem('Reply');
+        this.forwardMenuItem = getMenuItem('Forward');
+        this.followMessageMenuItem = getMenuItem('Follow message');
+        this.markAsUnreadMenuItem = getMenuItem('Mark as Unread');
+        this.remindMenuItem = getMenuItem('Remind');
+        this.saveMenuItem = getMenuItem('Save');
+        this.removeFromSavedMenuItem = getMenuItem('Remove from Saved');
+        this.pinToChannelMenuItem = getMenuItem('Pin to Channel');
+        this.unpinFromChannelMenuItem = getMenuItem('Unpin from Channel');
+        this.copyLinkMenuItem = getMenuItem('Copy Link');
+        this.editMenuItem = getMenuItem('Edit');
+        this.copyTextMenuItem = getMenuItem('Copy Text');
+        this.deleteMenuItem = getMenuItem('Delete');
     }
 
     async toBeVisible() {
         await expect(this.container).toBeVisible();
     }
-
-    async delete() {
-        await this.deleteMenuItem.waitFor();
-        await this.deleteMenuItem.click();
-    }
 }
 
 export {PostDotMenu};

e2e-tests/playwright/support/ui/components/channels/post_menu.ts

@@ -6,12 +6,24 @@ import {expect, Locator} from '@playwright/test';
 export default class PostMenu {
     readonly container: Locator;
 
+    readonly plusOneEmojiButton;
+    readonly grinningEmojiButton;
+    readonly whiteCheckMarkEmojiButton;
+    readonly addReactionButton;
+    readonly saveButton;
     readonly replyButton;
+    readonly actionsButton;
     readonly dotMenuButton;
 
     constructor(container: Locator) {
         this.container = container;
 
+        this.plusOneEmojiButton = container.getByRole('button', {name: '+1 emoji'});
+        this.grinningEmojiButton = container.getByRole('button', {name: 'grinning emoji'});
+        this.whiteCheckMarkEmojiButton = container.getByRole('button', {name: 'white check mark emoji'});
+        this.addReactionButton = container.getByRole('button', {name: 'add reaction'});
+        this.saveButton = container.getByRole('button', {name: 'save'});
+        this.actionsButton = container.getByRole('button', {name: 'actions'});
         this.replyButton = container.getByRole('button', {name: 'reply'});
         this.dotMenuButton = container.getByRole('button', {name: 'more'});
     }

e2e-tests/playwright/support/ui/components/channels/post_reminder_menu.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, Locator} from '@playwright/test';
+
+export default class PostReminderMenu {
+    readonly container: Locator;
+
+    readonly thirtyMinsMenuItem;
+    readonly oneHourMenuItem;
+    readonly twoHoursMenuItem;
+    readonly tomorrowMenuItem;
+    readonly customMenuItem;
+
+    constructor(container: Locator) {
+        this.container = container;
+
+        const getMenuItem = (hasText: string) => container.getByRole('menuitem').filter({hasText});
+
+        this.thirtyMinsMenuItem = getMenuItem('30 mins');
+        this.oneHourMenuItem = getMenuItem('1 hour');
+        this.twoHoursMenuItem = getMenuItem('2 hours');
+        this.tomorrowMenuItem = getMenuItem('Tomorrow');
+        this.customMenuItem = getMenuItem('Custom');
+    }
+
+    async toBeVisible() {
+        await expect(this.container).toBeVisible();
+    }
+}
+
+export {PostReminderMenu};

e2e-tests/playwright/support/ui/components/channels/sidebar_right.ts

@@ -26,6 +26,11 @@ export default class ChannelsSidebarRight {
     }
 
     async postMessage(message: string) {
+        await this.writeMessage(message);
+        await this.sendMessage();
+    }
+
+    async writeMessage(message: string) {
         await this.input.fill(message);
     }
 

e2e-tests/playwright/support/ui/components/index.ts

@@ -9,12 +9,13 @@ import {ChannelsPostCreate} from './channels/post_create';
 import {ChannelsPost} from './channels/post';
 import {ChannelsSidebarLeft} from './channels/sidebar_left';
 import {ChannelsSidebarRight} from './channels/sidebar_right';
+import {DeletePostModal} from './channels/delete_post_modal';
 import {FindChannelsModal} from './channels/find_channels_modal';
 import {Footer} from './footer';
 import {GlobalHeader} from './global_header';
 import {MainHeader} from './main_header';
 import {PostDotMenu} from './channels/post_dot_menu';
-import {DeletePostModal} from './channels/delete_post_modal';
+import {PostReminderMenu} from './channels/post_reminder_menu';
 import {PostMenu} from './channels/post_menu';
 import {ThreadFooter} from './channels/thread_footer';
 
@@ -27,12 +28,13 @@ const components = {
     ChannelsPost,
     ChannelsSidebarLeft,
     ChannelsSidebarRight,
+    DeletePostModal,
     FindChannelsModal,
     Footer,
     GlobalHeader,
     MainHeader,
     PostDotMenu,
-    DeletePostModal,
+    PostReminderMenu,
     PostMenu,
     ThreadFooter,
 };

e2e-tests/playwright/support/ui/pages/channels.ts

@@ -19,6 +19,7 @@ export default class ChannelsPage {
     readonly sidebarLeft;
     readonly sidebarRight;
     readonly postDotMenu;
+    readonly postReminderMenu;
     readonly deletePostModal;
 
     constructor(page: Page) {
@@ -32,6 +33,7 @@ export default class ChannelsPage {
         this.sidebarLeft = new components.ChannelsSidebarLeft(page.locator('#SidebarContainer'));
         this.sidebarRight = new components.ChannelsSidebarRight(page.locator('#sidebar-right'));
         this.postDotMenu = new components.PostDotMenu(page.getByRole('menu', {name: 'Post extra options'}));
+        this.postReminderMenu = new components.PostReminderMenu(page.getByRole('menu', {name: 'Set a reminder for:'}));
         this.deletePostModal = new components.DeletePostModal(page.locator('#deletePostModal'));
     }
 
@@ -55,8 +57,13 @@ export default class ChannelsPage {
     }
 
     async postMessage(message: string) {
+        await this.writeMessage(message);
+        await this.sendMessage();
+    }
+
+    async writeMessage(message: string) {
         await this.postCreate.input.waitFor();
-        await this.postCreate.postMessage(message);
+        await this.postCreate.writeMessage(message);
     }
 
     async sendMessage() {