MM-53813: Fix(accessibility): on channels page (#24122)

* fix(accessibility): on channels page

* fix lint and update dynamic-virtualized-list

* fix snapshot and update per feedback

* fix e2e tests

* fix test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/.eslintrc.json

@@ -15,6 +15,12 @@
   "env": {
     "cypress/globals": true
   },
+  "settings": {
+    "react": {
+        "pragma": "React",
+        "version": "detect"
+    }
+  },
   "rules": {
     "header/header": [
       2,

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js

@@ -137,10 +137,11 @@ describe('Verify Accessibility keyboard usability across different regions in th
             cy.clickPostCommentIcon(postId);
 
             // * Verify Screen reader should not switch to virtual cursor mode. This is handled by adding a role=application attribute
-            const regions = ['#sidebar-left', '#rhsContainer .post-right__content', '.search__form', '#advancedTextEditorCell'];
+            const regions = ['#sidebar-left', '#rhsContainer .post-right__content', '#advancedTextEditorCell'];
             regions.forEach((region) => {
                 cy.get(region).should('have.attr', 'role', 'application');
             });
+            cy.get('.search__form').should('have.attr', 'role', 'search');
             cy.get(`#post_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
             cy.get(`#rhsPost_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
         });

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js

@@ -201,7 +201,7 @@ describe('Verify Accessibility Support in Post', () => {
                 cy.focused().tab();
 
                 // * Verify focus is on the post text
-                cy.get(`#postMessageText_${postId}`).should('be.focused').and('have.attr', 'aria-readonly', 'true');
+                cy.get(`#postMessageText_${postId}`).should('be.focused');
             });
         });
     });
@@ -231,7 +231,7 @@ describe('Verify Accessibility Support in Post', () => {
         cy.getLastPostId().then((postId) => {
             cy.get(`#rhsPost_${postId}`).within(() => {
                 // * Verify focus is on the post text
-                cy.get(`#rhsPostMessageText_${postId}`).should('be.focused').and('have.attr', 'aria-readonly', 'true');
+                cy.get(`#rhsPostMessageText_${postId}`).should('be.focused');
                 cy.focused().tab({shift: true});
 
                 // * Verify focus is on the more button

e2e-tests/cypress/tests/integration/channels/channel_sidebar/dm_category_spec.ts

@@ -24,6 +24,20 @@ describe('MM-T3156 DM category', () => {
         cy.apiInitSetup({loginAfter: true, promoteNewUserAsAdmin: true}).then(({team, user}) => {
             testUser = user;
             cy.visit(`/${team.name}/channels/town-square`);
+
+            const usersPrefixes = ['a', 'c', 'd', 'j', 'p', 'u', 'x', 'z'];
+            usersPrefixes.forEach((prefix) => {
+                // # Create users with prefixes in alphabetical order
+                cy.apiCreateUser({prefix}).then(({user: newUser}) => {
+                    cy.apiCreateDirectChannel([testUser.id, newUser.id]).then(({channel}) => {
+                        // # Post message in The DM channel
+                        cy.postMessageAs({sender: newUser, message: 'test', channelId: channel.id});
+
+                        // add usernames in array for reference
+                        usernames.push(newUser.username);
+                    });
+                });
+            });
         });
     });
 
@@ -36,20 +50,6 @@ describe('MM-T3156 DM category', () => {
     });
 
     it('MM-T3156_2 should order DMs based on recent interactions', () => {
-        const usersPrefixes = ['a', 'c', 'd', 'j', 'p', 'u', 'x', 'z'];
-        usersPrefixes.forEach((prefix) => {
-            // # Create users with prefixes in alphabetical order
-            cy.apiCreateUser({prefix}).then(({user: newUser}) => {
-                cy.apiCreateDirectChannel([testUser.id, newUser.id]).then(({channel}) => {
-                    // # Post message in The DM channel
-                    cy.postMessageAs({sender: newUser, message: 'test', channelId: channel.id});
-
-                    // add usernames in array for reference
-                    usernames.push(newUser.username);
-                });
-            });
-        });
-
         // get DM category group
         cy.findByLabelText('DIRECT MESSAGES').parents('.SidebarChannelGroup').within(() => {
             const usernamesReversed = [...usernames].reverse();
@@ -68,15 +68,14 @@ describe('MM-T3156 DM category', () => {
 
         // # Change sorting to be alphabetical
         cy.findByText('Sort').trigger('mouseover');
-        cy.findByText('Alphabetically').click();
+        cy.findByText('Alphabetically').click().wait(TIMEOUTS.ONE_SEC);
 
-        cy.findByLabelText('DIRECT MESSAGES').should('be.visible').
-            parents('.SidebarChannelGroup').within(() => {
-                cy.get('.NavGroupContent').children().each(($el, index) => {
-                    // * Verify that the usernames are in alphabetical order
-                    cy.wrap($el).findByText(usernames[index]).should('be.visible');
-                });
+        cy.findByLabelText('DIRECT MESSAGES').parents('.SidebarChannelGroup').within(() => {
+            cy.get('.NavGroupContent').children().each(($el, index) => {
+                // * Verify that the usernames are in alphabetical order
+                cy.wrap($el).findByText(usernames[index]).should('be.visible');
             });
+        });
     });
 
     it('MM-T3156_4 should not be able to rearrange DMs', () => {

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_spec.ts

@@ -119,7 +119,7 @@ describe('Guest Accounts', () => {
             children().should('have.length', 1).
             eq(0).should('contain', testChannel.name).click();
 
-        cy.get('#inviteGuestButton').scrollIntoView().click();
+        cy.findByTestId('inviteButton').scrollIntoView().click();
         cy.findByTestId('confirm-done').should('be.visible').click();
 
         // # Get invitation link.

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_invitation_ui_spec.ts

@@ -65,7 +65,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
         });
 
         // * Verify Invite Guests button is disabled by default
-        cy.get('#inviteGuestButton').scrollIntoView().should('be.visible').and('be.disabled');
+        cy.findByTestId('inviteButton').scrollIntoView().should('be.visible').and('be.disabled');
 
         // * Verify Invite People field
         const email = `temp-${getRandomId()}@mattermost.com`;
@@ -141,7 +141,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
         invitePeople(email, 1, email, 'Town Square', false);
 
         // * Verify Invite Guests button is disabled
-        cy.get('#inviteGuestButton').should('be.disabled');
+        cy.findByTestId('inviteButton').should('be.disabled');
     });
 
     it('MM-T4449 Invite Guest via Email containing upper case letters', () => {
@@ -177,7 +177,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
             children().should('have.length', 1).eq(0).should('contain', newUser.username).click();
 
         // # Click Invite Members
-        cy.get('#inviteMembersButton').scrollIntoView().click();
+        cy.findByTestId('inviteButton').scrollIntoView().click();
 
         // * Verify the content and error message in the Invitation Modal
         cy.findByTestId('invitationModal').within(() => {
@@ -218,7 +218,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
         cy.get('.users-emails-input__menu').children().should('have.length', 1).eq(0).should('contain', email).click();
 
         // # Click Invite Guests Button
-        cy.get('#inviteGuestButton').scrollIntoView().click();
+        cy.findByTestId('inviteButton').scrollIntoView().click();
 
         // * Verify invite more button is present
         cy.findByTestId('invite-more').should('be.visible');

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/helpers.ts

@@ -38,7 +38,7 @@ export function invitePeople(typeText: string, resultsCount: number, verifyText:
 
     if (clickInvite) {
         // # Click Invite Guests Button
-        cy.get('#inviteGuestButton').scrollIntoView().click();
+        cy.findByTestId('inviteButton').scrollIntoView().click();
     }
 }
 

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/member_invitation_ui_spec.ts

@@ -69,7 +69,7 @@ describe('Guest Account - Member Invitation Flow', () => {
 
         cy.get('@clipboard').its('contents').should('eq', `${baseUrl}/signup_user_complete/?id=${testTeam.invite_id}`);
 
-        cy.get('#inviteMembersButton').scrollIntoView().should('be.visible').and('be.disabled');
+        cy.findByTestId('inviteButton').scrollIntoView().should('be.visible').and('be.disabled');
         cy.get('.users-emails-input__control').should('be.visible').within(() => {
             // * Verify the input placeholder text
             cy.get('.users-emails-input__placeholder').should('have.text', 'Enter a name or email address');
@@ -224,7 +224,7 @@ describe('Guest Account - Member Invitation Flow', () => {
             });
 
             // # Click Invite Members
-            cy.get('#inviteMembersButton').scrollIntoView().click();
+            cy.findByTestId('inviteButton').scrollIntoView().click();
 
             // * Verify the content and message in the Invitation Modal
             cy.findByTestId('invitationModal').within(() => {
@@ -267,7 +267,7 @@ function invitePeople(typeText, resultsCount, verifyText, clickInvite = true) {
 
     // # Click Invite Members
     if (clickInvite) {
-        cy.get('#inviteMembersButton').scrollIntoView().click();
+        cy.findByTestId('inviteButton').scrollIntoView().click();
     }
 }
 

e2e-tests/cypress/tests/integration/channels/enterprise/ldap_group/invite_bot_spec.ts

@@ -66,7 +66,7 @@ describe('Group Synced Team - Bot invitation flow', () => {
             click();
 
         // # Invite the bot
-        cy.get('#inviteMembersButton').click();
+        cy.findByTestId('inviteButton').click();
 
         // * Ensure that the response message was not an error
         cy.get('.InviteResultRow').find('.reason').should('not.contain', 'Error');

e2e-tests/cypress/tests/integration/channels/interactive_dialog/full_dialog_spec.js

@@ -18,7 +18,7 @@ const webhookUtils = require('../../../../utils/webhook_utils');
 
 describe('Interactive Dialog', () => {
     const inputTypes = {
-        realname: 'input',
+        realname: 'text',
         someemail: 'email',
         somenumber: 'number',
         somepassword: 'password',
@@ -101,7 +101,7 @@ describe('Interactive Dialog', () => {
                     cy.wrap($elForm).find('#suggestionList').scrollIntoView().should('be.visible');
 
                     // # Click field label to close any opened drop-downs
-                    cy.wrap($elForm).find('label.control-label').scrollIntoView().click();
+                    cy.wrap($elForm).find('label.control-label').scrollIntoView().click({force: true});
                 } else if (element.name === 'someradiooptions') {
                     cy.wrap($elForm).find('input').should('be.visible').and('have.length', optionsLength[element.name]);
 

e2e-tests/cypress/tests/integration/channels/interactive_menu/slack_parsing_message_button_spec.js

@@ -44,21 +44,29 @@ describe('Interactive Menu', () => {
 
         // # Post an incoming webhook
         cy.postIncomingWebhook({url: incomingWebhook.url, data: payload, waitFor: 'attachment-pretext'});
+        cy.waitUntil(() => cy.findAllByTestId('postContent').then((el) => {
+            if (el.length > 0) {
+                return el[1].innerText.includes(payload.attachments[0].actions[0].name);
+            }
+            return false;
+        }));
 
         // # Click on "Skip Parsing" button
-        cy.findByText('Skip Parsing').should('be.visible').click({force: true});
+        cy.findByText(payload.attachments[0].actions[0].name).should('be.visible').click({force: true});
         cy.wait(TIMEOUTS.HALF_SEC);
 
         // * Verify that it renders original "spoiler" text
+        cy.uiWaitUntilMessagePostedIncludes('a < a | b > a');
         cy.getLastPostId().then((postId) => {
             cy.get(`#postMessageText_${postId}`).should('have.html', '<p>a &lt; a | b &gt; a</p>');
         });
 
         // # Click on "Do Parsing" button
-        cy.findByText('Do Parsing').should('be.visible').click({force: true});
+        cy.findByText(payload.attachments[0].actions[1].name).should('be.visible').click({force: true});
         cy.wait(TIMEOUTS.HALF_SEC);
 
         // * Verify that it renders markdown with link
+        cy.uiWaitUntilMessagePostedIncludes('a  b  a');
         cy.getLastPostId().then((postId) => {
             cy.get(`#postMessageText_${postId}`).should('have.html', '<p>a <a class="theme markdown__link" href="http://a" rel="noreferrer" target="_blank"><span> b </span></a> a</p>');
         });

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/ctrl_cmd_shift_l_does_not_change_focus_to_msgbox_spec.js

@@ -32,7 +32,7 @@ describe('Keyboard Shortcuts', () => {
         cy.uiClose();
 
         // # Open invite members full-page screen
-        cy.get('#introTextInvite').click();
+        cy.findByLabelText('Invite Users').click();
 
         // # Press ctrl/cmd+shift+l
         cy.get('body').cmdOrCtrlShortcut('{shift+l}');

e2e-tests/cypress/tests/integration/channels/onboarding/invalidate_pending_email_invitations_spec.js

@@ -103,6 +103,6 @@ describe('Onboarding', () => {
         cy.findByRole('textbox', {name: 'Add or Invite People'}).
             typeWithForce(email).wait(TIMEOUTS.HALF_SEC).
             typeWithForce('{enter}');
-        cy.get('#inviteMembersButton').click();
+        cy.findByTestId('inviteButton').click();
     }
 });

e2e-tests/cypress/tests/integration/channels/team_settings/closed_team_invite_by_email_spec.js

@@ -83,7 +83,7 @@ describe('Team Settings', () => {
         }
 
         cy.findByRole('textbox', {name: 'Add or Invite People'}).type(email, {force: true}).wait(TIMEOUTS.HALF_SEC).type('{enter}', {force: true});
-        cy.get('#inviteMembersButton').click();
+        cy.findByTestId('inviteButton').click();
 
         // # Wait for a while to ensure that email notification is sent and logout from sysadmin account
         cy.wait(TIMEOUTS.FIVE_SEC);

e2e-tests/cypress/tests/integration/channels/team_settings/helpers.js

@@ -40,7 +40,7 @@ export const inviteUserByEmail = (email) => {
         typeWithForce(email).
         wait(TIMEOUTS.HALF_SEC).
         typeWithForce('{enter}');
-    cy.get('#inviteMembersButton').click();
+    cy.findByTestId('inviteButton').click();
 
     // # Wait for a while to ensure that email notification is sent
     cy.wait(TIMEOUTS.TWO_SEC);

e2e-tests/cypress/tests/integration/channels/team_settings/invite_members_spec.js

@@ -172,7 +172,7 @@ function inviteUser(user) {
     cy.get('.users-emails-input__menu').children().eq(0).should('contain', user.username).click();
 
     // # Click Invite Members
-    cy.get('#inviteMembersButton').scrollIntoView().click();
+    cy.findByTestId('inviteButton').scrollIntoView().click();
 }
 
 function inviteUserToTeamAsMember(testUser, testTeam, user) {

e2e-tests/cypress/tests/integration/channels/team_settings/invite_user_to_closed_team_spec.js

@@ -82,6 +82,6 @@ describe('Team Settings', () => {
             typeWithForce(email).
             wait(TIMEOUTS.HALF_SEC).
             typeWithForce('{enter}');
-        cy.get('#inviteMembersButton').click();
+        cy.findByTestId('inviteButton').click();
     }
 });

e2e-tests/cypress/tests/integration/channels/team_settings/teams_spec.js

@@ -93,7 +93,7 @@ describe('Teams Suite', () => {
                 click();
 
             // # Click "Invite Members" button, then "Done" button
-            cy.get('#inviteMembersButton').click();
+            cy.findByTestId('inviteButton').click();
             cy.findByTestId('confirm-done').click();
 
             // * As sysadmin, verify system message posts in Town Square and Off-Topic

e2e-tests/cypress/tests/integration/playbooks/channels/broadcast_spec.js

@@ -325,10 +325,10 @@ const verifyInitialAndStatusPostInBroadcast = (testTeam, channelName, runName, i
             should('exist').
             within(() => {
                 // * Thread should have two posts
-                cy.findAllByRole('listitem').should('have.length', 2);
+                cy.findAllByTestId('postContent').should('have.length', 2);
 
                 // * The first should be announcement
-                cy.findAllByRole('listitem').eq(0).contains(initialMessage);
+                cy.findAllByTestId('postContent').eq(0).contains(initialMessage);
 
                 // * Latest post should be update
                 cy.get(`#rhsPost_${lastPostId}`).contains(
@@ -354,7 +354,7 @@ const deleteLatestPostRoot = (testTeam, channelName) => {
         cy.get('#rhsContainer').
             should('exist').
             within(() => {
-                cy.findAllByRole('listitem').eq(0).then((root) => {
+                cy.findAllByTestId('postContent').eq(0).parent().then((root) => {
                     const rootId = root.attr('id').slice(8);
 
                     // # Click root's post dot menu.

e2e-tests/cypress/tests/support/ui/team.js

@@ -14,7 +14,7 @@ Cypress.Commands.add('uiInviteMemberToCurrentTeam', (username) => {
     cy.get('.users-emails-input__control input').typeWithForce(username).as('input');
     cy.get('.users-emails-input__option ').contains(`@${username}`);
     cy.get('@input').typeWithForce('{enter}');
-    cy.get('#inviteMembersButton').click();
+    cy.findByTestId('inviteButton').click();
 
     // * Verify user invited to team
     cy.get('.invitation-modal-confirm--sent .InviteResultRow').

e2e-tests/playwright/support/test_fixture.ts

@@ -19,8 +19,9 @@ type ExtendedFixtures = {
 };
 
 export const test = base.extend<ExtendedFixtures>({
-    axe: async ({page}, use) => {
-        const ab = new AxeBuilderExtended(page);
+    // eslint-disable-next-line no-empty-pattern
+    axe: async ({}, use) => {
+        const ab = new AxeBuilderExtended();
         await use(ab);
     },
     pw: async ({browser, viewport}, use) => {
@@ -93,24 +94,15 @@ class PlaywrightExtended {
 }
 
 class AxeBuilderExtended {
-    /**
-     * Each page should have its own Axe Builder to specifically list known issues
-     * which are to be excluded from being scanned until issues are fixed.
-     * Excluded element should have a corresponding ticket.
-     */
-
-    // '<site_url>/login'
-    readonly loginPage: () => AxeBuilder;
+    readonly builder: (page: Page, disableRules?: string[]) => AxeBuilder;
 
     // See https://github.com/dequelabs/axe-core/blob/master/doc/API.md#axe-core-tags
     readonly tags: string[] = ['wcag2a', 'wcag2aa'];
 
-    // See https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md#wcag-20-level-a--aa-rules
-    readonly disabledRules: string[] = [];
-
-    constructor(page: Page) {
-        this.loginPage = () => {
-            return new AxeBuilder({page}).withTags(this.tags).disableRules(this.disabledRules);
+    constructor() {
+        // See https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md#wcag-20-level-a--aa-rules
+        this.builder = (page: Page, disableRules?: string[]) => {
+            return new AxeBuilder({page}).withTags(this.tags).disableRules(disableRules || []);
         };
     }
 

e2e-tests/playwright/tests/accessibility/channels/intro_channel.spec.ts

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, test} from '@e2e-support/test_fixture';
+
+test('Intro to channel', 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');
+    await channelsPage.sendMessage();
+
+    // # Analyze the page
+    // Disable 'color-contrast' to be addressed by MM-53814
+    const accessibilityScanResults = await axe.builder(page, ['color-contrast']).analyze();
+
+    // * Should have no violation
+    expect(accessibilityScanResults.violations).toHaveLength(0);
+});

e2e-tests/playwright/tests/accessibility/common/login.spec.ts

@@ -12,7 +12,7 @@ test('/login', async ({pw, pages, page, axe}) => {
     await loginPage.toBeVisible();
 
     // # Analyze the page
-    const accessibilityScanResults = await axe.loginPage().analyze();
+    const accessibilityScanResults = await axe.builder(loginPage.page).analyze();
 
     // * Should have no violation
     expect(accessibilityScanResults.violations).toHaveLength(0);