Fix oppia#21068: Replaced focus() with click() for 's' key shortcut on Library and Exploration Player pages to skip to main content (oppia#21236)

* fix-21068 changed focus() to click() for s-key shortcut

* updated accessibility test for 's' key

* updated accessibility test for 's' key

* updated logged-out-user.ts to check focus on main content

---------

Co-authored-by: Hardik Goyal <[email protected]>
Co-authored-by: Sean Lip <[email protected]>

Author: 3 people

core/templates/services/keyboard-shortcut.service.ts

@@ -45,7 +45,7 @@ export class KeyboardShortcutService {
         '.oppia-skip-to-content'
       ) as HTMLElement;
       if (skipButton !== null) {
-        skipButton.focus();
+        skipButton.click();
       }
     });
 
@@ -117,7 +117,7 @@ export class KeyboardShortcutService {
         '.oppia-skip-to-content'
       ) as HTMLElement;
       if (skipButton !== null) {
-        skipButton.focus();
+        skipButton.click();
       }
     });
 

core/tests/puppeteer-acceptance-tests/utilities/user/logged-out-user.ts

@@ -355,7 +355,7 @@ const ratingContainerSelector = '.e2e-test-info-card-rating span:nth-child(2)';
 const LABEL_FOR_SUBMIT_BUTTON = 'Submit and start contributing';
 const desktopNavbarButtonsSelector = '.oppia-navbar-tab-content';
 const mobileNavbarButtonSelector = '.text-uppercase';
-const skipLinkSelector = '.e2e-test-skip-link';
+const mainContentSelector = '.e2e-test-main-content';
 const openMobileNavbarMenuButton = '.oppia-navbar-menu-icon';
 const closeMobileNavbarMenuButton = '.oppia-navbar-close-icon';
 const lessonLanguageSelector = '.oppia-content-language-selector';
@@ -3881,7 +3881,7 @@ export class LoggedOutUser extends BaseUser {
         expectedFocusedElement = await this.page.$(searchInputSelector);
         break;
       case 's':
-        expectedFocusedElement = await this.page.$(skipLinkSelector);
+        expectedFocusedElement = await this.page.$(mainContentSelector);
         break;
       case 'c':
         expectedFocusedElement = await this.page.$(

core/tests/webdriverio/accessibility.js

@@ -84,8 +84,6 @@ describe('screenreader and keyboard user accessibility features', function () {
   it('should skip to the main content element', async function () {
     await libraryPage.get();
     await browser.keys('s');
-    var skipLink = $('.e2e-test-skip-link');
-    await action.click('Skip link', skipLink);
     var mainContent = $('.e2e-test-main-content');
     expect(await mainContent.isFocused()).toEqual(true);
   });
@@ -457,8 +455,8 @@ describe('screenreader and keyboard user accessibility features', function () {
 
     await libraryPage.get();
     await waitFor.pageToFullyLoad();
-    var skipLink = $('.e2e-test-skip-link');
-    await checkActionShortcuts('s', skipLink);
+    var mainContent = $('.e2e-test-main-content');
+    await checkActionShortcuts('s', mainContent);
 
     await libraryPage.get();
     await waitFor.pageToFullyLoad();
@@ -483,8 +481,8 @@ describe('screenreader and keyboard user accessibility features', function () {
     await explorationPlayerPage.expectExplorationToNotBeOver();
 
     // Should test the skip to main content shortcut.
-    var skipLink = $('.e2e-test-skip-link');
-    await checkActionShortcuts('s', skipLink);
+    var mainContent = $('.e2e-test-main-content');
+    await checkActionShortcuts('s', mainContent);
   });
 
   it('should move focus to next and back buttons in exploration player', async function () {