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>

apps/settings/css/settings.css

@@ -113,7 +113,7 @@ input#openid, input#webdav {
 .personal-settings-setting-box .section {
   padding: 10px 30px;
 }
-.personal-settings-setting-box .section h3 {
+.personal-settings-setting-box .section .headerbar-label {
   margin-bottom: 0;
 }
 .personal-settings-setting-box .section input[type=text], .personal-settings-setting-box .section input[type=email], .personal-settings-setting-box .section input[type=tel], .personal-settings-setting-box .section input[type=url] {

apps/settings/css/settings.scss

@@ -56,8 +56,7 @@ input {
 .personal-settings-setting-box {
 	.section {
 		padding: 10px 30px;
-
-		h3 {
+		.headerbar-label {
 			margin-bottom: 0;
 		}
 

apps/settings/js/federationsettingsview.js

@@ -82,7 +82,7 @@
 			];
 
 			_.each(this._inputFields, function(field) {
-				var $icon = self.$('#' + field + 'form h3 > .federation-menu');
+				var $icon = self.$('#' + field + 'form .headerbar-label > .federation-menu');
 				var excludedScopes = []
 
 				if (fieldsWithV2Private.indexOf(field) === -1) {
@@ -245,7 +245,7 @@
 		},
 
 		_setFieldScopeIcon: function(field, scope) {
-			var $icon = this.$('#' + field + 'form > h3 .icon-federation-menu');
+			var $icon = this.$('#' + field + 'form > .headerbar-label .icon-federation-menu');
 
 			$icon.removeClass('icon-phone');
 			$icon.removeClass('icon-password');

apps/settings/src/components/PersonalInfo/AvatarSection.vue

@@ -22,6 +22,7 @@
 
 <template>
 	<section>
+		<h3 class="hidden-visually"> {{ t('settings', 'Your profile information') }} </h3>
 		<HeaderBar :input-id="avatarChangeSupported ? inputId : null"
 			:readable="avatar.readable"
 			:scope.sync="avatar.scope" />

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">

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.') }}

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;