fix headings order or add missing ones

client/src/app/+about/about-follows/about-follows.component.html

@@ -1,6 +1,7 @@
 <div class="row" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+  <h1 class="sr-only" i18n>Follows</h1>
   <div class="col-xl-6 col-md-12">
-    <div i18n class="subtitle">Followers instances</div>
+    <h2 i18n class="subtitle">Followers instances</h2>
 
     <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">This instance does not have instances followers.</div>
 
@@ -10,7 +11,7 @@
   </div>
 
   <div class="col-xl-6 col-md-12">
-    <div i18n class="subtitle">Followings instances</div>
+    <h2 i18n class="subtitle">Followings instances</h2>
 
     <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">This instance does not have instances followings.</div>
 

client/src/app/+about/about-instance/about-instance.component.html

@@ -2,9 +2,9 @@
   <div class="col-md-12 col-xl-6">
 
     <div class="about-instance-title">
-      <div i18n class="title">About {{ instanceName }}</div>
+      <h1 i18n class="title">About {{ instanceName }}</h1>
 
-      <div i18n *ngIf="isContactFormEnabled" (click)="openContactModal()" role="button" class="contact-admin">Contact administrator</div>
+      <button i18n *ngIf="isContactFormEnabled" (click)="openContactModal()" (keydown.enter)="openContactModal()" class="contact-admin">Contact administrator</button>
     </div>
 
     <div class="block instance-badges">
@@ -19,84 +19,85 @@
       <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
     </div>
 
-    <div i18n class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
+    <h2 i18n class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
       ADMINISTRATORS & SUSTAINABILITY
-    </div>
+    </h2>
 
     <div class="block administrator" *ngIf="html.administrator">
-      <div i18n class="section-title">Who we are</div>
+      <h3 i18n class="section-title">Who we are</h3>
 
       <div [innerHTML]="html.administrator"></div>
     </div>
 
     <div class="block creation-reason" *ngIf="creationReason">
-      <div i18n class="section-title">Why we created this instance</div>
+      <h3 i18n class="section-title">Why we created this instance</h3>
 
       <p>{{ creationReason }}</p>
     </div>
 
     <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
-      <div i18n class="section-title">How long we plan to maintain this instance</div>
+      <h3 i18n class="section-title">How long we plan to maintain this instance</h3>
 
       <p>{{ maintenanceLifetime }}</p>
     </div>
 
     <div class="block business-model" *ngIf="businessModel">
-      <div i18n class="section-title">How we will pay for this instance</div>
+      <h3 i18n class="section-title">How we will pay for this instance</h3>
 
       <p>{{ businessModel }}</p>
     </div>
 
-    <div i18n class="middle-title" *ngIf="html.description">
+    <h2 i18n class="middle-title" *ngIf="html.description">
       INFORMATION
-    </div>
+    </h2>
 
     <div class="block description">
-      <div i18n class="section-title">Description</div>
+      <h3 i18n class="section-title">Description</h3>
 
       <div [innerHTML]="html.description"></div>
     </div>
 
-    <div i18n class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms">
+    <h2 i18n class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms">
       MODERATION
-    </div>
+    </h2>
 
     <div class="block moderation-information" *ngIf="html.moderationInformation">
-      <div i18n class="section-title">Moderation information</div>
+      <h3 i18n class="section-title">Moderation information</h3>
 
       <div [innerHTML]="html.moderationInformation"></div>
     </div>
 
     <div class="block code-of-conduct" *ngIf="html.codeOfConduct">
-      <div i18n class="section-title">Code of conduct</div>
+      <h3 i18n class="section-title">Code of conduct</h3>
 
       <div [innerHTML]="html.codeOfConduct"></div>
     </div>
 
     <div class="block terms">
-      <div i18n class="section-title">Terms</div>
+      <h3 i18n class="section-title">Terms</h3>
 
       <div [innerHTML]="html.terms"></div>
     </div>
 
-    <div i18n class="middle-title" *ngIf="html.hardwareInformation">
+    <h2 i18n class="middle-title" *ngIf="html.hardwareInformation">
       OTHER INFORMATION
-    </div>
+    </h2>
 
     <div class="block hardware-information" *ngIf="html.hardwareInformation">
-      <div i18n class="section-title">Hardware information</div>
+      <h3 i18n class="section-title">Hardware information</h3>
 
       <div [innerHTML]="html.hardwareInformation"></div>
     </div>
   </div>
 
   <div class="col-md-12 col-xl-6">
+    <h2 class="sr-only" i18n>FEATURES</h2>
     <my-instance-features-table></my-instance-features-table>
   </div>
 
   <div class="col">
     <div class="anchor" id="statistics"></div>
-    <div i18n class="middle-title">STATISTICS</div>
+    <h2 i18n class="middle-title">STATISTICS</h2>
     <my-instance-statistics></my-instance-statistics>
   </div>
 </div>

client/src/app/+about/about-instance/contact-admin-modal.component.html

@@ -1,7 +1,7 @@
 <ng-template #modal>
   <div class="modal-header">
-    <h4 i18n class="modal-title">Contact {{ instanceName }} administrator</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <h1 i18n class="modal-title">Contact {{ instanceName }} administrator</h1>
+    <my-global-icon iconName="cross" aria-label="Close" tabindex="0" role="button" (click)="hide()" (keydown.enter)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">

client/src/app/+about/about-peertube/about-peertube.component.html

@@ -24,10 +24,10 @@ <h1 i18n class="about-peertube-title">
 
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title">
+        <div class="card-title">
           <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/use-setup-account">Use PeerTube
             documentation</a>
-        </h5>
+          </div>
 
         <div i18n class="card-text">
           Discover how to setup your account, what is a channel, how to create a playlist and more!
@@ -37,10 +37,10 @@ <h5 class="card-title">
 
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title">
+        <div class="card-title">
           <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/use-third-party-application">PeerTube
             Applications</a>
-        </h5>
+          </div>
 
         <div i18n class="card-text">
           Discover unofficial Android applications or browser addons!
@@ -50,10 +50,10 @@ <h5 class="card-title">
 
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title">
+        <div class="card-title">
           <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/contribute-getting-started">Contribute on
             PeerTube</a>
-        </h5>
+          </div>
 
         <div i18n class="card-text">
           Want to help to improve PeerTube? You can translate the web interface, give your feedback or directly contribute to the code!
@@ -66,10 +66,10 @@ <h5 class="card-title">
     <my-about-peertube-contributors></my-about-peertube-contributors>
 
     <div class="p2p-privacy">     
-      <h3 class="section-title">
+      <h2 class="section-title">
         <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
         <ng-container i18n>P2P & Privacy</ng-container>
-      </h3>
+      </h2>
 
       <p i18n>
         PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server,
@@ -82,7 +82,7 @@ <h3 class="section-title">
         tracker as long as you download or watch the video.
       </p>
 
-      <h6 i18n class="p2p-privacy-title">What are the consequences?</h6>
+      <h3 i18n class="p2p-privacy-title">What are the consequences?</h3>
 
       <p i18n>
         In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
@@ -128,15 +128,15 @@ <h6 i18n class="p2p-privacy-title">What are the consequences?</h6>
         There are much more effective ways to get that kind of information.
       </p>
 
-      <h6 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h6>
+      <h3 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h3>
 
       <p i18n>
         The threats to privacy with YouTube are different from PeerTube's.
         In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
         Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
       </p>
 
-      <h6 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h6>
+      <h3 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h3>
 
       <p i18n>
         Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing
@@ -145,7 +145,7 @@ <h6 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP
         Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
       </p>
 
-      <h6 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h6>
+      <h3 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h3>
 
       <p i18n>
         PeerTube wants to deliver the best countermeasures possible, to give you more choice

client/src/app/+about/about-peertube/about-peertube.component.scss

@@ -67,3 +67,11 @@ my-about-peertube-contributors {
     }
   }
 }
+
+.card-title {
+  font-size: 1.25rem;
+}
+
+.p2p-privacy-title {
+  font-size: 20px;
+}

client/src/app/+accounts/account-about/account-about.component.html

@@ -1,12 +1,13 @@
+<h1 class="sr-only" i18n>About</h1>
 <div class="margin-content">
   <div *ngIf="account" class="row no-gutters">
     <div class="block col-md-6 col-sm-12 pr-2">
-      <div i18n class="small-title">DESCRIPTION</div>
+      <h2 i18n class="small-title">DESCRIPTION</h2>
       <div class="content" [innerHtml]="getAccountDescription()"></div>
     </div>
 
     <div class="block col-md-6 col-sm-12">
-      <div i18n class="small-title">STATS</div>
+      <h2 i18n class="small-title">STATS</h2>
 
       <div i18n class="content">Joined {{ account.createdAt | date }}</div>
     </div>

client/src/app/+accounts/account-video-channels/account-video-channels.component.html

@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>Video channels</h1>
 <div class="margin-content">
 
   <div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
@@ -8,7 +9,7 @@
         <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
           <img [src]="videoChannel.avatarUrl" alt="Avatar" />
 
-          <div>{{ videoChannel.displayName }}</div>
+          <h2 class="section-title">{{ videoChannel.displayName }}</h2>
           <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
         </a>
 

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html

@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>Configuration</h1>
 <form role="form" [formGroup]="form">
 
   <div ngbNav #nav="ngbNav" class="nav-tabs">

client/src/app/+admin/follows/follows.component.html

@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Follows & redundancies</div>
+  <h1 i18n class="form-sub-title">Follows & redundancies</h1>
 
   <div class="admin-sub-nav">
     <a i18n routerLink="following-list" routerLinkActive="active">Following</a>

client/src/app/+admin/moderation/moderation.component.html

@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Moderation</div>
+  <h1 i18n class="form-sub-title">Moderation</h1>
 
   <div class="admin-sub-nav">
     <a *ngIf="hasVideoAbusesRight()" i18n routerLink="video-abuses/list" routerLinkActive="active">Video reports</a>

client/src/app/+admin/plugins/plugins.component.html

@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Plugins/Themes</div>
+  <h1 i18n class="form-sub-title">Plugins/Themes</h1>
 
   <div class="admin-sub-nav">
     <a i18n routerLink="list-installed" routerLinkActive="active">Installed</a>

client/src/app/+admin/system/system.component.html

@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">System</div>
+  <h1 i18n class="form-sub-title">System</h1>
 
   <div class="admin-sub-nav">
     <a *ngIf="hasJobsRight()" i18n routerLink="jobs" routerLinkActive="active">Jobs</a>

client/src/app/+admin/users/user-list/user-list.component.html

@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Users list</div>
+  <h1 i18n class="form-sub-title">Users list</h1>
 
   <a class="add-button" routerLink="/admin/users/create">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>

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

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

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>

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>

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>

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"