fix headings order or add missing ones (#2871)

Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

15 files changed, 26 insertions, 13 deletions

diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
index fb9e6546e..90f657521 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.html
@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Muted accounts</div>
+  <h1 i18n class="form-sub-title">Muted accounts</h1>
 </div>
 
 <p-table
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
index 6359b4461..c31cff16f 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.html
@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Muted instances</div>
+  <h1 i18n class="form-sub-title">Muted instances</h1>
 </div>
 
 <p-table
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index 817b929fe..6b94d5477 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>History</h1>
 <div class="top-buttons">
   <div class="history-switch">
     <p-inputSwitch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></p-inputSwitch>
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index 429943f71..8e4480ca6 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>Notifications</h1>
 <div class="header">
   <a routerLink="/my-account/settings" fragment="notifications" i18n>
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
index a155d90e0..222da9542 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
@@ -1,6 +1,6 @@
 <ng-template #modal let-close="close" let-dismiss="dismiss">
   <div class="modal-header">
-    <h4 i18n class="modal-title">Accept ownership</h4>
+    <h1 i18n class="modal-title">Accept ownership</h1>
 
     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
   </div>
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index 354176a11..a50acfdf8 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>Ownership changes</h1>
 <p-table
     [value]="videoChangeOwnerships"
     [lazy]="true"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index b4e4d29f0..040b2130f 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -1,6 +1,7 @@
+<h1 class="sr-only" i18n>Settings</h1>
 <div class="form-row"> <!-- profile grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
-    <div i18n class="account-title">PROFILE</div>
+    <h2 i18n class="account-title">PROFILE</h2>
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
@@ -29,7 +30,7 @@
 <div class="form-row mt-5"> <!-- video settings grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
-    <div i18n class="account-title">VIDEO SETTINGS</div>
+    <h2 i18n class="account-title">VIDEO SETTINGS</h2>
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
@@ -40,7 +41,7 @@
 <div class="form-row mt-5"> <!-- notifications grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="notifications"></div> <!-- notifications anchor -->
-    <div i18n class="account-title">NOTIFICATIONS</div>
+    <h2 i18n class="account-title">NOTIFICATIONS</h2>
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
@@ -50,7 +51,7 @@
 
 <div class="form-row mt-5"> <!-- interface grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
-    <div i18n class="account-title">INTERFACE</div>
+    <h2 i18n class="account-title">INTERFACE</h2>
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
@@ -60,7 +61,7 @@
 
 <div class="form-row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
-    <div i18n class="account-title">PASSWORD</div>
+    <h2 i18n class="account-title">PASSWORD</h2>
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
@@ -70,7 +71,7 @@
 
 <div class="form-row mt-5"> <!-- email grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
-    <div i18n class="account-title">EMAIL</div>
+    <h2 i18n class="account-title">EMAIL</h2>
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
@@ -80,7 +81,7 @@
 
 <div class="form-row mt-5"> <!-- danger zone grid -->
   <div class="form-group col-12 col-lg-4 col-xl-3">
-    <div i18n class="account-title">DANGER ZONE</div>
+    <h2 i18n class="account-title">DANGER ZONE</h2>
   </div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
index b87a4c00c..23dfdc8f5 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>Subscriptions</h1>
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
 
 <div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
index 6fd94474d..2499b6ed5 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>My channels</h1>
 <div class="video-channels-header">
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index 37c6ad6b4..8f0786bd0 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>Imports</h1>
 <p-table
   [value]="videoImports" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index 7bd2fa19f..1ba2c35ef 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -1,5 +1,5 @@
 <div class="video-playlists-header">
-  <h4 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
+  <h1 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h1>
 
   <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
 
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
index 4381d74b0..41e7851fd 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -41,6 +41,10 @@
   input[type=text] {
     @include peertube-input-text(300px);
   }
+
+  h1 {
+    font-size: 1.5rem;
+  }
 }
 
 @media screen and (max-width: $small-view) {
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 9192aec6d..825bddf5e 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,5 +1,5 @@
 <div class="videos-header">
-  <h4 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
+  <h1 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h1>
 
   <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
 
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 67a58d8d5..18c1ae288 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -6,9 +6,10 @@
   justify-content: space-between;
   margin: 20px 0 50px;
 
-  h4,
+  h1,
   .fake-element {
     flex: 1;
+    font-size: 1.5rem;
   }
 
   input[type=text] {
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html
index 82f5123de..d01b9ac7f 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.html
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html
@@ -6,6 +6,7 @@
       <div class="actor-img-edit-container">
         <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
           <my-global-icon iconName="edit"></my-global-icon>
+          <label for="avatarfile" i18n>Change your avatar</label>
           <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
         </div>
       </div>