fix headings order or add missing ones (#2871)

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

5 files changed, 46 insertions, 36 deletions

diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index ebe03bd94..dd50cda74 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/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>
 
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 7ba2d9ac8..3bc63b7d1 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/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>
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 7d93796ec..81e59d46a 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/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">
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index 1dbad3096..93670fe4e 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -24,10 +24,10 @@
 
     <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 @@
 
     <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 @@
 
     <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 @@
     <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 @@
         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,7 +128,7 @@
         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.
@@ -136,7 +136,7 @@
         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 @@
         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
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index a43eb6fe1..4856d4ae5 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/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;
+}