MM-61576 - add a11y to messages and files results tabs (#29740)

* MM-61576 - add a11y to messages and files results tabs

* add coverage for left-right arrow focus tab and fix broken test

* add the proper role and label to RHS - MM-61615

* fix linter

* fix e2e tests

---------

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

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

@@ -58,13 +58,26 @@ describe('Verify Accessibility keyboard usability across different regions in th
         // # Change the focus to search results
         cy.get('#searchContainer').within(() => {
             cy.get('button.sidebar--right__expand').focus().tab({shift: true}).tab();
-            cy.focused().tab().tab().tab().tab();
+
+            // # focus the messages and files tabs
+            cy.focused().tab().tab();
         });
+
+        // # verify the tabs buttons files or messages are accesible via left and right keys
+        cy.get('body').type('{rightarrow}').wait(100);
+        cy.get('#filesTab').should('have.class', 'a11y--active a11y--focused');
+
+        cy.get('body').type('{leftarrow}').wait(100);
+        cy.get('#messagesTab').should('have.class', 'a11y--active a11y--focused');
+
+        // # move focus to search results items
+        cy.focused().tab();
+
         cy.get('body').type('{downarrow}{uparrow}');
 
         // # Use down arrow keys and verify if results are highlighted sequentially
         for (let index = 0; index < count; index++) {
-            cy.get('#search-items-container').children('.search-item__container').eq(index).then(($el) => {
+            cy.get('.files-or-messages-panel').children('.search-item__container').eq(index).then(($el) => {
                 // * Verify search result is highlighted
                 cy.get($el).find('.post').should('have.class', 'a11y--active a11y--focused');
                 cy.get('body').type('{downarrow}');
@@ -73,7 +86,7 @@ describe('Verify Accessibility keyboard usability across different regions in th
 
         // # Use up arrow keys and verify if results are highlighted sequentially
         for (let index = count; index > 0; index--) {
-            cy.get('#search-items-container').children('.search-item__container').eq(index).then(($el) => {
+            cy.get('.files-or-messages-panel').children('.search-item__container').eq(index).then(($el) => {
                 // * Verify search result is highlighted
                 cy.get($el).find('.post').should('have.class', 'a11y--active a11y--focused');
                 cy.get('body').type('{uparrow}');

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

@@ -51,7 +51,7 @@ describe('Messaging', () => {
         cy.get('#channelHeaderPinButton').click();
 
         // * Verify the pinned posts (4 & 6) are added to the Pinned Posts list on the right hand side
-        cy.get('#search-items-container').children().should('have.length', 2);
+        cy.get('.files-or-messages-panel').children().should('have.length', 2);
 
         // # Close out of the Pinned Post side bar
         cy.get('#searchResultsCloseButton').click();
@@ -78,11 +78,11 @@ describe('Messaging', () => {
                     cy.get('#channelHeaderPinButton').click();
 
                     // * Verify that there are now 3 pinned messages in the right-hand-side
-                    cy.get('#search-items-container').children().should('have.length', 3);
+                    cy.get('.files-or-messages-panel').children().should('have.length', 3);
 
                     // * Verify sorted by newest at top: 1st post is the newest, and 3rd post is the oldest
-                    cy.get('#search-items-container').children().eq(0).get(`#postMessageText_${lastPostId}`);
-                    cy.get('#search-items-container').children().eq(2).get(`#postMessageText_${postId}`).and('contain', pinnedPostText);
+                    cy.get('.files-or-messages-panel').children().eq(0).get(`#postMessageText_${lastPostId}`);
+                    cy.get('.files-or-messages-panel').children().eq(2).get(`#postMessageText_${postId}`).and('contain', pinnedPostText);
 
                     // # Scroll back up to the last pinned post.
                     cy.get(`#post_${postId}`).scrollIntoView();
@@ -93,10 +93,10 @@ describe('Messaging', () => {
                     cy.get(`#unpin_post_${postId}`).click();
 
                     // * Right-hand-side only has 2 initially pinned posts
-                    cy.get('#search-items-container').children().should('have.length', 2);
+                    cy.get('.files-or-messages-panel').children().should('have.length', 2);
 
                     // * Right-hand-side does not have the last pinned post.
-                    cy.get('#search-items-container').children().should('not.contain', `#rhsPostMessageText_${postId}`);
+                    cy.get('.files-or-messages-panel').children().should('not.contain', `#rhsPostMessageText_${postId}`);
                 });
             });
         });