MM-62288 - add e2e to RHS focus functionality (#29655)

* MM-62288 - add e2e to RHS focus functionality

* remove describe only

* Use existence check before closing RHS

* modify close rhs function to not fail when rhs is not opened

* avoid body to not get found

---------

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

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_sidebar_spec.ts

@@ -165,6 +165,81 @@ describe('Verify Accessibility Support in Channel Sidebar Navigation', () => {
     });
 });
 
+describe('Accessibility tests for RHS getting focus after buttons actions', () => {
+    let testUser;
+
+    before(() => {
+        cy.apiInitSetup().then(({team, user}) => {
+            testUser = user;
+
+            // # Login as the test user and visit the town-square channel
+            cy.apiLogin(testUser);
+            cy.visit(`/${team.name}/channels/town-square`);
+            cy.get('#postListContent').should('be.visible');
+        });
+    });
+
+    beforeEach(() => {
+        // # Close the RHS
+        cy.uiCloseRHS();
+        cy.get('#sidebar-right').should('not.exist');
+    });
+
+    afterEach(() => {
+        // # Close the RHS
+        cy.uiCloseRHS();
+        cy.get('#sidebar-right').should('not.exist');
+    });
+
+    it('Focus should be on RHS when opening Recent Mentions', () => {
+        // # Click the Recent Mentions button
+        cy.findByRole('button', {name: /Recent mentions/i}).click();
+
+        // * Verify RHS is open
+        cy.get('#sidebar-right').should('be.visible');
+
+        // * Check that the RHS container is focused
+        cy.get('.sidebar-right-container').should('be.focused');
+    });
+
+    it('Focus should be on RHS when opening Saved Messages', () => {
+        // # Click the Saved Messages button
+        cy.findByRole('button', {name: /Saved messages/i}).click();
+
+        // * Verify RHS is open
+        cy.get('#sidebar-right').should('be.visible');
+
+        // * Check that the RHS container is focused
+        cy.get('.sidebar-right-container').should('be.focused');
+    });
+
+    it('Focus should be on RHS when opening Members', () => {
+        cy.get('#channelHeaderInfo').should('exist');
+
+        // # Click the Members button
+        cy.get('#member_rhs').
+            should('be.visible').
+            click();
+
+        // * Verify RHS is open
+        cy.get('#sidebar-right').should('be.visible');
+
+        // * Check that the RHS container is focused
+        cy.get('.sidebar-right-container').should('be.focused');
+    });
+
+    it('Focus should be on RHS when opening Channel files', () => {
+        // # Click the Channel files button
+        cy.findByRole('button', {name: /Channel files/i}).click();
+
+        // * Verify RHS is open
+        cy.get('#sidebar-right').should('be.visible');
+
+        // * Check that the RHS container is focused
+        cy.get('.sidebar-right-container').should('be.focused');
+    });
+});
+
 function markAsFavorite(channelName) {
     // # Visit the channel
     cy.get(`#sidebarItem_${channelName}`).click();

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

@@ -88,7 +88,7 @@ describe('Messaging', () => {
         });
     });
 
-    it.skip('MM-T91 Replying to an older post by a user that has no content (only file attachments)', () => {
+    it('MM-T91 Replying to an older post by a user that has no content (only file attachments)', () => {
         // # Get yesterdays date in UTC
         const yesterdaysDate = Cypress.dayjs().subtract(1, 'days').valueOf();
 

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

@@ -10,7 +10,12 @@ Cypress.Commands.add('uiGetRHS', (options = {visible: true}) => {
 });
 
 Cypress.Commands.add('uiCloseRHS', () => {
-    cy.findByLabelText('Close Sidebar Icon').click();
+    cy.document().then((doc) => {
+        const closeButton = doc.querySelector('[aria-label="Close Sidebar Icon"]');
+        if (closeButton) {
+            closeButton.click();
+        }
+    });
 });
 
 Cypress.Commands.add('uiExpandRHS', () => {

webapp/channels/src/components/sidebar_right/sidebar_right.tsx

@@ -157,7 +157,7 @@ export default class SidebarRight extends React.PureComponent<Props, State> {
 
         if (this.props.isOpen && (contentChanged || (!wasOpen && isOpen))) {
             this.previousActiveElement = document.activeElement as HTMLElement;
-            requestAnimationFrame(() => {
+            setTimeout(() => {
                 if (this.sidebarRight.current) {
                     document.dispatchEvent(
                         new CustomEvent<A11yFocusEventDetail>(A11yCustomEventTypes.FOCUS, {
@@ -168,14 +168,14 @@ export default class SidebarRight extends React.PureComponent<Props, State> {
                         }),
                     );
                 }
-            });
+            }, 0);
         } else if (!this.props.isOpen && wasOpen) {
             // RHS just was closed, restore focus to the previous element had it
             // this will have to change for upcoming work specially for search and probalby plugins
             if (a11yController.originElement) {
                 a11yController.restoreOriginFocus();
             } else {
-                requestAnimationFrame(() => {
+                setTimeout(() => {
                     if (this.previousActiveElement) {
                         document.dispatchEvent(
                             new CustomEvent<A11yFocusEventDetail>(A11yCustomEventTypes.FOCUS, {
@@ -187,7 +187,7 @@ export default class SidebarRight extends React.PureComponent<Props, State> {
                         );
                         this.previousActiveElement = null;
                     }
-                });
+                }, 0);
             }
         }
     }