Create `<h3>` headings for profile page. Replace `<label>` which have no conncted `<input>` with `<h3>` heading

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

4 files changed, 16 insertions, 6 deletions

diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
index e9d59d72f9c..33b65dcd26e 100644
--- a/apps/settings/src/components/PersonalInfo/AvatarSection.vue
+++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
@@ -22,6 +22,7 @@
 
 <template>
 	<section id="vue-avatar-section">
+		<h3 class="hidden-visually"> {{ t('settings', 'Your profile information') }} </h3>
 		<HeaderBar :input-id="avatarChangeSupported ? inputId : null"
 			:readable="avatar.readable"
 			:scope.sync="avatar.scope" />
diff --git a/apps/settings/src/components/PersonalInfo/DetailsSection.vue b/apps/settings/src/components/PersonalInfo/DetailsSection.vue
index ebfbe51d654..10f9b757220 100644
--- a/apps/settings/src/components/PersonalInfo/DetailsSection.vue
+++ b/apps/settings/src/components/PersonalInfo/DetailsSection.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<section>
-		<HeaderBar :readable="t('settings', 'Details')" />
+		<HeaderBar :is-heading="true" :readable="t('settings', 'Details')" />
 
 		<div class="details">
 			<div class="details__groups">
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
index a617debd6c1..a69dc811912 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
@@ -24,7 +24,7 @@
 	<!-- TODO remove this inline margin placeholder once the settings layout is updated -->
 	<section id="profile-visibility"
 		:style="{ marginLeft }">
-		<HeaderBar :readable="heading" />
+		<HeaderBar :is-heading="true" :readable="heading" />
 
 		<em :class="{ disabled }">
 			{{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }}
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index 0e42005861c..8db2a43f6bc 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -21,8 +21,12 @@
 -->
 
 <template>
-	<h3 :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
-		<label :for="inputId">
+	<component :is="isHeading ? `h3` : `div`" class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
+		<span v-if="isHeading">
+			<!-- Already translated as required by prop validator -->
+			{{ readable }}
+		</span>
+		<label v-else :for="inputId">
 			<!-- Already translated as required by prop validator -->
 			{{ readable }}
 		</label>
@@ -45,7 +49,7 @@
 				{{ t('settings', 'Add') }}
 			</NcButton>
 		</template>
-	</h3>
+	</component>
 </template>
 
 <script>
@@ -93,6 +97,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		isHeading: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	data() {
@@ -124,7 +132,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	h3 {
+	.headerbar-label {
+		font-weight: normal;
 		display: inline-flex;
 		width: 100%;
 		margin: 12px 0 0 0;