MM-61566 - focus first focusable element (#30294)

* MM-61566 - focus first focusable element

* adjust e2e tests to new focused element

* adjust real-events library to use with cypress

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

@@ -192,51 +192,49 @@ describe('Accessibility tests for RHS getting focus after buttons actions', () =
     });
 
     it('Focus should be on RHS when opening Recent Mentions', () => {
-        // # Click the Recent Mentions button
-        cy.findByRole('button', {name: /Recent mentions/i}).click();
+        // # Enter key press on the Recent Mentions button
+        cy.findByRole('button', {name: /Recent mentions/i}).focus().realPress('Enter');
 
         // * 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');
+        cy.findByLabelText('Expand Sidebar Icon').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();
+        // # Enter key press on the Saved Messages button
+        cy.findByRole('button', {name: /Saved messages/i}).focus().realPress('Enter');
 
         // * 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');
+        cy.findByLabelText('Expand Sidebar Icon').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();
+        // # Enter key press on the Members button
+        cy.get('#member_rhs').should('be.visible').focus().realPress('Enter');
 
         // * 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');
+        cy.get('.sidebar-right-container').find('#rhsCloseButton').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();
+        // # Enter key press on the Channel files button
+        cy.findByRole('button', {name: /Channel files/i}).focus().realPress('Enter');
 
         // * 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');
+        cy.findByLabelText('Expand Sidebar Icon').should('be.focused');
     });
 });