fix headings order or add missing ones (#2871)

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

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 ebe03bd9496a5396b01ab0ebf8b22827b731b9f4..dd50cda74914467218e17fab512cf3f0ccb8f7dc 100644 (file)
--- 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 7ba2d9ac8aa9d846d2609d1328f4f58d77635100..3bc63b7d1a0d2d860df3b6216113a305de68ff5f 100644 (file)
--- 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 7d93796ec7d0f59aab38832722e132e787e3c792..81e59d46adc60a9d494f7f54c2e38475a6b670c5 100644 (file)
--- 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 1dbad3096aa9a93274a5bb9669bbc7e813bd2d74..93670fe4e31d066fdb7a182b0e9fb9ecb80d6ed9 100644 (file)
--- 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 a43eb6fe163a939bb17d2856eb0b0ca011172eaf..4856d4ae51ac27828d4aa2bd1150699b22eae4d3 100644 (file)
--- 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;
+}

diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html
index 1f1987abafe647983ed65a2ff6a865f0d1fce97a..e9e0e4079ae8ccf8e2efe593722d64a1bb7f2778 100644 (file)
--- a/client/src/app/+accounts/account-about/account-about.component.html
+++ b/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>

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 8f1ff21a55422246e155ad31acaf9ea4927691aa..73bac5f1dbc199f3d51598e933879388c44082b6 100644 (file)
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/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>
 

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 716d12685a657eef068c09896ae3adf12beb8095..44de716a398a67455b9db4c851f5b0fffcc4a921 100644 (file)
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/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">

diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index 7b5bcc2db5ac657135146168f8285bab384560b6..8c3129394cd138cd8a316045238b4f78afc1c2d6 100644 (file)
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/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>

diff --git a/client/src/app/+admin/moderation/moderation.component.html b/client/src/app/+admin/moderation/moderation.component.html
index 09f149c0e9218382dd12a1db31737f2af21dc547..7bab63c33ee9491e2923c04d809cf831abd54ad9 100644 (file)
--- a/client/src/app/+admin/moderation/moderation.component.html
+++ b/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>

diff --git a/client/src/app/+admin/plugins/plugins.component.html b/client/src/app/+admin/plugins/plugins.component.html
index 3dc4939da62cad3839c7358d6bafdeaca34f199f..e2b927db8fd20ae14eaa01b2eaa0e3614002c29b 100644 (file)
--- a/client/src/app/+admin/plugins/plugins.component.html
+++ b/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>

diff --git a/client/src/app/+admin/system/system.component.html b/client/src/app/+admin/system/system.component.html
index 7c4278d35c6dfd5bb65e53d9413680b58f441b80..4f9521c0caf35efc6dafd09ceb50e9d4f80d6337 100644 (file)
--- a/client/src/app/+admin/system/system.component.html
+++ b/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>

diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 6c6c64194cb9b07c37e1d9a37b3bdcf69716b148..e0022d2bafb8b820e006f436df95cf3d8c87a203 100644 (file)
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/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>

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 fb9e6546ed71930f487595b49a7a78969662d488..90f657521f8f773029611baeecb20be459b4d29a 100644 (file)
--- 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 6359b4461b707ee0d732428590803437830c70a2..c31cff16f3a43e1bba99da831d044eee13e92744 100644 (file)
--- 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 817b929febc3e1c1029c077d858a1809828e3856..6b94d5477c0a87d163826831c04369a649ba33aa 100644 (file)
--- 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 429943f7113300c8f684dc33cc583aa984cd6240..8e4480ca66b95d41322d1ca13c0a908a0f447d28 100644 (file)
--- 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 a155d90e0af44330bfd407457721a80e626c3edd..222da9542dde0b3a2521f4449593b3edb26a361e 100644 (file)
--- 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 354176a116ef9555219425b53768ea1ff81240f9..a50acfdf8bf55552e53d8674f94473d468c0ed13 100644 (file)
--- 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 b4e4d29f0698d709870c54e4e8f14d2ebf0c5568..040b2130f1c7bcb0cf138042abd0e602e485bf4d 100644 (file)
--- 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 b87a4c00c23da1dfe4432e16d5d314752acaacf6..23dfdc8f5446e3c4dcadcc6aaa8702596044355f 100644 (file)
--- 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 6fd94474d846573531c022c694bd1e76da8de08a..2499b6ed5708fcfb1e188d588376ecd903ff2633 100644 (file)
--- 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 37c6ad6b4b056e11631bc5b2e09a1b88b4fde2f5..8f0786bd0d782ad142c1fbbd9f1bca87e7cb8d10 100644 (file)
--- 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 7bd2fa19f4fb19e3a63472e9eea374f338513131..1ba2c35ef6913942d4a7cd687c53f52f0e407528 100644 (file)
--- 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 4381d74b060665d9d6c84db99ba105af23db26d2..41e7851fda85fde709f3ff97109357b815747cdc 100644 (file)
--- 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 9192aec6d542e7d75919f82cae6cefae9a6d0f5c..825bddf5eb3c7d907156b2b7b381dc9cb6a58043 100644 (file)
--- 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 67a58d8d5567507106b1c1056a5a2240449e36cd..18c1ae288cc13bdb8114ee488a43b6f21982520a 100644 (file)
--- 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 82f5123de98841a3de3bcd4c31c5778174e88785..d01b9ac7fdf0ea189f40e756e306b5d88013462a 100644 (file)
--- 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>

diff --git a/client/src/app/shared/instance/instance-statistics.component.html b/client/src/app/shared/instance/instance-statistics.component.html
index bcb2308fec883dee12c064f147e729ec003c63ca..399cf10fe20eee8bf7d76241f7588dfaae98c552 100644 (file)
--- a/client/src/app/shared/instance/instance-statistics.component.html
+++ b/client/src/app/shared/instance/instance-statistics.component.html
@@ -1,7 +1,7 @@
 <p i18n *ngIf="null === serverStats">Loading instance statistics...</p>
 
 <section *ngIf="null !== serverStats">
-  <h5 i18n>Local</h5>
+  <h3 i18n>Local</h3>
 
   <div class="row">
     <div class="col-6 col-lg-4 col-xl-3">
@@ -55,7 +55,7 @@
     </div>
   </div>
 
-  <h5 i18n>Federation</h5>
+  <h3 i18n>Federation</h3>
 
   <div class="row">
     <div class="col-6 col-lg-4 col-xl-3">

diff --git a/client/src/app/shared/instance/instance-statistics.component.scss b/client/src/app/shared/instance/instance-statistics.component.scss
index 63f8911f6d5fc5bb66917c6a7c8d08e8d513ce5d..5286ab03a8328d69591b8507b6cc02a48484a3e7 100644 (file)
--- a/client/src/app/shared/instance/instance-statistics.component.scss
+++ b/client/src/app/shared/instance/instance-statistics.component.scss
@@ -1,3 +1,8 @@
+
+h3 {
+  font-size: 1.25rem;
+}
+
 .stat {
   text-align: center;
   margin-bottom: 1em;

diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 54557df6b745458f8388eb0231b33bbc0b947bca..548370843b484e0e81fd4724a3334bb91683c5f9 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -1,11 +1,11 @@
 <div class="margin-content">
   <div class="videos-header">
-    <div *ngIf="titlePage" class="title-page title-page-single">
+    <h1 *ngIf="titlePage" class="title-page title-page-single">
       <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
         {{ titlePage }}
       </div>
       <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed>
-    </div>
+    </h1>
 
     <div class="action-block" *ngIf="actions.length > 0">
       <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
@@ -31,9 +31,9 @@
     class="videos"
   >
     <ng-container *ngFor="let video of videos; trackBy: videoById;">
-      <div class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
+      <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
         {{ getCurrentGroupedDateLabel(video) }}
-      </div>
+      </h2>
 
       <div class="video-wrapper">
         <my-video-miniature

diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index affbd4793fb40093cf001d2a8979c0273e8b03c8..dd1d43560cff80179468befca91d13dcaa8a59b2 100644 (file)
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -1,13 +1,13 @@
 <div>
   <div class="title-block">
-    <div class="title-page title-page-single">
+    <h2 class="title-page title-page-single">
       <ng-container *ngIf="componentPagination.totalItems > 0; then hasComments; else noComments"></ng-container>
       <ng-template #hasComments>
         <ng-container i18n *ngIf="componentPagination.totalItems === 1; else manyComments">1 Comment</ng-container>
         <ng-template i18n #manyComments>{{ componentPagination.totalItems }} Comments</ng-template>
       </ng-template>
       <ng-template i18n #noComments>Comments</ng-template>
-    </div>
+    </h2>
 
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 

diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
index a40266028996a414b8751db997aa079e2010802a..17e19c083f25a039aaadbe4d80557e6071c98f72 100644 (file)
--- a/client/src/app/videos/recommendations/recommended-videos.component.html
+++ b/client/src/app/videos/recommendations/recommended-videos.component.html
@@ -1,9 +1,9 @@
 <div class="other-videos">
   <ng-container *ngIf="hasVideos$ | async">
     <div class="title-page-container">
-      <div i18n class="title-page title-page-single">
+      <h2 i18n class="title-page title-page-single">
         Other videos
-      </div>
+      </h2>
       <div *ngIf="!playlist" class="title-page-autoplay"
         [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
       >

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 999628de4472f62361ca7d749b276cffd1137e8d..19d03b5c596d92c53ab36eceaf0293718a8b9757 100644 (file)
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only" i18n>Discover</h1>
 <div class="margin-content">
 
   <div class="no-results" i18n *ngIf="notResults">No results.</div>
@@ -8,9 +9,9 @@
     <ng-container *ngFor="let overview of overviews">
 
       <div class="section videos" *ngFor="let object of overview.categories">
-        <div class="section-title">
+        <h1 class="section-title">
           <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
-        </div>
+        </h1>
 
         <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
           <my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
@@ -19,9 +20,9 @@
       </div>
 
       <div class="section videos" *ngFor="let object of overview.tags">
-        <div class="section-title">
+        <h2 class="section-title">
           <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
-        </div>
+        </h2>
 
         <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
           <my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
@@ -34,7 +35,7 @@
           <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
             <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
 
-            <div>{{ object.channel.displayName }}</div>
+            <h2 class="section-title">{{ object.channel.displayName }}</h2>
           </a>
         </div>
 

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index d82d78d58e91085d4ab4410a285828b838f33930..976bbf4d68b1b47e5334e5517610a9fe43e72683 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -124,7 +124,10 @@ $play-overlay-width: 18px;
     margin-bottom: 15px;
     display: flex;
     justify-content: space-between;
-    border-top: 1px solid $separator-border-color;
+
+    &:not(h2) {
+      border-top: 1px solid $separator-border-color;
+    }
 
     a {
       &:hover, &:focus:not(.focus-visible), &:active {