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/package-lock.json

@@ -42,6 +42,7 @@
         "cypress-file-upload": "5.0.8",
         "cypress-multi-reporters": "1.6.4",
         "cypress-plugin-tab": "1.0.5",
+        "cypress-real-events": "1.14.0",
         "cypress-wait-until": "3.0.1",
         "dayjs": "1.11.10",
         "deepmerge": "4.3.1",
@@ -4611,6 +4612,15 @@
         "ally.js": "^1.4.1"
       }
     },
+    "node_modules/cypress-real-events": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.14.0.tgz",
+      "integrity": "sha512-XmI8y3OZLh6cjRroPalzzS++iv+pGCaD9G9kfIbtspgv7GVsDt30dkZvSXfgZb4rAN+3pOkMVB7e0j4oXydW7Q==",
+      "dev": true,
+      "peerDependencies": {
+        "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x || ^14.x"
+      }
+    },
     "node_modules/cypress-wait-until": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cypress-wait-until/-/cypress-wait-until-3.0.1.tgz",
@@ -14931,6 +14941,13 @@
         "ally.js": "^1.4.1"
       }
     },
+    "cypress-real-events": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.14.0.tgz",
+      "integrity": "sha512-XmI8y3OZLh6cjRroPalzzS++iv+pGCaD9G9kfIbtspgv7GVsDt30dkZvSXfgZb4rAN+3pOkMVB7e0j4oXydW7Q==",
+      "dev": true,
+      "requires": {}
+    },
     "cypress-wait-until": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cypress-wait-until/-/cypress-wait-until-3.0.1.tgz",

e2e-tests/cypress/package.json

@@ -37,6 +37,7 @@
     "cypress-file-upload": "5.0.8",
     "cypress-multi-reporters": "1.6.4",
     "cypress-plugin-tab": "1.0.5",
+    "cypress-real-events": "1.14.0",
     "cypress-wait-until": "3.0.1",
     "dayjs": "1.11.10",
     "deepmerge": "4.3.1",

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

e2e-tests/cypress/tests/support/index.js

@@ -14,6 +14,7 @@ import '@testing-library/cypress/add-commands';
 import 'cypress-file-upload';
 import 'cypress-wait-until';
 import 'cypress-plugin-tab';
+import 'cypress-real-events';
 import addContext from 'mochawesome/addContext';
 
 import './api';

e2e-tests/cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "esnext",
     "lib": ["esnext", "dom"],
-    "types": ["cypress", "cypress-wait-until", "@testing-library/cypress", "node"],
+    "types": ["cypress", "cypress-wait-until", "cypress-real-events", "@testing-library/cypress", "node"],
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "moduleResolution": "node",