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
2023-08-22 12:53:02 -04:00
--- a/e2e-tests/playwright/tests/accessibility/channels/intro_channel.spec.ts
+++ b/e2e-tests/playwright/tests/accessibility/channels/intro_channel.spec.ts
@@ -3,19 +3,18 @@

 import {expect, test} from '@e2e-support/test_fixture';

-test('Intro to channel', async ({pw, pages, axe}) => {
-    // Create and sign in a new user
+test('Base channel accessibility', async ({pw, pages, axe}) => {
+    // # Create and sign in a new user
    const {user} = await pw.initSetup();

-    // Log in a user in new browser context
+    // # Log in a user in new browser context
    const {page} = await pw.testBrowser.login(user);

-    // Visit a default channel page
+    // # Visit a default channel page
    const channelsPage = new pages.ChannelsPage(page);
    await channelsPage.goto();
    await channelsPage.toBeVisible();
    await channelsPage.postMessage('hello');
-    await channelsPage.sendMessage();

    // # Analyze the page
    // Disable 'color-contrast' to be addressed by MM-53814
@@ -24,3 +23,136 @@ test('Intro to channel', async ({pw, pages, axe}) => {
    // * Should have no violation
    expect(accessibilityScanResults.violations).toHaveLength(0);
 });
+
+test('Post actions tab support', async ({pw, pages, axe}) => {
+    // # Create and sign in a new user
+    const {user} = await pw.initSetup();
+
+    // # Log in a user in new browser context
+    const {page} = await pw.testBrowser.login(user);
+
+    // # Visit a default channel page
+    const channelsPage = new pages.ChannelsPage(page);
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+    await channelsPage.postMessage('hello');
+
+    const post = await channelsPage.getLastPost();
+    await post.hover();
+    await post.postMenu.toBeVisible();
+
+    // # Open the dot menu
+    await post.postMenu.dotMenuButton.click();
+
+    // * Dot menu should be visible and have focused
+    await channelsPage.postDotMenu.toBeVisible();
+    await expect(channelsPage.postDotMenu.container).toBeFocused();
+
+    // # Analyze the page
+    const accessibilityScanResults = await axe
+        .builder(page, {disableColorContrast: true})
+        .include('.MuiMenu-list')
+        .analyze();
+
+    // * Should have no violation
+    expect(accessibilityScanResults.violations).toHaveLength(0);
+
+    // * Should move focus to Reply after arrow down
+    await channelsPage.postDotMenu.container.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.replyMenuItem).toBeFocused();
+
+    // * Should move focus to Forward after arrow down
+    await channelsPage.postDotMenu.replyMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.forwardMenuItem).toBeFocused();
+
+    // * Should move focus to Follow message after arrow down
+    await channelsPage.postDotMenu.forwardMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.followMessageMenuItem).toBeFocused();
+
+    // * Should move focus to Mark as Unread after arrow down
+    await channelsPage.postDotMenu.followMessageMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.markAsUnreadMenuItem).toBeFocused();
+
+    // * Should move focus to Remind after arrow down
+    await channelsPage.postDotMenu.markAsUnreadMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.remindMenuItem).toBeFocused();
+
+    // * Should move focus to Save after arrow down
+    await channelsPage.postDotMenu.remindMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.saveMenuItem).toBeFocused();
+
+    // * Should move focus to Pin to Channel after arrow down
+    await channelsPage.postDotMenu.saveMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.pinToChannelMenuItem).toBeFocused();
+
+    // * Should move focus to Copy Link after arrow down
+    await channelsPage.postDotMenu.pinToChannelMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.copyLinkMenuItem).toBeFocused();
+
+    // * Should move focus to Edit after arrow down
+    await channelsPage.postDotMenu.copyLinkMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.editMenuItem).toBeFocused();
+
+    // * Should move focus to Copy Text after arrow down
+    await channelsPage.postDotMenu.editMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.copyTextMenuItem).toBeFocused();
+
+    // * Should move focus to Delete after arrow down
+    await channelsPage.postDotMenu.copyTextMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.deleteMenuItem).toBeFocused();
+
+    // * Then, should move focus back to Reply after arrow down
+    await channelsPage.postDotMenu.deleteMenuItem.press('ArrowDown');
+    await expect(channelsPage.postDotMenu.replyMenuItem).toBeFocused();
+
+    // * Should move focus to Delete after arrow uo
+    await channelsPage.postDotMenu.container.press('ArrowUp');
+    expect(await channelsPage.postDotMenu.deleteMenuItem).toBeFocused();
+
+    // # Set focus to Remind
+    await channelsPage.postDotMenu.remindMenuItem.focus();
+    await expect(channelsPage.postDotMenu.remindMenuItem).toBeFocused();
+
+    // * Reminder menu should still be hidden
+    await expect(channelsPage.postReminderMenu.container).toBeHidden();
+
+    // # Press arrow right
+    await channelsPage.postDotMenu.remindMenuItem.press('ArrowRight');
+
+    // * Reminder menu should be visible and have focused
+    channelsPage.postReminderMenu.toBeVisible();
+    await expect(channelsPage.postReminderMenu.container).toBeFocused();
+
+    // * Should move focus to 30 mins after arrow down
+    await channelsPage.postReminderMenu.container.press('ArrowDown');
+    expect(await channelsPage.postReminderMenu.thirtyMinsMenuItem).toBeFocused();
+
+    // * Should move focus to 1 hour after arrow down
+    await channelsPage.postReminderMenu.thirtyMinsMenuItem.press('ArrowDown');
+    expect(await channelsPage.postReminderMenu.oneHourMenuItem).toBeFocused();
+
+    // * Should move focus to 2 hours after arrow down
+    await channelsPage.postReminderMenu.oneHourMenuItem.press('ArrowDown');
+    expect(await channelsPage.postReminderMenu.twoHoursMenuItem).toBeFocused();
+
+    // * Should move focus to Tomorrow after arrow down
+    await channelsPage.postReminderMenu.twoHoursMenuItem.press('ArrowDown');
+    expect(await channelsPage.postReminderMenu.tomorrowMenuItem).toBeFocused();
+
+    // * Should move focus to Custom after arrow down
+    await channelsPage.postReminderMenu.tomorrowMenuItem.press('ArrowDown');
+    expect(await channelsPage.postReminderMenu.customMenuItem).toBeFocused();
+
+    // * Then, should move focus back to 30 mins after arrow down
+    await channelsPage.postReminderMenu.customMenuItem.press('ArrowDown');
+    expect(await channelsPage.postReminderMenu.thirtyMinsMenuItem).toBeFocused();
+
+    // * Should hide Reminder menu and focus to Remind menu after arrow left
+    await channelsPage.postReminderMenu.container.press('ArrowLeft');
+    await expect(channelsPage.postReminderMenu.container).toBeHidden();
+    await expect(channelsPage.postDotMenu.remindMenuItem).toBeFocused();
+
+    // * Should hide Dot menu of Escape
+    await channelsPage.postDotMenu.container.press('Escape');
+    await expect(channelsPage.postDotMenu.container).toBeHidden();
+});
--- a/e2e-tests/playwright/tests/functional/channels/drafts/drafts_on_deleted_message.spec.ts
+++ b/e2e-tests/playwright/tests/functional/channels/drafts/drafts_on_deleted_message.spec.ts
@@ -41,15 +41,14 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
    await lastPostByAdmin.postMenu.toBeVisible();
    await lastPostByAdmin.postMenu.reply();

-    // # Write a message as a user
+    // # Post a message as a user
    const sidebarRight = channelPage.sidebarRight;
    await sidebarRight.toBeVisible();
    await sidebarRight.postMessage('Replying to a thread');
-    await sidebarRight.sendMessage();

    // # Write a message in the reply thread but don't send it now so that it becomes a draft
    const draftMessageByUser = 'I should be in drafts by User';
-    await sidebarRight.postMessage(draftMessageByUser);
+    await sidebarRight.writeMessage(draftMessageByUser);

    // # Close the RHS for draft to be saved
    await sidebarRight.close();
@@ -92,7 +91,6 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete

    // # Post a message in the channel
    await channelPage.postMessage('Message which will be deleted');
-    await channelPage.sendMessage();

    // # Start a thread by clicking on reply menuitem from post options menu
    const post = await channelPage.getLastPost();
@@ -103,12 +101,11 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
    const sidebarRight = channelPage.sidebarRight;
    await sidebarRight.toBeVisible();

-    // # Write a message in the thread
+    // # Post a message in the thread
    await sidebarRight.postMessage('Replying to a thread');
-    await sidebarRight.sendMessage();

    // # Write a message in the reply thread but don't send it
-    await sidebarRight.postMessage('I should be in drafts');
+    await sidebarRight.writeMessage('I should be in drafts');

    // # Close the RHS for draft to be saved
    await sidebarRight.close();
@@ -121,7 +118,7 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
    await post.postMenu.toBeVisible();
    await post.postMenu.openDotMenu();
    await channelPage.postDotMenu.toBeVisible();
-    await channelPage.postDotMenu.delete();
+    await channelPage.postDotMenu.deleteMenuItem.click();

    // # Confirm the delete from the modal
    await channelPage.deletePostModal.toBeVisible();
--- a/e2e-tests/playwright/tests/visual/channels/intro_channel.spec.ts
+++ b/e2e-tests/playwright/tests/visual/channels/intro_channel.spec.ts
@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.

 import {expect, test} from '@e2e-support/test_fixture';
-import {duration, wait} from '@e2e-support/util';

 test('Intro to channel as regular user', async ({pw, pages, browserName, viewport}, testInfo) => {
    // Create and sign in a new user
@@ -17,9 +16,10 @@ test('Intro to channel as regular user', async ({pw, pages, browserName, viewpor
    await channelsPage.toBeVisible();

    // Wait for Boards' bot image to be loaded
-    const boardsWelcomePost = await channelsPage.getFirstPost();
-    await expect(await boardsWelcomePost.getProfileImage('boards')).toBeVisible();
-    await wait(duration.one_sec);
+    // await pw.shouldHaveFeatureFlag('OnboardingAutoShowLinkedBoard', true);
+    // const boardsWelcomePost = await channelsPage.getFirstPost();
+    // await expect(await boardsWelcomePost.getProfileImage('boards')).toBeVisible();
+    // await wait(duration.one_sec);

    // Wait for Playbooks icon to be loaded in App bar, except in iphone
    if (!pw.isSmallScreen()) {