Fix oppia#16979 + fix all the axeDevTools & lighthouse errors -- Prof…

…ile page (oppia#18625) chnages to fix a11y issues with profile page
Rijuta-s · Jul 19, 2023 · 90dd9be · 90dd9be
1 parent 9b7fca2
commit 90dd9be
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 18 deletions.
diff --git a/core/templates/base-components/oppia-footer.component.css b/core/templates/base-components/oppia-footer.component.css
@@ -20,7 +20,7 @@
   text-decoration: underline;
 }
 
-.oppia-footer-container h3 {
+.oppia-footer-container p {
   color: #fff;
   font-size: 1em;
   font-weight: bold;

diff --git a/core/templates/base-components/oppia-footer.component.html b/core/templates/base-components/oppia-footer.component.html
@@ -2,7 +2,7 @@
   <div class="oppia-footer-container">
     <div class="row row-cols-2">
       <div class="col">
-        <h3 [innerHTML]="'I18N_FOOTER_ABOUT_ALL_CAPS' | translate"></h3>
+        <p [innerHTML]="'I18N_FOOTER_ABOUT_ALL_CAPS' | translate"></p>
         <ul>
           <li>
             <a href="/about"
@@ -29,7 +29,7 @@ <h3 [innerHTML]="'I18N_FOOTER_ABOUT_ALL_CAPS' | translate"></h3>
 
       </div>
       <div class="col">
-        <h3 [innerHTML]="'I18N_FOOTER_TEACH_LEARN_ALL_CAPS' | translate"></h3>
+        <p [innerHTML]="'I18N_FOOTER_TEACH_LEARN_ALL_CAPS' | translate"></p>
         <ul>
           <li>
             <a href="/get-started"
@@ -65,7 +65,7 @@ <h3 [innerHTML]="'I18N_FOOTER_TEACH_LEARN_ALL_CAPS' | translate"></h3>
         </ul>
       </div>
       <div class="col">
-        <h3 [innerHTML]="'I18N_FOOTER_CONTRIBUTE_ALL_CAPS' | translate"></h3>
+        <p [innerHTML]="'I18N_FOOTER_CONTRIBUTE_ALL_CAPS' | translate"></p>
         <ul>
           <li>
             <a href="/volunteer"

diff --git a/core/templates/components/button-directives/social-buttons.component.css b/core/templates/components/button-directives/social-buttons.component.css
@@ -8,7 +8,7 @@
   margin-bottom: 15px;
 }
 
-.oppia-footer-social h3 {
+.oppia-footer-social p {
   color: #fff;
   font-size: 1em;
   font-weight: 700;

diff --git a/core/templates/components/button-directives/social-buttons.component.html b/core/templates/components/button-directives/social-buttons.component.html
@@ -1,8 +1,8 @@
 <div class="oppia-footer-social">
   <div class="oppia-follow-us">
-    <h3>
+    <p>
       <span [innerHTML]="'I18N_FOOTER_FOLLOW_US' | translate"></span>:
-    </h3>
+    </p>
   </div>
 
   <div class="oppia-footer-social-icons">

diff --git a/core/templates/components/summary-tile/exploration-summary-tile.component.html b/core/templates/components/summary-tile/exploration-summary-tile.component.html
@@ -14,7 +14,7 @@
        target="{{ openInNewWindow ? '_blank' : '_self' }}">
       <div class="title-section" [ngStyle]="{'background-color': thumbnailBgColor}">
         <img class="thumbnail-image" [src]="thumbnailIcon" alt="{{ category }}">
-        <h3 class="activity-title e2e-test-exp-summary-tile-title">
+        <span class="activity-title e2e-test-exp-summary-tile-title">
           <span *ngIf="isWindowLarge">
             <span *ngIf="!isHackyExpTitleTranslationDisplayed()">{{ explorationTitle | truncate:40 }}</span>
             <span *ngIf="isHackyExpTitleTranslationDisplayed()">{{ expTitleTranslationKey | translate | truncate:40 }}</span>
@@ -23,7 +23,7 @@ <h3 class="activity-title e2e-test-exp-summary-tile-title">
             <span *ngIf="!isHackyExpTitleTranslationDisplayed()">{{ explorationTitle | truncate:40 }}</span>
             <span *ngIf="isHackyExpTitleTranslationDisplayed()">{{ expTitleTranslationKey | translate | truncate:40 }}</span>
           </span>
-        </h3>
+        </span>
       </div>
       <div *ngIf="!isPlaylistTile" class="title-section-mask"></div>
       <div class="summary-section"

diff --git a/core/templates/css/oppia.css b/core/templates/css/oppia.css
@@ -2867,6 +2867,7 @@ md-card.preview-conversation-skin-supplemental-card {
 .oppia-lost-changes > li > .state-edit-desc > .sub-edit {
   margin-left: 20px;
 }
+.oppia-activity-summary-tile .metrics li,
 .oppia-activity-summary-tile .metrics .row-three,
 .oppia-activity-summary-tile-mobile .metrics .row-three {
   font-size: 0.75em;
@@ -3169,7 +3170,7 @@ oppia-noninteractive-link {
 
 .oppia-activity-summary-tile .rating-disabled,
 .oppia-activity-summary-tile-mobile .rating-disabled {
-  opacity: 0.5;
+  opacity: 0.8;
 }
 
 .oppia-activity-summary-tile [section="right-section"],

diff --git a/core/templates/pages/profile-page/profile-page.component.html b/core/templates/pages/profile-page/profile-page.component.html
@@ -26,29 +26,30 @@
       </div>
 
       <div class="oppia-profile-text">
-        <h2 class="oppia-profile-username-large-screen">
+        <h1 class="oppia-profile-username-large-screen">
           <span placement="right"
                 [ngbPopover]="usernameIsLong ? username.helpText : undefined"
                 triggers="mouseenter:mouseleave">
             <strong>{{ username.value | truncate:16 }}</strong>
           </span>
-        </h2>
-        <h2 class="oppia-profile-username-small-screen">
+        </h1>
+        <h1 class="oppia-profile-username-small-screen">
           <span placement="right"
                 [ngbPopover]="username.helpText"
                 triggers="mouseenter:mouseleave">
             <strong>{{ username.value | truncate:11 }}</strong>
           </span>
-        </h2>
+        </h1>
 
         <p class="oppia-profile-first-contributed"
+           tabindex="0"
            *ngIf="firstContributionMsec">
           Contributing since: {{ getLocaleDateString(firstContributionMsec) }}
         </p>
       </div>
     </div>
 
-    <div class="oppia-profile-user-stat-container-large-screen">
+    <div class="oppia-profile-user-stat-container-large-screen" tabindex="0">
       <div *ngFor="let stat of userDisplayedStatistics" class="oppia-profile-user-stat">
         <div placement="right"
              [ngbPopover]="stat.helpText"
@@ -61,14 +62,14 @@ <h2 class="oppia-profile-username-small-screen">
       </div>
     </div>
 
-    <p class="oppia-profile-user-bio e2e-test-profile-bio">
+    <p class="oppia-profile-user-bio e2e-test-profile-bio" tabindex="0">
       <span *ngIf="userBio" class="oppia-user-bio-text">{{ userBio }}</span>
       <span *ngIf="!userBio">
         <em>This user has not supplied a bio yet.</em>
       </span>
     </p>
 
-    <p class="oppia-profile-subject-interest-container">
+    <p class="oppia-profile-subject-interest-container" tabindex="0">
       Interests:
       <span class="oppia-profile-subject-interest-blocks" *ngIf="subjectInterests.length > 0">
         <span *ngFor="let interest of subjectInterests; index as index">
@@ -84,7 +85,7 @@ <h2 class="oppia-profile-username-small-screen">
     </p>
 
     <hr class="oppia-profile-stat-container-line-small-screen">
-    <div class="oppia-profile-user-stat-container-small-screen">
+    <div class="oppia-profile-user-stat-container-small-screen" tabindex="0">
       <div *ngFor="let stat of userDisplayedStatistics" class="oppia-profile-user-stat">
         <div placement="right"
              [ngbPopover]="stat.helpText"