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}');