snapshot of https://github.com/mattermost/mattermost.git (master, 2026-09-16; blobs > 131072B omitted)

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts

@@ -0,0 +1,294 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+// Stage: @prod
+// Group: @channels @enterprise @accessibility
+
+import type {Channel} from '@mattermost/types/channels';
+import type {Team} from '@mattermost/types/teams';
+
+import * as TIMEOUTS from '@/fixtures/timeouts';
+
+describe('Verify Accessibility Support in different input fields', () => {
+    let testTeam: Team;
+    let testChannel: Channel;
+
+    before(() => {
+        // * Check if server has license for Guest Accounts
+        cy.apiRequireLicenseForFeature('GuestAccounts');
+
+        cy.apiInitSetup().then(({team}) => {
+            testTeam = team;
+        });
+    });
+
+    beforeEach(() => {
+        cy.apiCreateChannel(testTeam.id, 'accessibility', 'accessibility').then(({channel}) => {
+            testChannel = channel;
+            cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
+        });
+    });
+
+    it('MM-T1456 Verify Accessibility Support in Input fields in Invite People Flow', () => {
+        // # Open team menu and click 'Invite People'
+        cy.uiOpenTeamMenu('Invite people');
+
+        // # Click invite members if needed
+        cy.get('.InviteAs').findByTestId('inviteMembersLink').click();
+
+        cy.findByTestId('InviteView__copyInviteLink').then((el) => {
+            const copyInviteLinkAriaLabel = el.attr('aria-label');
+            expect(copyInviteLinkAriaLabel).to.match(/^team invite link/i);
+        });
+
+        // * Verify Accessibility Support in Add or Invite People input field
+        cy.get('.users-emails-input__control').should('be.visible').within(() => {
+            cy.get('input').should('have.attr', 'aria-label', 'Invite People').and('have.attr', 'aria-autocomplete', 'list');
+            cy.get('.users-emails-input__placeholder').should('have.text', 'Enter a name or email address');
+        });
+
+        // # Click on Invite Guests link
+        cy.findByTestId('inviteGuestLink').should('be.visible').click();
+
+        // * Verify Accessibility Support in Invite People input field
+        cy.get('.users-emails-input__control').should('be.visible').within(() => {
+            cy.get('input').should('have.attr', 'aria-label', 'Invite People').and('have.attr', 'aria-autocomplete', 'list');
+            cy.get('.users-emails-input__placeholder').should('have.text', 'Enter a name or email address');
+        });
+
+        // * Verify Accessibility Support in Search and Add Channels input field
+        cy.get('.channels-input__control').should('be.visible').within(() => {
+            cy.get('input').should('have.attr', 'aria-label', 'Search and Add Channels').and('have.attr', 'aria-autocomplete', 'list');
+            cy.get('.channels-input__placeholder').should('have.text', `e.g. ${testChannel.display_name}`);
+        });
+    });
+
+    it('MM-T1457 Verify Accessibility Support in Search Autocomplete', () => {
+        // # Adding at least five other users in the channel
+        for (let i = 0; i < 5; i++) {
+            cy.apiCreateUser().then(({user}) => {
+                cy.apiAddUserToTeam(testTeam.id, user.id).then(() => {
+                    cy.apiAddUserToChannel(testChannel.id, user.id);
+                });
+            });
+        }
+
+        cy.uiGetSearchContainer().click();
+
+        // * Verify Accessibility support in search input
+        cy.uiGetSearchBox().should('have.attr', 'aria-describedby', 'searchbar-help-popup').and('have.attr', 'aria-label', 'Search messages');
+        cy.uiGetSearchBox().focus();
+        cy.get('#searchHints').should('be.visible');
+
+        // # Ensure User list is cached once in UI
+        cy.uiGetSearchBox().type('from:').wait(TIMEOUTS.ONE_SEC);
+
+        // # Trigger the user autocomplete again
+        cy.uiGetSearchBox().clear().type('from:').wait(TIMEOUTS.ONE_SEC).type('{downarrow}{downarrow}');
+
+        // * Verify Accessibility Support in search autocomplete
+        verifySearchAutocomplete(2);
+
+        // # Press Down arrow twice and verify if focus changes
+        cy.focused().type('{downarrow}{downarrow}');
+        verifySearchAutocomplete(4);
+
+        // # Press Up arrow and verify if focus changes
+        cy.focused().type('{uparrow}');
+        verifySearchAutocomplete(3);
+
+        // # Type the in: filter and ensure channel list is cached once
+        cy.uiGetSearchBox().clear().type('in:').wait(TIMEOUTS.ONE_SEC);
+
+        // # Trigger the channel autocomplete again
+        cy.uiGetSearchBox().clear().type('in:').wait(TIMEOUTS.ONE_SEC).type('{downarrow}{downarrow}');
+
+        // * Verify Accessibility Support in search autocomplete
+        verifySearchAutocomplete(2);
+
+        // # Press Up arrow and verify if focus changes
+        cy.focused().type('{uparrow}{uparrow}');
+        verifySearchAutocomplete(0);
+    });
+
+    it('MM-T1455 Verify Accessibility Support in Message Autocomplete', () => {
+        // # Adding at least one other user in the channel
+        cy.apiCreateUser().then(({user}) => {
+            cy.apiAddUserToTeam(testTeam.id, user.id).then(() => {
+                cy.apiAddUserToChannel(testChannel.id, user.id).then(() => {
+                    // * Verify Accessibility support in post input field
+                    cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).clear().focus();
+
+                    // # Ensure User list is cached once in UI
+                    cy.uiGetPostTextBox().type('@').wait(TIMEOUTS.ONE_SEC);
+
+                    // # Select the first user in the list
+                    cy.get('#suggestionList').find('.suggestion-list__item').eq(0).within((el) => {
+                        cy.get('.suggestion-list__main').invoke('text').then((text) => {
+                            cy.wrap(el).parents('body').find('#post_textbox').clear().type(text);
+                        });
+                    });
+
+                    // # Trigger the user autocomplete again
+                    cy.uiGetPostTextBox().clear().type('@').wait(TIMEOUTS.ONE_SEC).type('{uparrow}{uparrow}{downarrow}');
+
+                    // * Verify Accessibility Support in message autocomplete
+                    verifyMessageAutocomplete(1);
+
+                    // # Press Up arrow and verify if focus changes
+                    cy.focused().type('{downarrow}{uparrow}{uparrow}');
+
+                    // * Verify Accessibility Support in message autocomplete
+                    verifyMessageAutocomplete(0);
+
+                    // # Trigger the channel autocomplete filter and ensure channel list is cached once
+                    cy.uiGetPostTextBox().clear().type('~').wait(TIMEOUTS.ONE_SEC);
+
+                    // # Trigger the channel autocomplete again
+                    cy.uiGetPostTextBox().clear().type('~').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
+
+                    // * Verify Accessibility Support in message autocomplete
+                    verifyMessageAutocomplete(2);
+
+                    // # Press Up arrow and verify if focus changes
+                    cy.focused().type('{downarrow}{uparrow}{uparrow}');
+
+                    // * Verify Accessibility Support in message autocomplete
+                    verifyMessageAutocomplete(1);
+                });
+            });
+        });
+    });
+
+    it('MM-T1458 Verify Accessibility Support in Main Post Input', () => {
+        cy.get('#advancedTextEditorCell').within(() => {
+            // * Verify Accessibility Support in Main Post input
+            cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
+
+            // # Set a11y focus on the textbox
+            cy.get('#FormattingControl_bold').focus().tab({shift: true});
+
+            // * Verify if the focus is on the preview button
+            cy.get('#PreviewInputTextButton').should('be.focused').and('have.attr', 'aria-label', 'preview').tab();
+
+            // * Verify if the focus is on the bold button
+            cy.get('#FormattingControl_bold').should('be.focused').and('have.attr', 'aria-label', 'bold').tab();
+
+            // * Verify if the focus is on the italic button
+            cy.get('#FormattingControl_italic').should('be.focused').and('have.attr', 'aria-label', 'italic').tab();
+
+            // * Verify if the focus is on the strike through button
+            cy.get('#FormattingControl_strike').should('be.focused').and('have.attr', 'aria-label', 'strike through').tab();
+
+            // * Verify if the focus is on the heading button
+            cy.get('#FormattingControl_heading').should('be.focused').and('have.attr', 'aria-label', 'heading').tab();
+
+            // * Verify if the focus is on the link button
+            cy.get('#FormattingControl_link').should('be.focused').and('have.attr', 'aria-label', 'link').tab();
+
+            // * Verify if the focus is on the code block button
+            cy.get('#FormattingControl_code').should('be.focused').and('have.attr', 'aria-label', 'code').tab();
+
+            // * Verify if the focus is on the preview button
+            cy.get('#FormattingControl_quote').should('be.focused').and('have.attr', 'aria-label', 'quote').tab();
+
+            // * Verify if the focus is on the bulleted list button
+            cy.get('#FormattingControl_ul').should('be.focused').and('have.attr', 'aria-label', 'bulleted list').tab();
+
+            // * Verify if the focus is on the numbered list button
+            cy.get('#FormattingControl_ol').should('be.focused').and('have.attr', 'aria-label', 'numbered list');
+
+            // # Skip any additional controls (priority, AI rewrite, BOR) which vary by enterprise config
+            cy.get('#toggleFormattingBarButton').focus();
+
+            // * Verify if the focus is on the formatting options button
+            cy.get('#toggleFormattingBarButton').should('be.focused').and('have.attr', 'aria-label', 'formatting').tab();
+
+            // * Verify if the focus is on the attachment icon (skipping burn-on-read button when enabled)
+            cy.get('#fileUploadButton').should('be.focused').and('have.attr', 'aria-label', 'attachment').tab();
+
+            // * Verify if the focus is on the emoji picker
+            cy.get('#emojiPickerButton').should('be.focused').and('have.attr', 'aria-label', 'select an emoji').tab();
+        });
+
+        // * Verify if the focus is on the help link
+        cy.findByTestId('SendMessageButton').should('be.focused');
+    });
+
+    it('MM-T1490 Verify Accessibility Support in RHS Input', () => {
+        // # Wait till page is loaded
+        cy.uiGetPostTextBox().clear();
+
+        // # Post a message and open RHS
+        const message = `hello${Date.now()}`;
+        cy.postMessage(message);
+        cy.getLastPostId().then((postId) => {
+            // # Mouseover the post and click post comment icon.
+            cy.clickPostCommentIcon(postId);
+        });
+
+        cy.get('#rhsContainer').within(() => {
+            // * Verify Accessibility Support in RHS input
+            cy.uiGetReplyTextBox().should('have.attr', 'placeholder', 'Reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab();
+
+            // * Verify if the focus is on the preview button
+            cy.get('#PreviewInputTextButton').should('be.focused').and('have.attr', 'aria-label', 'preview').tab();
+
+            // * Verify if the focus is on the bold button
+            cy.get('#FormattingControl_bold').should('be.focused').and('have.attr', 'aria-label', 'bold').tab();
+
+            // # Tab through any remaining visible formatting controls before the overflow button.
+            // # The number of visible controls depends on the RHS width and additional controls present.
+            cy.get('#HiddenControlsButtonRHS_COMMENT').focus().click().tab();
+
+            // * Verify hidden controls are accessible via the overflow menu
+            cy.get('#FormattingControl_italic').should('exist').and('have.attr', 'aria-label', 'italic');
+            cy.get('#FormattingControl_strike').should('exist').and('have.attr', 'aria-label', 'strike through');
+            cy.get('#FormattingControl_heading').should('exist').and('have.attr', 'aria-label', 'heading');
+            cy.get('#FormattingControl_link').should('exist').and('have.attr', 'aria-label', 'link');
+            cy.get('#FormattingControl_code').should('exist').and('have.attr', 'aria-label', 'code');
+            cy.get('#FormattingControl_quote').should('exist').and('have.attr', 'aria-label', 'quote');
+            cy.get('#FormattingControl_ul').should('exist').and('have.attr', 'aria-label', 'bulleted list');
+            cy.get('#FormattingControl_ol').should('exist').and('have.attr', 'aria-label', 'numbered list');
+
+            // # Close the overflow popover, skip additional controls (priority, BOR) which vary by enterprise config
+            cy.get('#HiddenControlsButtonRHS_COMMENT').focus().type('{esc}');
+            cy.get('#toggleFormattingBarButton').focus();
+
+            // * Verify if the focus is on the formatting options button
+            cy.get('#toggleFormattingBarButton').should('be.focused').and('have.attr', 'aria-label', 'formatting').tab();
+
+            // * Verify if the focus is on the attachment icon
+            cy.get('#fileUploadButton').should('be.focused').and('have.attr', 'aria-label', 'attachment').tab();
+
+            // * Verify if the focus is on the emoji picker
+            cy.get('#emojiPickerButton').should('be.focused').and('have.attr', 'aria-label', 'select an emoji').tab();
+
+            // * Verify if the focus is on the Reply button
+            cy.findByTestId('SendMessageButton').should('be.focused');
+        });
+    });
+});
+
+function verifySearchAutocomplete(index: number) {
+    cy.get('#searchBox').find('.suggestion-list__item').eq(index).should('be.visible').
+        and('have.class', 'suggestion--selected').
+        invoke('attr', 'id').then((suggestionId) => {
+            cy.get('#searchBox').find('[role="searchbox"]').should('have.attr', 'aria-activedescendant', suggestionId);
+        });
+}
+
+function verifyMessageAutocomplete(index: number) {
+    cy.get('#suggestionList').find('.suggestion-list__item').eq(index).should('be.visible').and('have.class', 'suggestion--selected');
+    cy.get('#suggestionList').find('.suggestion-list__item').eq(index).invoke('attr', 'id').then((selectedId) => {
+        cy.wrap(selectedId).should('not.equal', '');
+
+        cy.uiGetPostTextBox().should('have.attr', 'aria-activedescendant', selectedId);
+    });
+}

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_1_spec.ts

@@ -0,0 +1,144 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+// Group: @channels @enterprise @accessibility
+
+import type {Channel} from '@mattermost/types/channels';
+import type {Team} from '@mattermost/types/teams';
+import type {UserProfile} from '@mattermost/types/users';
+
+import * as TIMEOUTS from '@/fixtures/timeouts';
+
+describe('Verify Accessibility Support in Modals & Dialogs', () => {
+    let testTeam: Team;
+    let testChannel: Channel;
+    let testUser: UserProfile;
+
+    before(() => {
+        // * Check if server has license for Guest Accounts
+        cy.apiRequireLicenseForFeature('GuestAccounts');
+
+        cy.apiInitSetup({userPrefix: 'user000a'}).then(({team, channel, user}) => {
+            testTeam = team;
+            testChannel = channel;
+            testUser = user;
+
+            cy.apiCreateUser().then(({user: newUser}) => {
+                cy.apiAddUserToTeam(testTeam.id, newUser.id).then(() => {
+                    cy.apiAddUserToChannel(testChannel.id, newUser.id);
+                });
+            });
+        });
+    });
+
+    beforeEach(() => {
+        // # Login as sysadmin and visit the town-square
+        cy.apiAdminLogin();
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+    });
+
+    it('MM-T1454 Accessibility Support in Different Modals and Dialog screen', () => {
+        // * Verify the accessibility support in Profile Dialog
+        verifyUserMenuModal('Profile');
+
+        // * Verify the accessibility support in Team Settings Dialog
+        verifyMainMenuModal('Team settings');
+
+        // * Verify the accessibility support in Manage Members Dialog
+        verifyMainMenuModal('Manage Members', `${testTeam.display_name} Members`);
+
+        cy.visit(`/${testTeam.name}/channels/off-topic`);
+
+        // * Verify the accessibility support in Channel Edit Header Dialog
+        verifyChannelMenuModal('Edit Channel Header', 'Edit Header for Off-Topic');
+
+        cy.wait(TIMEOUTS.TWO_SEC);
+
+        // * Verify the accessibility support in Channel Edit Purpose Dialog
+        verifyChannelMenuModal('Edit Channel Purpose', 'Edit Purpose for Off-Topic');
+
+        // * Verify the accessibility support in Rename Channel Dialog
+        verifyChannelMenuModal('Rename Channel');
+    });
+
+    it('MM-T1487 Accessibility Support in Manage Channel Members Dialog screen', () => {
+        // # Visit test team and channel
+        cy.visit(`/${testTeam.name}/channels/off-topic`);
+
+        // # Open Channel Members Dialog
+        cy.get('#channelHeaderTitle').click();
+        cy.findByText('Manage members').click().wait(TIMEOUTS.FIVE_SEC);
+
+        // * Verify the accessibility support in Manage Members Dialog
+        cy.findByRole('dialog', {name: 'Off-Topic Members'}).within(() => {
+            cy.findByRole('heading', {name: 'Off-Topic Members'});
+
+            // # Set focus on search input
+            cy.findByPlaceholderText('Search users').
+                focus().
+                type(' {backspace}').
+                wait(TIMEOUTS.HALF_SEC).
+                tab({shift: true}).tab();
+            cy.wait(TIMEOUTS.HALF_SEC);
+
+            // # Press tab and verify focus on first user's profile image
+            cy.focused().tab();
+            cy.findByAltText('sysadmin profile image').should('be.focused');
+
+            // # Press tab and verify focus on first user's username
+            cy.focused().tab();
+            cy.focused().should('have.text', '@sysadmin');
+
+            // # Press tab and verify focus on second user's profile image
+            cy.focused().tab();
+            cy.findByAltText(`${testUser.username} profile image`).should('be.focused');
+
+            // # Press tab and verify focus on second user's username
+            cy.focused().tab();
+            cy.focused().should('have.text', `@${testUser.username}`);
+
+            // # Press tab and verify focus on second user's dropdown option
+            cy.focused().tab();
+            cy.focused().should('have.class', 'dropdown-toggle').and('contain', 'Channel Member');
+
+            // * Verify accessibility support in search total results
+            cy.get('#searchableUserListTotal').should('have.attr', 'aria-live', 'polite');
+        });
+    });
+});
+
+function verifyMainMenuModal(menuItem: string, modalName?: string) {
+    cy.uiGetLHSHeader().click();
+    verifyModal(menuItem, modalName);
+}
+
+function verifyChannelMenuModal(menuItem: string, modalName?: string) {
+    cy.get('#channelHeaderTitle').click();
+    verifyModal(menuItem, modalName);
+}
+
+function verifyUserMenuModal(menuItem: string) {
+    cy.uiGetSetStatusButton().click();
+    verifyModal(menuItem);
+}
+
+function verifyModal(menuItem: string, modalName?: string) {
+    // * Verify that menu is open
+    cy.findByRole('menu');
+
+    // # Click menu item
+    cy.findByText(menuItem).click();
+
+    // * Verify the modal
+    const name = modalName || menuItem;
+    cy.findByRole('dialog', {name}).within(() => {
+        cy.findByRole('heading', {name});
+        cy.uiClose();
+    });
+}