Fix oppia#13461 oppia#17837 oppia#17830 oppia#17833: Fix taking a tou…

…r section with screen reader on and added h1 to editor page (oppia#19051) * fix tour and h1 * fixed lint * fix lint * Update core/templates/pages/exploration-editor-page/exploration-editor-page.component.html Co-authored-by: Rijuta Singh <68547101+Rijuta-s@users.noreply.github.com> * add directive to module * fix test * added frontend test * fix test --------- Co-authored-by: Rijuta Singh <68547101+Rijuta-s@users.noreply.github.com>
Patel-Muhammad · Oct 28, 2023 · 5bcfe0b · 5bcfe0b
1 parent e7ef913
commit 5bcfe0b
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 25 deletions.
diff --git a/core/templates/components/state-editor/state-editor.component.html b/core/templates/components/state-editor/state-editor.component.html
@@ -1,24 +1,24 @@
 <ng-template #ContentEditorTab>
-  <h3 class="e2e-test-joyride-title">Content</h3>
-  <p>An Oppia exploration is divided into several 'cards'. The first part of a card is the <b>content</b>. Use the content section to set the scene. Tell the learner a story,
+  <h3 class="e2e-test-joyride-title" tabindex="0">Content</h3>
+  <p tabindex="0">An Oppia exploration is divided into several 'cards'. The first part of a card is the <b>content</b>. Use the content section to set the scene. Tell the learner a story,
   give them some information, and then ask a relevant question.</p>
 </ng-template>
 
 <ng-template #StateInteractionEditorTab>
-  <h3 class="e2e-test-joyride-title">Interaction</h3>
-  <p>After you've written the content of your conversation, choose an <b>interaction type</b>. An interaction is how you want your learner to respond
+  <h3 class="e2e-test-joyride-title" tabindex="0">Interaction</h3>
+  <p tabindex="0">After you've written the content of your conversation, choose an <b>interaction type</b>. An interaction is how you want your learner to respond
     to your question. Oppia has several built-in interactions, including:
   </p>
-  <ul>
+  <ul tabindex="0">
     <li>Multiple Choice</li>
     <li>Text/Number input</li>
     <li>Code snippets</li>
   </ul> and more.
 </ng-template>
 
 <ng-template #StateResponsesTab>
-  <h3 class="e2e-test-joyride-title">Responses</h3>
-  <p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Responses</h3>
+  <p tabindex="0">
     After the learner uses the interaction you created, it's your turn again to choose how your exploration will respond to their input. You can send a learner to a new card or have them repeat the same card, depending on how they answer.
   </p>
 </ng-template>

diff --git a/.../templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html b/.../templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
@@ -1,11 +1,11 @@
 <ng-template #EditorTabTourContainer>
-  <h3 class="e2e-test-joyride-title">Creating in Oppia</h3>
-  <p>Explorations are learning experiences that you create using Oppia. Think of explorations as a conversation between a student and a tutor.</p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Creating in Oppia</h3>
+  <p tabindex="0">Explorations are learning experiences that you create using Oppia. Think of explorations as a conversation between a student and a tutor.</p>
 </ng-template>
 
 <ng-template #EditorTabTourTutorialComplete>
-  <h3 class="e2e-test-joyride-title">Tutorial Complete</h3>
-  <div>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Tutorial Complete</h3>
+  <div tabindex="0">
     <h4>Now for the fun part...</h4>
       That's the end of the tour! To finish up, here are some things we suggest:
     <ul>

diff --git a/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.ts b/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.ts
@@ -119,10 +119,22 @@ export class ExplorationEditorTabComponent
           document.querySelector<HTMLElement>(
             '.joyride-step__holder').style.zIndex = '1020';
 
+          document.querySelector<HTMLElement>(
+            '.joyride-step__counter').tabIndex = 0;
+
+          document.querySelector<HTMLElement>(
+            '.e2e-test-joyride-title').focus();
+
           if (value.number === 2) {
             $('html, body').animate({
               scrollTop: (true ? 0 : 20)
             }, 1000);
+
+            document.querySelector<HTMLElement>(
+              '.joyride-step__counter').tabIndex = 0;
+
+            document.querySelector<HTMLElement>(
+              '.e2e-test-joyride-title').focus();
           }
 
           if (value.number === 4) {
@@ -133,6 +145,12 @@ export class ExplorationEditorTabComponent
             $('html, body').animate({
               scrollTop: document.getElementById(idToScrollTo)?.offsetTop - 200
             }, 1000);
+
+            document.querySelector<HTMLElement>(
+              '.joyride-step__counter').tabIndex = 0;
+
+            document.querySelector<HTMLElement>(
+              '.e2e-test-joyride-title').focus();
           }
 
           if (value.number === 6) {
@@ -143,6 +161,12 @@ export class ExplorationEditorTabComponent
             $('html, body').animate({
               scrollTop: document.getElementById(idToScrollTo)?.offsetTop - 200
             }, 1000);
+
+            document.querySelector<HTMLElement>(
+              '.joyride-step__counter').tabIndex = 0;
+
+            document.querySelector<HTMLElement>(
+              '.e2e-test-joyride-title').focus();
           }
         },
         () => {},

diff --git a/core/templates/pages/exploration-editor-page/exploration-editor-page.component.html b/core/templates/pages/exploration-editor-page/exploration-editor-page.component.html
@@ -1,12 +1,12 @@
 <ng-template #EditorTabTourPreviewTab>
-  <h3 class="e2e-test-joyride-title">Preview</h3>
-  <p>At any time, you can click the <b>preview</b> button to play through your exploration.</p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Preview</h3>
+  <p tabindex="0">At any time, you can click the <b>preview</b> button to play through your exploration.</p>
 </ng-template>
 
 <div class="navbar-helper">
   <div class="navbar-tabs">
     <div class="navbar-text">
-      {{ getNavbarText() }}
+      <h1>{{ getNavbarText() }}</h1>
       <span class="e2e-test-autosave-indicator autosave-indicator" *ngIf="autosaveIsInProgress">
         &emsp;Auto Saving ...
       </span>
@@ -318,11 +318,14 @@ <h3 class="e2e-test-joyride-title">Preview</h3>
 
   .navbar-text {
     align-items: center;
-    color: #fff;
     display: flex;
+    margin-left: 3%;
+  }
+
+  .navbar-text h1 {
+    color: #fff;
     font-family: Capriola, Roboto, Arial, sans-serif;
     font-size: 20px;
-    margin-left: 3%;
   }
 
   .navbar-icons {

diff --git a/core/templates/pages/exploration-editor-page/exploration-editor-page.module.ts b/core/templates/pages/exploration-editor-page/exploration-editor-page.module.ts
@@ -119,7 +119,7 @@ import { ExplorationEditorPageComponent } from './exploration-editor-page.compon
     SharedComponentsModule,
     ExplorationPlayerViewerCommonModule,
     OppiaCkEditorCopyToolBarModule,
-    ToastrModule.forRoot(toastrConfig)
+    ToastrModule.forRoot(toastrConfig),
   ],
   declarations: [
     DeleteStateSkillModalComponent,

diff --git a/.../exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.html b/.../exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.html
@@ -1,6 +1,6 @@
 <ng-template #EditorTabTourSaveDraft>
-  <h3 class="e2e-test-joyride-title">Save</h3>
-  <p>When you're done making changes, be sure to save your work.</p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Save</h3>
+  <p tabindex="0">When you're done making changes, be sure to save your work.</p>
 </ng-template>
 
 <ul class="nav navbar-nav oppia-navbar-nav float-right">

diff --git a/core/templates/pages/exploration-editor-page/modal-templates/welcome-modal.component.html b/core/templates/pages/exploration-editor-page/modal-templates/welcome-modal.component.html
@@ -1,22 +1,24 @@
 <div class="modal-body oppia-welcome-modal-container oppia-long-text e2e-test-welcome-modal">
   <div class="row">
     <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
-      <h1 class="oppia-welcome-modal-h1">Welcome!</h1>
-      <p class="oppia-welcome-modal-p">
+      <h1 class="oppia-welcome-modal-h1" tabindex="0" #welcome>Welcome!</h1>
+      <p class="oppia-welcome-modal-p" tabindex="0">
         It looks like you're new to creating explorations.
       </p>
-      <p class="oppia-welcome-modal-p">
+      <p class="oppia-welcome-modal-p" tabindex="0">
         Would you like an introduction to creating in Oppia?
       </p>
 
       <button type="button"
               class="btn oppia-welcome-modal-button oppia-transition-200 e2e-test-start-tutorial oppia-autofocus oppia-welcome-modal-left-button"
-              (click)="confirm(explorationId)" autofocus>
+              (keydown.enter)="confirm(explorationId)"
+              (click)="confirm(explorationId)">
         Yes, please!
       </button>
 
       <button type="button"
               class="btn oppia-welcome-modal-button oppia-transition-200 e2e-test-dismiss-welcome-modal"
+              (keydown.enter)="cancel()"
               (click)="cancel()">
         Nope, take me to the editor
       </button>

diff --git a/core/templates/pages/exploration-editor-page/modal-templates/welcome-modal.component.spec.ts b/core/templates/pages/exploration-editor-page/modal-templates/welcome-modal.component.spec.ts
@@ -16,7 +16,7 @@
  * @fileoverview Unit tests for WelcomeModalComponent.
  */
 
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA, ElementRef } from '@angular/core';
 import { ComponentFixture, waitForAsync, TestBed } from '@angular/core/testing';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { UrlInterpolationService } from
@@ -83,6 +83,8 @@ describe('Welcome Modal Component', () => {
   });
 
   it ('should evaluate exploration id when component is initialized', () => {
+    const welcomeModalRef = new ElementRef(document.createElement('h1'));
+    component.welcomeHeading = welcomeModalRef;
     expect(component.explorationId).toBe(explorationId);
     expect(component.editorWelcomeImgUrl).toBe(
       '/assets/images/general/editor_welcome.svg');
@@ -91,6 +93,8 @@ describe('Welcome Modal Component', () => {
   });
 
   it ('should close the modal', () => {
+    const welcomeModalRef = new ElementRef(document.createElement('h1'));
+    component.welcomeHeading = welcomeModalRef;
     const dismissSpy = spyOn(ngbActiveModal, 'dismiss').and.callThrough();
     component.cancel();
     expect(dismissSpy).toHaveBeenCalledWith();

diff --git a/core/templates/pages/exploration-editor-page/modal-templates/welcome-modal.component.ts b/core/templates/pages/exploration-editor-page/modal-templates/welcome-modal.component.ts
@@ -15,7 +15,7 @@
 /**
  * @fileoverview Component for welcome modal.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ConfirmOrCancelModal } from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component';
 import { ContextService } from 'services/context.service';
@@ -33,6 +33,7 @@ export class WelcomeModalComponent
   // https://github.com/oppia/oppia/wiki/Guide-on-defining-types#ts-7-1
   @Input() explorationId!: string;
   @Input() editorWelcomeImgUrl!: string;
+  @ViewChild('welcome') welcomeHeading!: ElementRef;
 
   constructor(
     private ngbActiveModal: NgbActiveModal,
@@ -49,6 +50,7 @@ export class WelcomeModalComponent
       this.explorationId);
     this.editorWelcomeImgUrl = this.urlInterpolationService.getStaticImageUrl(
       '/general/editor_welcome.svg');
+    this.welcomeHeading?.nativeElement.focus();
   }
 
   cancel(): void {