[MA-27]: MM-61599: Remove tabIndex from non-interactive elements

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

@@ -157,8 +157,7 @@ describe('Verify Accessibility Support in Post', () => {
         postMessages(testChannel, otherUser, 1);
 
         // # Shift focus to the last post
-        cy.get('#FormattingControl_bold').focus().tab({shift: true}).tab({shift: true}).type('{uparrow}{downarrow}');
-        cy.focused().tab();
+        cy.get('#FormattingControl_bold').focus().tab({shift: true}).tab({shift: true}).tab({shift: true}).tab({shift: true});
 
         cy.getLastPostId().then((postId) => {
             cy.get(`#post_${postId}`).within(() => {
@@ -199,9 +198,6 @@ describe('Verify Accessibility Support in Post', () => {
                 // * Verify focus is on the more button
                 cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
                 cy.focused().tab();
-
-                // * Verify focus is on the post text
-                cy.get(`#postMessageText_${postId}`).should('be.focused');
             });
         });
     });
@@ -230,36 +226,32 @@ describe('Verify Accessibility Support in Post', () => {
         // * Verify reverse tab on RHS
         cy.getLastPostId().then((postId) => {
             cy.get(`#rhsPost_${postId}`).within(() => {
-                // * Verify focus is on the post text
-                cy.get(`#rhsPostMessageText_${postId}`).should('be.focused');
-                cy.focused().tab({shift: true});
-
-                // * Verify focus is on the more button
-                cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
+                // * Verify focus is on the time
+                cy.get(`#RHS_COMMENT_time_${postId}`).should('be.focused');
                 cy.focused().tab({shift: true});
 
-                // * Verify focus is on the actions button
-                cy.get(`#RHS_COMMENT_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions');
-                cy.focused().tab({shift: true});
+                // * Verify focus is on the username
+                cy.get('button.user-popover').should('be.focused');
+                cy.focused().tab().tab();
 
-                // * Verify focus is on the save icon
-                cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message');
-                cy.focused().tab({shift: true});
+                // * Verify focus is on most recent action
+                cy.get('#recent_reaction_0').should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label');
+                cy.focused().tab();
 
                 // * Verify focus is on the reactions button
                 cy.get(`#RHS_COMMENT_reaction_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'Add Reaction');
-                cy.focused().tab({shift: true});
+                cy.focused().tab();
 
-                // * Verify focus is on most recent action
-                cy.get('#recent_reaction_0').should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label');
-                cy.focused().tab({shift: true});
+                // * Verify focus is on the save icon
+                cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message');
+                cy.focused().tab();
 
-                // * Verify focus is on the time
-                cy.get(`#RHS_COMMENT_time_${postId}`).should('be.focused');
-                cy.focused().tab({shift: true});
+                // * Verify focus is on the actions button
+                cy.get(`#RHS_COMMENT_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions');
+                cy.focused().tab();
 
-                // * Verify focus is on the username
-                cy.get('button.user-popover').should('be.focused');
+                // * Verify focus is on the more button
+                cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
                 cy.focused().tab({shift: true});
             });
         });

e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js

@@ -36,13 +36,13 @@ describe('Channel Settings - Channel Header', () => {
             cy.findByText('Edit Channel Header').click();
 
             // # Type something in the header edit box
-            cy.get('[aria-label="edit the channel header..."]').clear().type('This is the new header content');
+            cy.get('textarea[placeholder="Edit the Channel Header..."]').clear().type('This is the new header content');
 
             // * Verify the "Preview" button exists
             cy.findByText('Preview').should('be.visible');
 
             // * Verify that before hitting the preview button, the style on the textbox is `display: block`
-            cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'block');
+            cy.get('textarea[placeholder="Edit the Channel Header..."]').should('have.css', 'display', 'block');
 
             // # Click the "Preview" button
             cy.findByText('Preview').click();
@@ -51,7 +51,7 @@ describe('Channel Settings - Channel Header', () => {
             cy.findByText('Edit').should('be.visible');
 
             // * Verify that the display is now none on the textbox element
-            cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'none');
+            cy.get('textarea[placeholder="Edit the Channel Header..."]').should('have.css', 'display', 'none');
         });
     });
 });

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

@@ -122,7 +122,7 @@ describe('Verify Accessibility Support in different input fields', () => {
             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', 'aria-label', `write to ${testChannel.display_name}`).clear().focus();
+                    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.FIVE_SEC);
@@ -168,7 +168,7 @@ describe('Verify Accessibility Support in different input fields', () => {
     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', 'aria-label', `write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
+            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});
@@ -231,7 +231,7 @@ describe('Verify Accessibility Support in different input fields', () => {
 
         cy.get('#rhsContainer').within(() => {
             // * Verify Accessibility Support in RHS input
-            cy.uiGetReplyTextBox().should('have.attr', 'aria-label', 'reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab({shift: true}).tab().tab();
+            cy.uiGetReplyTextBox().should('have.attr', 'placeholder', 'Reply to this thread...').and('have.attr', 'role', 'textbox').focus().type('test').tab({shift: true}).tab().tab();
 
             // * Verify if the focus is on the preview button
             cy.get('#PreviewInputTextButton').should('be.focused').and('have.attr', 'aria-label', 'preview').tab();

e2e-tests/cypress/tests/integration/channels/enterprise/system_console/channel_moderation/create_posts_spec.ts

@@ -61,7 +61,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
 
         // # Check Guest user should not have the permission to create a post on a channel when the option is removed
         // * Guest user should see a message stating that this channel is read-only and the textbox area should be disabled
-        cy.findByTestId('post_textbox_placeholder').should('have.text', 'This channel is read-only. Only members with permission can post here.');
+        cy.findByTestId('post_textbox').should('have.attr', 'placeholder', 'This channel is read-only. Only members with permission can post here.');
         cy.findByTestId('post_textbox').should('be.disabled');
 
         // # As a system admin, check the option to allow Create Posts for Guests and save
@@ -75,7 +75,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
         // # Check Guest user should have the permission to create a post on a channel when the option is allowed
         // * Guest user should see a message stating that this channel is read-only and the textbox area should be disabled
         cy.findByTestId('post_textbox').clear();
-        cy.findByTestId('post_textbox_placeholder').should('have.text', `Write to ${testChannel.display_name}`);
+        cy.findByTestId('post_textbox').should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`);
         cy.findByTestId('post_textbox').should('not.be.disabled');
     });
 
@@ -92,7 +92,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
 
         // # Check Member should not have the permission to create a post on a channel when the option is removed.
         // * User should see a message stating that this channel is read-only and the textbox area should be disabled
-        cy.findByTestId('post_textbox_placeholder').should('have.text', 'This channel is read-only. Only members with permission can post here.');
+        cy.findByTestId('post_textbox').should('have.attr', 'placeholder', 'This channel is read-only. Only members with permission can post here.');
         cy.findByTestId('post_textbox').should('be.disabled');
 
         // # As a system admin, check the option to allow Create Posts for Members and save
@@ -106,7 +106,7 @@ describe('MM-23102 - Channel Moderation - Create Posts', () => {
         // # Check Member should have the permission to create a post on a channel when the option is allowed
         // * Member user should see a message stating that this channel is read-only and the textbox area should be disabled
         cy.findByTestId('post_textbox').clear();
-        cy.findByTestId('post_textbox_placeholder').should('have.text', `Write to ${testChannel.display_name}`);
+        cy.findByTestId('post_textbox').should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`);
         cy.findByTestId('post_textbox').should('not.be.disabled');
     });
 });

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

@@ -31,7 +31,7 @@ describe('Keyboard Shortcuts', () => {
         // * Verify modal is open
         cy.findByRole('dialog', {name: 'Edit Header for Off-Topic'}).within(() => {
             // # Enter new header and save
-            cy.findByRole('textbox', {name: 'edit the channel header...'}).type(newHeader);
+            cy.findByRole('textbox', {name: 'Edit the text appearing next to the channel name in the header.'}).type(newHeader);
             cy.uiSave();
         });
 

e2e-tests/cypress/tests/integration/channels/mark_as_unread/archive_channel_mark_as_unread_spec.js

@@ -75,12 +75,6 @@ describe('Channels', () => {
         // * Verify the "Mark as Unread" option is absent in post menu
         markAsUnreadShouldBeAbsent(post1.id);
 
-        // * Hover on the post with holding alt should show cursor
-        cy.get(`#post_${post1.id}`).trigger('mouseover').type('{alt}', {release: false}).should(notShowCursor);
-
-        // # Mouse click on the post holding alt
-        cy.get(`#post_${post1.id}`).type('{alt}', {release: false}).click();
-
         // * Verify the post is not marked as unread
         cy.get('.NotificationSeparator').should('not.exist');
     });

e2e-tests/cypress/tests/integration/channels/mark_as_unread/mark_as_unread_using_shortcuts_spec.js

@@ -61,8 +61,8 @@ describe('Mark as Unread', () => {
         // * Hover on the post with holding alt should show cursor
         cy.get(`#post_${post2.id}`).trigger('mouseover').type('{alt}', {release: false}).should(showCursor);
 
-        // # Mouse click on the post holding alt
-        cy.get(`#post_${post2.id}`).type('{alt}', {release: false}).click();
+        // # Mouse click on the post
+        cy.get(`#post_${post2.id}`).click();
 
         // * Verify the post is marked as unread
         verifyPostNextToNewMessageSeparator('post2');

e2e-tests/cypress/tests/integration/channels/messaging/message_reaction_gm_spec.js

@@ -64,10 +64,15 @@ describe('Emoji reactions to posts/messages in GM channels', () => {
             cy.findByLabelText('Add a reaction').should('not.be.visible');
 
             // # Focus on the post since we can't hover with Cypress
-            cy.get(`#post_${postId}`).focus().tab().tab();
+            // cy.get(`#post_${postId}`).focus().tab().tab();
 
-            // * Verify that the Add Reaction button is now visible
-            cy.findByLabelText('Add a reaction').should('be.visible');
+            cy.get(`#post_${postId}`).within(() => {
+                // * Verify focus is on profile image
+                cy.get('.status-wrapper button').focus().tab();
+
+                // * Verify that the Add Reaction button is now visible
+                cy.findByLabelText('Add a reaction').should('be.visible');
+            });
 
             // # Click somewhere to clear the focus
             cy.get('#channelIntro').click();

e2e-tests/cypress/tests/integration/channels/plugins/link_tooltip_spec.js

@@ -39,23 +39,20 @@ describe('Link tooltips', () => {
         cy.apiInitSetup({loginAfter: true}).then(({team, channel}) => {
             cy.visit(`/${team.name}/channels/${channel.name}`);
         });
-        cy.postMessage('www.test.com');
     });
 
     it('MM-T3422 fade in and out with an animation', () => {
-        cy.get('a[href*="www.test.com"] span').as('link');
-        cy.contains('This is a custom tooltip from the Demo Plugin').parents('.tooltip-container').as('tooltip-container');
+        const url = 'www.test.com';
+        cy.postMessage(url);
+        cy.uiWaitUntilMessagePostedIncludes(url);
 
-        // # Mouse over the link
-        cy.get('@link').trigger('mouseover');
+        // # Hover over the plugin link
+        cy.findByText(url).should('exist').focus();
 
         // * Check tooltip has appeared
-        cy.get('@tooltip-container').should('have.class', 'visible');
+        cy.findByText('This is a custom tooltip from the Demo Plugin').should('be.visible');
 
-        // # Mouse out the link
-        cy.get('@link').trigger('mouseout');
-
-        // * Check tooltip has disappeared
-        cy.get('@tooltip-container').should('not.have.class', 'visible');
+        // # Close the tooltip
+        cy.get('body').type('{esc}');
     });
 });

e2e-tests/playwright/package.json

@@ -27,7 +27,8 @@
         "dotenv": "16.4.5",
         "form-data-encoder": "4.0.2",
         "formdata-node": "6.0.3",
-        "uuid": "11.0.3"
+        "uuid": "11.0.3",
+        "zod": "3.24.1"
     },
     "devDependencies": {
         "@types/uuid": "10.0.0",

e2e-tests/playwright/support/file.ts

@@ -0,0 +1,65 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import path from 'node:path';
+import fs from 'node:fs';
+
+const assetPath = path.resolve(__dirname, 'asset');
+
+/**
+ * Reads file data and creates a File object.
+ * @param filePath - The path to the file.
+ * @param mimeType - The MIME type of the file.
+ * @returns A File object containing the file data.
+ * @throws If the file does not exist.
+ */
+export function getFileData(filePath: string, mimeType: string): File {
+    if (!fs.existsSync(filePath)) {
+        throw new Error(`File not found at path: ${filePath}`);
+    }
+
+    const fileName = path.basename(filePath);
+    const fileBuffer = fs.readFileSync(filePath);
+
+    return new File([fileBuffer], fileName, {type: mimeType});
+}
+
+/**
+ * Reads file data from the "asset" directory and creates a File object.
+ * @param filename - The name of the file in the "asset" directory.
+ * @param mimeType - The MIME type of the file.
+ * @returns An object containing a File object and the filename.
+ */
+export function getFileDataFromAsset(filename: string, mimeType: string) {
+    const filePath = path.join(assetPath, filename);
+
+    return {file: getFileData(filePath, mimeType), filename: path.basename(filePath)};
+}
+
+/**
+ * Reads file data and creates a Blob object.
+ * @param filePath - The path to the file.
+ * @param mimeType - The MIME type of the file.
+ * @returns A Blob object containing the file data.
+ * @throws If the file does not exist.
+ */
+export function getBlobData(filePath: string, mimeType: string): Blob {
+    if (!fs.existsSync(filePath)) {
+        throw new Error(`File not found at path: ${filePath}`);
+    }
+    const fileBuffer = fs.readFileSync(filePath);
+
+    return new Blob([fileBuffer], {type: mimeType});
+}
+
+/**
+ * Reads file data from the "asset" directory and creates a Blob object.
+ * @param filename - The name of the file in the "asset" directory.
+ * @param mimeType - The MIME type of the file.
+ * @returns An object containing a Blob object and the filename.
+ */
+export function getBlobDataFromAsset(filename: string, mimeType: string) {
+    const filePath = path.join(assetPath, filename);
+
+    return {blob: getBlobData(filePath, mimeType), filename: path.basename(filePath)};
+}

e2e-tests/playwright/support/server/init.ts

@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import path from 'node:path';
 import {expect} from '@playwright/test';
 
 import {PreferenceType} from '@mattermost/types/preferences';
 import testConfig from '@e2e-test.config';
+import {getFileDataFromAsset} from '@e2e-support/file';
 
 import {makeClient} from '.';
 import {getOnPremServerConfig} from './default_config';
@@ -42,9 +42,8 @@ export async function initSetup({
         const {client: userClient} = await makeClient(user);
 
         if (withDefaultProfileImage) {
-            // Set user profile image
-            const fullPath = path.join(path.resolve(__dirname), '../', 'asset/mattermost-icon_128x128.png');
-            await userClient.uploadProfileImageX(user.id, fullPath);
+            const {file} = getFileDataFromAsset('mattermost-icon_128x128.png', 'image/png');
+            await userClient.uploadProfileImage(user.id, file);
         }
 
         // Update user preference