Fix - oppia#17000 oppia#16997 oppia#16995 oppia#16977 oppia#16982 Fix…

… the naviagtion issues with the lesson info modal (oppia#19011) * fix lesson info a11y * changed the alt of img
heyimShivam · Oct 20, 2023 · 282c1eb · 282c1eb
1 parent 0c34936
commit 282c1eb
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/core/templates/components/profile-link-directives/profile-link-image.component.html b/core/templates/components/profile-link-directives/profile-link-image.component.html
@@ -2,12 +2,12 @@
   <picture>
     <source type="image/webp" [srcset]="profilePictureWebpDataUrl">
     <source type="image/png" [srcset]="profilePicturePngDataUrl">
-    <img [src]="profilePicturePngDataUrl" class="rounded-circle" alt="User Avatar">
+    <img [src]="profilePicturePngDataUrl" class="rounded-circle" [alt]="username">
   </picture>
 </a>
 
 <picture *ngIf="!isUsernameLinkable(username)">
   <source type="image/webp" [srcset]="profilePictureWebpDataUrl">
   <source type="image/png" [srcset]="profilePicturePngDataUrl">
-  <img [src]="profilePicturePngDataUrl" class="rounded-circle" alt="User Avatar">
+  <img [src]="profilePicturePngDataUrl" class="rounded-circle" [alt]="username">
 </picture>
diff --git a/...mplates/pages/exploration-player-page/layout-directives/exploration-footer.component.html b/...mplates/pages/exploration-player-page/layout-directives/exploration-footer.component.html
@@ -21,10 +21,10 @@ <h1>
               {{ 'I18N_LESSON_INFO_HEADER' | translate }}
           </span>
         </h1>
-        <li class="oppia-exploration-info-icon e2e-test-exploration-info-icon">
+        <div class="oppia-exploration-info-icon e2e-test-exploration-info-icon">
           <i class="fas fa-info-circle oppia-navbar-breadcrumb-icon oppia-footer-info-icon"></i>
           <span class="oppia-icon-accessibility-label">{{ 'I18N_PLAYER_INFO_TOOLTIP' | translate }}</span>
-        </li>
+        </div>
       </button>
       <oppia-hint-and-solution-buttons *ngIf="windowIsNarrow && hintsAndSolutionsAreSupported">
       </oppia-hint-and-solution-buttons>

diff --git a/...lates/pages/exploration-player-page/templates/lesson-information-card-modal.component.css b/...lates/pages/exploration-player-page/templates/lesson-information-card-modal.component.css
@@ -81,6 +81,7 @@
   bottom: 0;
   color: #fff;
   font-family: "Capriola", "Roboto", Arial, sans-serif;
+  font-size: 1.5em;
   margin: 12px 0 0 0;
   padding: 0;
   position: relative;

diff --git a/...ates/pages/exploration-player-page/templates/lesson-information-card-modal.component.html b/...ates/pages/exploration-player-page/templates/lesson-information-card-modal.component.html
@@ -3,10 +3,11 @@
     <img [src]="getStaticImageUrl(infoCardBackgroundImageUrl)"
          class="oppia-info-card-bg-image"
          alt="{{ expCategory }}">
-    <h2 class="oppia-info-card-title break-word" *ngIf="isHackyExpTitleTranslationDisplayed()">
+    <h2 class="oppia-info-card-title break-word" *ngIf="isHackyExpTitleTranslationDisplayed()" tabindex="0">
       {{ expTitleTranslationKey | translate }}
     </h2>
     <h2 class="oppia-info-card-title break-word"
+        tabindex="0"
         *ngIf="!isHackyExpTitleTranslationDisplayed()">
       {{ expTitle }}
     </h2>
@@ -19,10 +20,11 @@ <h2 class="oppia-info-card-title break-word" *ngIf="isHackyExpTitleTranslationDi
           {{ expDesc | truncateAndCapitalize: 90 }}
         </h4>
         <h4 class="oppia-exploration-description"
+            tabindex="0"
             *ngIf="isHackyExpDescTranslationDisplayed()">
           {{ expDescTranslationKey | translate | truncateAndCapitalize: 90 }}
         </h4>
-        <h4 [ngClass]="(checkpointCount === 1) ? 'd-none' : 'progress-bar-label-text'">
+        <h4 tabindex="0" [ngClass]="(checkpointCount === 1) ? 'd-none' : 'progress-bar-label-text'">
           Learning Progress
         </h4>
         <div class="progress-bar-container"
@@ -49,6 +51,8 @@ <h4 [ngClass]="(checkpointCount === 1) ? 'd-none' : 'progress-bar-label-text'">
                     class="btn btn-secondary save-progress-btn"
                     *ngIf="(!userIsLoggedIn && checkpointCount>1)"
                     [ngClass]="{'disabled oppia-disabled-link': checkpointStatusArray[0] === 'in-progress'}"
+                    tabindex="0"
+                    (keydown.enter)="saveLoggedOutProgress()"
                     (click)="saveLoggedOutProgress()">
               {{ 'I18N_SAVE_PROGRESS_TEXT' | translate }}
             </button>