Fix #1121: Use semantic headers for accessibility

front/src/components/Queue.vue

@@ -23,9 +23,9 @@
                   </div>
                 </h1>
                 <div class="ui small warning message" v-if="currentTrack && errored">
-                  <div class="header">
+                  <h3 class="header">
                     <translate translate-context="Sidebar/Player/Error message.Title">The track cannot be loaded</translate>
-                  </div>
+                  </h3>
                   <p v-if="hasNext && playing && $store.state.player.errorCount < $store.state.player.maxConsecutiveErrors">
                     <translate translate-context="Sidebar/Player/Error message.Paragraph">The next track will play automatically in a few seconds…</translate>
                     <i class="loading spinner icon"></i>
@@ -190,9 +190,9 @@
 
             <div v-if="$store.state.radios.running" class="ui info message">
               <div class="content">
-                <div class="header">
+                <h3 class="header">
                   <i class="feed icon"></i> <translate translate-context="Sidebar/Player/Title">You have a radio playing</translate>
-                </div>
+                </h3>
                 <p><translate translate-context="Sidebar/Player/Paragraph">New tracks will be appended here automatically.</translate></p>
                 <div @click="$store.dispatch('radios/stop')" class="ui basic primary button"><translate translate-context="*/Player/Button.Label/Short, Verb">Stop radio</translate></div>
               </div>

front/src/components/RemoteSearchForm.vue

@@ -2,7 +2,7 @@
   <div>
     <form id="remote-search" :class="['ui', {loading: isLoading}, 'form']" @submit.stop.prevent="submit">
       <div v-if="errors.length > 0" role="alert" class="ui negative message">
-        <div class="header"><translate translate-context="Content/*/Error message.Title">Error while fetching object</translate></div>
+        <h3 class="header"><translate translate-context="Content/*/Error message.Title">Error while fetching object</translate></h3>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
         </ul>

front/src/components/SetInstanceModal.vue

@@ -1,9 +1,9 @@
 <template>
   <modal @update:show="$emit('update:show', $event); isError = false" :show="show">
-    <div class="header"><translate translate-context="Popup/Instance/Title">Choose your instance</translate></div>
+    <h3 class="header"><translate translate-context="Popup/Instance/Title">Choose your instance</translate></h3>
     <div class="scrolling content">
       <div v-if="isError" role="alert" class="ui negative message">
-        <div class="header"><translate translate-context="Popup/Instance/Error message.Title">It is not possible to connect to the given URL</translate></div>
+        <h4 class="header"><translate translate-context="Popup/Instance/Error message.Title">It is not possible to connect to the given URL</translate></h4>
         <ul class="list">
           <li><translate translate-context="Popup/Instance/Error message.List item">The server might be down</translate></li>
           <li><translate translate-context="Popup/Instance/Error message.List item">The given address is not a Funkwhale server</translate></li>

front/src/components/Sidebar.vue

@@ -20,9 +20,9 @@
                 v-if="moderationNotifications > 0"
                 :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ moderationNotifications }}</div>
               <div class="menu">
-                <div class="header">
+                <h3 class="header">
                   <translate translate-context="Sidebar/Admin/Title/Noun">Administration</translate>
-                </div>
+                </h3>
                 <div class="divider"></div>
                 <router-link
                   v-if="$store.state.auth.availablePermissions['library']"
@@ -108,10 +108,10 @@
     <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu">
       <nav class="ui vertical large fluid inverted menu" role="navigation" :aria-label="labels.mainMenu">
         <div :class="[{collapsed: !exploreExpanded}, 'collaspable item']">
-          <header class="header" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true">
+          <h3 class="header" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true">
             <translate translate-context="*/*/*/Verb">Explore</translate>
             <i class="angle right icon" v-if="!exploreExpanded"></i>
-          </header>
+          </h3>
           <div class="menu">
             <router-link class="item" :exact="true" :to="{name: 'library.index'}"><i class="music icon"></i><translate translate-context="Sidebar/Navigation/List item.Link/Verb">Browse</translate></router-link>
             <router-link class="item" :to="{name: 'library.albums.browse'}"><i class="compact disc icon"></i><translate translate-context="*/*/*">Albums</translate></router-link>
@@ -121,10 +121,10 @@
           </div>
         </div>
         <div :class="[{collapsed: !myLibraryExpanded}, 'collaspable item']" v-if="$store.state.auth.authenticated">
-          <header class="header" @click="myLibraryExpanded = true" tabindex="0" @focus="myLibraryExpanded = true">
+          <h3 class="header" @click="myLibraryExpanded = true" tabindex="0" @focus="myLibraryExpanded = true">
             <translate translate-context="*/*/*/Noun">My Library</translate>
             <i class="angle right icon" v-if="!myLibraryExpanded"></i>
-          </header>
+          </h3>
           <div class="menu">
             <router-link class="item" :exact="true" :to="{name: 'library.me'}"><i class="music icon"></i><translate translate-context="Sidebar/Navigation/List item.Link/Verb">Browse</translate></router-link>
             <router-link class="item" :to="{name: 'library.albums.me'}"><i class="compact disc icon"></i><translate translate-context="*/*/*">Albums</translate></router-link>
@@ -138,9 +138,9 @@
           <translate translate-context="*/*/*">Channels</translate>
         </router-link>
         <div class="item">
-          <header class="header">
+          <h3 class="header">
             <translate translate-context="Footer/About/List item.Link">More</translate>
-          </header>
+          </h3>
           <div class="menu">
             <router-link class="item" to="/about">
               <i class="info icon"></i><translate translate-context="Sidebar/*/List item.Link">About this pod</translate>

front/src/components/admin/SettingsGroup.vue

@@ -3,7 +3,7 @@
     <div class="ui divider" />
     <h3 class="ui header">{{ group.label }}</h3>
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">Error while saving settings</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error while saving settings</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/audio/ChannelForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form class="ui form" @submit.prevent.stop="submit">
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">Error while saving channel</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error while saving channel</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/auth/ApplicationForm.vue

@@ -2,7 +2,7 @@
 
   <form class="ui form component-form" role="alert" @submit.prevent="submit()">
     <div v-if="errors.length > 0" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">We cannot save your changes</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">We cannot save your changes</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/auth/Authorize.vue

@@ -4,8 +4,8 @@
       <div class="ui small text container">
         <h2><i class="lock open icon"></i><translate translate-context="Content/Auth/Title/Verb">Authorize third-party app</translate></h2>
         <div v-if="errors.length > 0" role="alert" class="ui negative message">
-          <div v-if="application" class="header"><translate translate-context="Popup/Moderation/Error message">Error while authorizing application</translate></div>
-          <div v-else class="header"><translate translate-context="Popup/Moderation/Error message">Error while fetching application data</translate></div>
+          <h4 v-if="application" class="header"><translate translate-context="Popup/Moderation/Error message">Error while authorizing application</translate></h4>
+          <h4 v-else class="header"><translate translate-context="Popup/Moderation/Error message">Error while fetching application data</translate></h4>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>

front/src/components/auth/LoginForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form class="ui form" @submit.prevent="submit()">
     <div v-if="error" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/Login/Error message.Title">We cannot log you in</translate></div>
+      <h4 class="header"><translate translate-context="Content/Login/Error message.Title">We cannot log you in</translate></h4>
       <ul class="list">
         <li v-if="error == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value">
           <translate translate-context="Content/Login/Error message.List item/Call to action">If you signed-up recently, you may need to wait before our moderation team review your account, or verify your email.</translate>

front/src/components/auth/Plugin.vue

@@ -4,11 +4,11 @@
     <div v-if="plugin.description" v-html="markdown.makeHtml(plugin.description)"></div>
     <div class="ui clearing hidden divider"></div> 
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-        <div class="header"><translate translate-context="Content/*/Error message.Title">Error while saving plugin</translate></div>
-        <ul class="list">
-          <li v-for="error in errors">{{ error }}</li>
-        </ul>
-      </div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error while saving plugin</translate></h4>
+      <ul class="list">
+        <li v-for="error in errors">{{ error }}</li>
+      </ul>
+    </div>
     <div class="field">
       <div class="ui toggle checkbox">
         <input :id="`${plugin.name}-enabled`" type="checkbox" v-model="enabled" />

front/src/components/auth/Settings.vue

@@ -7,12 +7,12 @@
         </h2>
         <form class="ui form" @submit.prevent="submitSettings()">
           <div v-if="settings.success" class="ui positive message">
-            <div class="header">
+            <h4 class="header">
               <translate translate-context="Content/Settings/Message">Settings updated</translate>
-            </div>
+            </h4>
           </div>
           <div v-if="settings.errors.length > 0" role="alert" class="ui negative message">
-            <div class="header"><translate translate-context="Content/Settings/Error message.Title">Your settings can't be updated</translate></div>
+            <h4 class="header"><translate translate-context="Content/Settings/Error message.Title">Your settings can't be updated</translate></h4>
             <ul class="list">
               <li v-for="error in settings.errors">{{ error }}</li>
             </ul>
@@ -37,7 +37,7 @@
         </h2>
         <div class="ui form">
           <div v-if="avatarErrors.length > 0" role="alert" class="ui negative message">
-            <div class="header"><translate translate-context="Content/Settings/Error message.Title">Your avatar cannot be saved</translate></div>
+            <h4 class="header"><translate translate-context="Content/Settings/Error message.Title">Your avatar cannot be saved</translate></h4>
             <ul class="list">
               <li v-for="error in avatarErrors">{{ error }}</li>
             </ul>
@@ -64,9 +64,9 @@
         </div>
         <form class="ui form" @submit.prevent="submitPassword()">
           <div v-if="passwordError" role="alert" class="ui negative message">
-            <div class="header">
+            <h4 class="header">
               <translate translate-context="Content/Settings/Error message.Title">Your password cannot be changed</translate>
-            </div>
+            </h4>
             <ul class="list">
               <li v-if="passwordError == 'invalid_credentials'"><translate translate-context="Content/Settings/Error message.List item/Call to action">Please double-check your password is correct</translate></li>
             </ul>
@@ -287,7 +287,7 @@
         </div>
         <div class="ui form">
           <div v-if="accountDeleteErrors.length > 0" role="alert" class="ui negative message">
-            <div class="header"><translate translate-context="Content/Settings/Error message.Title">We cannot delete your account</translate></div>
+            <h4 class="header"><translate translate-context="Content/Settings/Error message.Title">We cannot delete your account</translate></h4>
             <ul class="list">
               <li v-for="error in accountDeleteErrors">{{ error }}</li>
             </ul>

front/src/components/auth/SignupForm.vue

@@ -26,7 +26,7 @@
       <div class="ui hidden divider"></div>
     </template>
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/Signup/Form/Paragraph">Your account cannot be created.</translate></div>
+      <h4 class="header"><translate translate-context="Content/Signup/Form/Paragraph">Your account cannot be created.</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/auth/SubsonicTokenForm.vue

@@ -14,10 +14,10 @@
       <translate translate-context="Content/Settings/Link">Discover how to use Funkwhale from other apps</translate>
     </a></p>
     <div v-if="success" class="ui positive message">
-      <div class="header">{{ successMessage }}</div>
+      <h4 class="header">{{ successMessage }}</h4>
     </div>
     <div v-if="subsonicEnabled && errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/channels/AlbumForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form @submit.stop.prevent :class="['ui', {loading: isLoading}, 'form']">
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">Error while creating</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error while creating</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/channels/AlbumModal.vue

@@ -1,9 +1,9 @@
 <template>
   <modal class="small" :show.sync="show">
-    <div class="header">
+    <h4 class="header">
       <translate key="1" v-if="channel.content_category === 'podcasts'" translate-context="Popup/Channels/Title/Verb">New serie</translate>
       <translate key="2" v-else translate-context="Popup/Channels/Title">New album</translate>
-    </div>
+    </h4>
     <div class="scrolling content">
       <channel-album-form
         ref="albumForm"

front/src/components/channels/UploadForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form @submit.stop.prevent :class="['ui', {loading: isLoadingStep1}, 'form component-file-upload']">
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">Error while publishing</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error while publishing</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/channels/UploadModal.vue

@@ -1,11 +1,11 @@
 <template>
   <modal class="small" @update:show="update" :show="$store.state.channels.showUploadModal">
-    <div class="header">
+    <h4 class="header">
       <translate key="1" v-if="step === 1" translate-context="Popup/Channels/Title/Verb">Publish audio</translate>
       <translate key="2" v-else-if="step === 2" translate-context="Popup/Channels/Title">Files to upload</translate>
       <translate key="3" v-else-if="step === 3" translate-context="Popup/Channels/Title">Upload details</translate>
       <translate key="4" v-else-if="step === 4" translate-context="Popup/Channels/Title">Processing uploads</translate>
-    </div>
+    </h4>
     <div class="scrolling content">
       <channel-upload-form
         ref="uploadForm"

front/src/components/common/ActionTable.vue

@@ -91,7 +91,7 @@
                 </div>
               </div>
               <div v-if="actionErrors.length > 0" role="alert" class="ui negative message">
-                <div class="header"><translate translate-context="Content/*/Error message/Header">Error while applying action</translate></div>
+                <h4 class="header"><translate translate-context="Content/*/Error message/Header">Error while applying action</translate></h4>
                 <ul class="list">
                   <li v-for="error in actionErrors">{{ error }}</li>
                 </ul>

front/src/components/common/AttachmentInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ui form">
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">Your attachment cannot be saved</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Your attachment cannot be saved</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/common/DangerousButton.vue

@@ -3,11 +3,11 @@
     <slot></slot>
 
     <modal class="small" :show.sync="showModal">
-      <div class="header">
+      <h4 class="header">
         <slot name="modal-header">
           <translate translate-context="Modal/*/Title">Do you want to confirm this action?</translate>
         </slot>
-      </div>
+      </h4>
       <div class="scrolling content">
         <div class="description">
           <slot name="modal-content"></slot>

front/src/components/common/EmptyState.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ui small placeholder segment component-placeholder component-empty-state">
-    <div class="ui header">
+    <h4 class="ui header">
       <div class="content">
         <slot name="title">
 
@@ -10,7 +10,7 @@
           </translate>
         </slot>
       </div>
-    </div>
+    </h4>
     <div class="inline center aligned text">
       <slot></slot>
       <button v-if="refresh" class="ui button" @click="$emit('refresh')">

front/src/components/common/RenderedDescription.vue

@@ -25,7 +25,7 @@
     </template>
     <form v-if="isUpdating" class="ui form" @submit.prevent="submit()">
       <div v-if="errors.length > 0" role="alert" class="ui negative message">
-        <div class="header"><translate translate-context="Content/Channels/Error message.Title">Error while updating description</translate></div>
+        <h4 class="header"><translate translate-context="Content/Channels/Error message.Title">Error while updating description</translate></h4>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
         </ul>

front/src/components/federation/FetchButton.vue

@@ -10,15 +10,15 @@
       <div class="scrolling content">
         <template v-if="fetch && fetch.status != 'pending'">
           <div v-if="fetch.status === 'skipped'" class="ui message">
-            <div class="header"><translate translate-context="Popup/*/Message.Title">Refresh was skipped</translate></div>
+            <h4 class="header"><translate translate-context="Popup/*/Message.Title">Refresh was skipped</translate></h4>
             <p><translate translate-context="Popup/*/Message.Content">The remote server answered, but returned data was unsupported by Funkwhale.</translate></p>
           </div>
           <div v-else-if="fetch.status === 'finished'" class="ui success message">
-            <div class="header"><translate translate-context="Popup/*/Message.Title">Refresh successful</translate></div>
+            <h4 class="header"><translate translate-context="Popup/*/Message.Title">Refresh successful</translate></h4>
             <p><translate translate-context="Popup/*/Message.Content">Data was refreshed successfully from remote server.</translate></p>
           </div>
           <div v-else-if="fetch.status === 'errored'" class="ui error message">
-            <div class="header"><translate translate-context="Popup/*/Message.Title">Refresh error</translate></div>
+            <h4 class="header"><translate translate-context="Popup/*/Message.Title">Refresh error</translate></h4>
             <p><translate translate-context="Popup/*/Message.Content">An error occurred while trying to refresh data:</translate></p>
             <table class="ui very basic collapsing celled table">
               <tbody>
@@ -71,13 +71,13 @@
           </div>
         </div>
         <div v-if="errors.length > 0" role="alert" class="ui negative message">
-          <div class="header"><translate translate-context="Content/*/Error message.Title">Error while saving settings</translate></div>
+          <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error while saving settings</translate></h4>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>
         </div>
         <div v-else-if="fetch && fetch.status === 'pending' && pollsCount >= maxPolls" role="alert" class="ui warning message">
-          <div class="header"><translate translate-context="Popup/*/Message.Title">Refresh pending</translate></div>
+          <h4 class="header"><translate translate-context="Popup/*/Message.Title">Refresh pending</translate></h4>
           <p><translate translate-context="Popup/*/Message.Content">Refresh request wasn't proceed in time by our server. It will be processed later.</translate></p>
         </div>
       </div>

front/src/components/library/AlbumDropdown.vue

@@ -2,9 +2,9 @@
   <span>
 
     <modal v-if="isEmbedable" :show.sync="showEmbedModal">
-      <div class="header">
+      <h4 class="header">
         <translate translate-context="Popup/Album/Title/Verb">Embed this album on your website</translate>
-      </div>
+      </h4>
       <div class="content">
         <div class="description">
           <embed-wizard type="album" :id="object.id" />

front/src/components/library/ArtistBase.vue

@@ -35,9 +35,9 @@
             </div>
 
             <modal :show.sync="showEmbedModal" v-if="publicLibraries.length > 0">
-              <div class="header">
+              <h4 class="header">
                 <translate translate-context="Popup/Artist/Title/Verb">Embed this artist work on your website</translate>
-              </div>
+              </h4>
               <div class="content">
                 <div class="description">
                   <embed-wizard type="artist" :id="object.id" />

front/src/components/library/EditCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="ui fluid card">
     <div class="content">
-      <div class="header">
+      <h4 class="header">
         <router-link :to="detailUrl">
           <translate translate-context="Content/Library/Card/Short" :translate-params="{id: obj.uuid.substring(0, 8)}">Modification %{ id }</translate>
         </router-link>
-      </div>
+      </h4>
       <div class="meta">
         <router-link
           v-if="obj.target && obj.target.type === 'track'"

front/src/components/library/EditForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="submittedMutation">
     <div class="ui positive message">
-      <div class="header"><translate translate-context="Content/Library/Paragraph">Your edit was successfully submitted.</translate></div>
+      <h4 class="header"><translate translate-context="Content/Library/Paragraph">Your edit was successfully submitted.</translate></h4>
     </div>
     <edit-card :obj="submittedMutation" :current-state="currentState" />
     <button class="ui button" @click.prevent="submittedMutation = null">
@@ -44,7 +44,7 @@
     <form class="ui form" @submit.prevent="submit()">
       <div class="ui hidden divider"></div>
       <div v-if="errors.length > 0" role="alert" class="ui negative message">
-        <div class="header"><translate translate-context="Content/Library/Error message.Title">Error while submitting edit</translate></div>
+        <h4 class="header"><translate translate-context="Content/Library/Error message.Title">Error while submitting edit</translate></h4>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
         </ul>

front/src/components/library/ImportStatusModal.vue

@@ -1,9 +1,9 @@
 <template>
 
   <modal :show.sync="showModal">
-    <div class="header">
+    <h4 class="header">
       <translate translate-context="Popup/Import/Title">Import detail</translate>
-    </div>
+    </h4>
     <div class="content" v-if="upload">
       <div class="description">
         <div class="ui message" v-if="upload.import_status === 'pending'">

front/src/components/library/TrackBase.vue

@@ -27,9 +27,9 @@
                 <i class="download icon"></i>
               </a>
               <modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal">
-                <div class="header">
+                <h4 class="header">
                   <translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
-                </div>
+                </h4>
                 <div class="content">
                   <div class="description">
                     <embed-wizard type="track" :id="track.id" />

front/src/components/library/radios/Builder.vue

@@ -8,14 +8,14 @@
         <p><translate translate-context="Content/Radio/Paragraph">You can use this interface to build your own custom radio, which will play tracks according to your criteria.</translate></p>
         <div class="ui form">
           <div v-if="success" class="ui positive message">
-            <div class="header">
+            <h4 class="header">
               <template v-if="radioName">
                 <translate translate-context="Content/Radio/Message">Radio updated</translate>
               </template>
               <template v-else>
                 <translate translate-context="Content/Radio/Message">Radio created</translate>
               </template>
-            </div>
+            </h4>
           </div>
           <div class="">
             <div class="field">

front/src/components/library/radios/Filter.vue

@@ -40,9 +40,9 @@
         {{ checkResult.candidates.count }} tracks matching filter
       </span>
       <modal v-if="checkResult" :show.sync="showCandidadesModal">
-        <div class="header">
+        <h4 class="header">
           <translate translate-context="Popup/Radio/Title/Noun">Tracks matching filter</translate>
-        </div>
+        </h4>
         <div class="content">
           <div class="description">
             <track-table v-if="checkResult.candidates.count > 0" :tracks="checkResult.candidates.sample"></track-table>

front/src/components/manage/moderation/InstancePolicyForm.vue

@@ -5,7 +5,7 @@
       <translate translate-context="Content/Moderation/Card.Button.Label/Verb" v-else key="2">Add a new moderation rule</translate>
     </h3>
     <div v-if="errors && errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/Moderation/Error message.Title">Error while creating rule</translate></div>
+      <h4 class="header"><translate translate-context="Content/Moderation/Error message.Title">Error while creating rule</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/manage/moderation/InstancePolicyModal.vue

@@ -5,9 +5,9 @@
       <translate translate-context="Content/Moderation/Button.Label">Moderation rules…</translate>
     </slot>
     <modal :show.sync="show" @show="fetchData">
-      <div class="header">
+      <h4 class="header">
         <translate :translate-params="{obj: target}" translate-context="Popup/Moderation/Title/Verb">Manage moderation rules for %{ obj }</translate>
-      </div>
+      </h4>
       <div class="content">
         <div class="description">
           <div v-if="isLoading" class="ui active loader"></div>

front/src/components/manage/moderation/NoteForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form class="ui form" @submit.prevent="submit()">
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/Moderation/Error message.Title">Error while submitting note</translate></div>
+      <h4 class="header"><translate translate-context="Content/Moderation/Error message.Title">Error while submitting note</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/manage/moderation/ReportCard.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="ui fluid report card">
     <div class="content">
-      <div class="header">
+      <h4 class="header">
         <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
           <translate translate-context="Content/Moderation/Card/Short" :translate-params="{id: obj.uuid.substring(0, 8)}">Report %{ id }</translate>
         </router-link>
         <collapse-link class="right floated" v-model="isCollapsed"></collapse-link>
-      </div>
+      </h4>
       <div class="content">
         <div class="ui hidden divider"></div>
         <div class="ui stackable two column grid">

front/src/components/manage/moderation/UserRequestCard.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="ui fluid user-request card">
     <div class="content">
-      <div class="header">
+      <h4 class="header">
         <router-link :to="{name: 'manage.moderation.requests.detail', params: {id: obj.uuid}}">
           <translate translate-context="Content/Moderation/Card/Short" :translate-params="{id: obj.uuid.substring(0, 8)}">Request %{ id }</translate>
         </router-link>
         <collapse-link class="right floated" v-model="isCollapsed"></collapse-link>
-      </div>
+      </h4>
       <div class="content">
         <div class="ui hidden divider"></div>
         <div class="ui stackable two column grid">

front/src/components/manage/users/InvitationForm.vue

@@ -2,7 +2,7 @@
   <div>
     <form class="ui form" @submit.prevent="submit">
       <div v-if="errors.length > 0" role="alert" class="ui negative message">
-        <div class="header"><translate translate-context="Content/Admin/Error message.Title">Error while creating invitation</translate></div>
+        <h4 class="header"><translate translate-context="Content/Admin/Error message.Title">Error while creating invitation</translate></h4>
         <ul class="list">
           <li v-for="error in errors">{{ error }}</li>
         </ul>

front/src/components/moderation/FilterModal.vue

@@ -1,17 +1,17 @@
 <template>
   <modal @update:show="update" :show="$store.state.moderation.showFilterModal">
-    <div class="header">
+    <h4 class="header">
       <translate
         v-if="type === 'artist'"
         key="1"
         translate-context="Popup/Moderation/Title/Verb"
         :translate-params="{name: target.name}">Do you want to hide content from artist "%{ name }"?</translate>
-    </div>
+    </h4>
     <div class="scrolling content">
       <div class="description">
 
         <div v-if="errors.length > 0" role="alert" class="ui negative message">
-          <div class="header"><translate translate-context="Popup/Moderation/Error message">Error while creating filter</translate></div>
+          <h4 class="header"><translate translate-context="Popup/Moderation/Error message">Error while creating filter</translate></h4>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>

front/src/components/moderation/ReportModal.vue

@@ -9,7 +9,7 @@
     <div class="scrolling content">
       <div class="description">
         <div v-if="errors.length > 0" role="alert" class="ui negative message">
-          <div class="header"><translate translate-context="Popup/Moderation/Error message">Error while submitting report</translate></div>
+          <h4 class="header"><translate translate-context="Popup/Moderation/Error message">Error while submitting report</translate></h4>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>
@@ -65,9 +65,9 @@
 
       </div>
       <div v-else role="alert" class="ui warning message">
-        <div class="header">
+        <h4 class="header">
           <translate translate-context="Popup/Moderation/Error message">Anonymous reports are disabled, please sign-in to submit a report.</translate>
-        </div>
+        </h4>
       </div>
     </div>
     <div class="actions">

front/src/components/playlists/Form.vue

@@ -2,17 +2,17 @@
   <form class="ui form" @submit.prevent="submit()">
     <h4 v-if="title" class="ui header"><translate translate-context="Popup/Playlist/Title/Verb">Create a new playlist</translate></h4>
     <div v-if="success" class="ui positive message">
-      <div class="header">
+      <h4 class="header">
         <template v-if="playlist">
           <translate translate-context="Content/Playlist/Message">Playlist updated</translate>
         </template>
         <template v-else>
           <translate translate-context="Content/Playlist/Message">Playlist created</translate>
         </template>
-      </div>
+      </h4>
     </div>
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/Playlist/Error message.Title">The playlist could not be created</translate></div>
+      <h4 class="header"><translate translate-context="Content/Playlist/Error message.Title">The playlist could not be created</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/components/playlists/PlaylistModal.vue

@@ -1,6 +1,6 @@
 <template>
   <modal @update:show="update" :show="$store.state.playlists.showModal">
-    <div class="header">
+    <h4 class="header">
       <template v-if="track">
         <h2 class="ui header">
           <translate translate-context="Popup/Playlist/Title/Verb">Add to playlist</translate>
@@ -14,7 +14,7 @@
         </h2>
       </template>
       <translate v-else translate-context="Popup/Playlist/Title/Verb">Manage playlists</translate>
-    </div>
+    </h4>
     <div class="scrolling content">
       <playlist-form :key="formKey"></playlist-form>
       <div class="ui divider"></div>
@@ -33,7 +33,7 @@
               <translate translate-context="*/Playlist/Button.Label/Verb">Add anyways</translate></button>
         </div>
         <div v-if="errors.length > 0" role="alert" class="ui negative message">
-          <div class="header"><translate translate-context="Popup/Playlist/Error message.Title">The track can't be added to a playlist</translate></div>
+          <h4 class="header"><translate translate-context="Popup/Playlist/Error message.Title">The track can't be added to a playlist</translate></h4>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>
@@ -82,9 +82,9 @@
         </table>
         <template v-else>
           <div class="ui small placeholder segment component-placeholder">
-            <div class="ui header">
+            <h4 class="ui header">
                <translate translate-context="Popup/Playlist/EmptyState">No results matching your filter</translate>
-            </div>
+            </h4>
           </div>
         </template>
         <template v-else>

front/src/components/radios/Card.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="ui card">
       <div class="content">
-        <div class="header">
+        <h4 class="header">
           <router-link v-if="radio.id" class="discrete link" :to="{name: 'library.radios.detail', params: {id: radio.id}}">
             {{ radio.name }}
           </router-link>
           <template v-else>
             {{ radio.name }}
           </template>
-        </div>
+        </h4>
         <div class="description">
           {{ radio.description }}
         </div>

front/src/views/Notifications.vue

@@ -7,9 +7,9 @@
           <div class="ui two column stackable grid">
             <div class="column" v-if="showInstanceSupportMessage">
               <div class="ui attached info message">
-                <div class="header">
+                <h4 class="header">
                   <translate translate-context="Content/Notifications/Header">Support this Funkwhale pod</translate>
-                </div>
+                </h4>
                 <div v-html="markdown.makeHtml($store.state.instance.settings.instance.support_message.value)"></div>
               </div>
               <div class="ui bottom attached segment">
@@ -33,9 +33,9 @@
             </div>
             <div class="column" v-if="showFunkwhaleSupportMessage">
               <div class="ui info attached message">
-                <div class="header">
+                <h4 class="header">
                   <translate translate-context="Content/Notifications/Header">Do you like Funkwhale?</translate>
-                </div>
+                </h4>
                 <p>
                   <translate translate-context="Content/Notifications/Paragraph">We noticed you've been here for a while. If Funkwhale is useful to you, we could use your help to make it even better!</translate>
                 </p>

front/src/views/admin/moderation/DomainsList.vue

@@ -4,7 +4,7 @@
       <h2 class="ui left floated header"><translate translate-context="*/Moderation/*/Noun">Domains</translate></h2>
       <form class="ui right floated form" @submit.prevent="createDomain">
         <div v-if="errors && errors.length > 0" role="alert" class="ui negative message">
-          <div class="header"><translate translate-context="Content/Moderation/Message.Title">Error while creating domain</translate></div>
+          <h4 class="header"><translate translate-context="Content/Moderation/Message.Title">Error while creating domain</translate></h4>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>

front/src/views/auth/EmailConfirm.vue

@@ -5,7 +5,7 @@
         <h2>{{ labels.confirm }}</h2>
         <form v-if="!success" class="ui form" @submit.prevent="submit()">
           <div v-if="errors.length > 0" role="alert" class="ui negative message">
-            <div class="header"><translate translate-context="Content/Signup/Paragraph">Could not confirm your e-mail address</translate></div>
+            <h4 class="header"><translate translate-context="Content/Signup/Paragraph">Could not confirm your e-mail address</translate></h4>
             <ul class="list">
               <li v-for="error in errors">{{ error }}</li>
             </ul>
@@ -21,7 +21,7 @@
             {{ labels.confirm }}</button>
         </form>
         <div v-else class="ui positive message">
-          <div class="header"><translate translate-context="Content/Signup/Message">E-mail address confirmed</translate></div>
+          <h4 class="header"><translate translate-context="Content/Signup/Message">E-mail address confirmed</translate></h4>
           <p><translate translate-context="Content/Signup/Paragraph">You can now use the service without limitations.</translate></p>
           <router-link :to="{name: 'login'}">
             <translate translate-context="Content/Signup/Link/Verb">Proceed to login</translate>

front/src/views/auth/PasswordReset.vue

@@ -5,7 +5,7 @@
         <h2><translate translate-context="*/Login/*/Verb">Reset your password</translate></h2>
         <form class="ui form" @submit.prevent="submit()">
           <div v-if="errors.length > 0" role="alert" class="ui negative message">
-            <div class="header"><translate translate-context="Content/Signup/Card.Title">Error while asking for a password reset</translate></div>
+            <h4 class="header"><translate translate-context="Content/Signup/Card.Title">Error while asking for a password reset</translate></h4>
             <ul class="list">
               <li v-for="error in errors">{{ error }}</li>
             </ul>

front/src/views/auth/PasswordResetConfirm.vue

@@ -5,7 +5,7 @@
         <h2>{{ labels.changePassword }}</h2>
         <form v-if="!success" class="ui form" @submit.prevent="submit()">
           <div v-if="errors.length > 0" role="alert" class="ui negative message">
-            <div class="header"><translate translate-context="Content/Signup/Card.Title">Error while changing your password</translate></div>
+            <h4 class="header"><translate translate-context="Content/Signup/Card.Title">Error while changing your password</translate></h4>
             <ul class="list">
               <li v-for="error in errors">{{ error }}</li>
             </ul>
@@ -26,7 +26,7 @@
           </template>
         </form>
         <div v-else class="ui positive message">
-          <div class="header"><translate translate-context="Content/Signup/Card.Title">Password updated successfully</translate></div>
+          <h4 class="header"><translate translate-context="Content/Signup/Card.Title">Password updated successfully</translate></h4>
           <p><translate translate-context="Content/Signup/Card.Paragraph">Your password has been updated successfully.</translate></p>
           <router-link :to="{name: 'login'}">
             <translate translate-context="Content/Signup/Link/Verb">Proceed to login</translate>

front/src/views/auth/ProfileOverview.vue

@@ -36,11 +36,11 @@
     </div>
 
     <modal :show.sync="showCreateModal">
-      <div class="header">
+      <h4 class="header">
         <translate v-if="step === 1" key="1" translate-context="Content/Channel/*/Verb">Create channel</translate>
         <translate v-else-if="category === 'podcast'" key="2" translate-context="Content/Channel/*">Podcast channel</translate>
         <translate v-else key="3" translate-context="Content/Channel/*">Artist channel</translate>
-      </div>
+      </h4>
       <div class="scrolling content" ref="modalContent">
         <channel-form
           ref="createForm"

front/src/views/channels/DetailBase.vue

@@ -35,9 +35,9 @@
                   <i class="feed icon"></i>
                 </a>
                 <modal class="tiny" :show.sync="showSubscribeModal">
-                  <div class="header">
+                  <h4 class="header">
                     <translate translate-context="Popup/Channel/Title/Verb">Subscribe to this channel</translate>
-                  </div>
+                  </h4>
                   <div class="scrollable content">
                     <div class="description">
 
@@ -156,9 +156,9 @@
               </div>
 
               <modal :show.sync="showEmbedModal" v-if="totalTracks > 0">
-                <div class="header">
+                <h4 class="header">
                   <translate translate-context="Popup/Artist/Title/Verb">Embed this artist work on your website</translate>
-                </div>
+                </h4>
                 <div class="content">
                   <div class="description">
                     <embed-wizard type="artist" :id="object.artist.id" />
@@ -171,11 +171,11 @@
                 </div>
               </modal>
               <modal :show.sync="showEditModal" v-if="isOwner">
-                <div class="header">
+                <h4 class="header">
                   <translate v-if="object.artist.content_category === 'podcast'" key="1" translate-context="Content/Channel/*">Podcast channel</translate>
                   <translate v-else key="2" translate-context="Content/Channel/*">Artist channel</translate>
 
-                </div>
+                </h4>
                 <div class="scrolling content">
                   <channel-form
                     ref="editForm"

front/src/views/content/libraries/Card.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ui card">
     <div class="content">
-      <div class="header">
+      <h4 class="header">
         {{ library.name }}
         <span
           v-if="library.privacy_level === 'me'"
@@ -21,7 +21,7 @@
           :data-tooltip="privacy_tooltips('everyone')">
           <i class="small globe icon"></i>
         </span>
-      </div>
+      </h4>
       <div class="meta">
         <span>
           <i class="small outline clock icon" />

front/src/views/content/libraries/Form.vue

@@ -2,7 +2,7 @@
   <form class="ui form" @submit.prevent="submit">
     <p v-if="!library"><translate translate-context="Content/Library/Paragraph">Libraries help you organize and share your music collections. You can upload your own music collection to Funkwhale and share it with your friends and family.</translate></p>
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></div>
+      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/views/content/remote/Card.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ui card">
     <div class="content">
-      <div class="header">
+      <h4 class="header">
         <router-link :to="{name: 'library.detail', params: {id: library.uuid}}">
           {{ library.name }}
         </router-link>
@@ -30,7 +30,7 @@
           :data-tooltip="labels.tooltips.everyone">
           <i class="small globe icon"></i>
         </span>
-      </div>
+      </h4>
       <div class="meta">
         <span>
           <i class="small outline clock icon" />

front/src/views/content/remote/ScanForm.vue

@@ -1,7 +1,7 @@
 <template>
   <form class="ui form" @submit.prevent="scan">
     <div v-if="errors.length > 0" role="alert" class="ui negative message">
-      <div class="header"><translate translate-context="Content/Library/Error message.Title">Could not fetch remote library</translate></div>
+      <h4 class="header"><translate translate-context="Content/Library/Error message.Title">Could not fetch remote library</translate></h4>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>

front/src/views/playlists/Detail.vue

@@ -49,9 +49,9 @@
         </dangerous-button>
       </div>
       <modal v-if="playlist.privacy_level === 'everyone' && playlist.is_playable" :show.sync="showEmbedModal">
-        <div class="header">
+        <h4 class="header">
           <translate translate-context="Popup/Album/Title/Verb">Embed this playlist on your website</translate>
-        </div>
+        </h4>
         <div class="content">
           <div class="description">
             <embed-wizard type="playlist" :id="playlist.id" />