2 files changed, 21 insertions, 12 deletions
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue
index 99dadd449ce..8b2f8e3d0cc 100644
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue
+++ b/apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="language">
-		<select id="language"
+		<select :id="inputId"
 			:placeholder="t('settings', 'Language')"
 			@change="onLanguageChange">
 			<option v-for="commonLanguage in commonLanguages"
@@ -53,15 +53,19 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService'
-import { validateLanguage } from '../../../utils/validate'
-import logger from '../../../logger'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { validateLanguage } from '../../../utils/validate.js'
+import logger from '../../../logger.js'
 
 export default {
 	name: 'Language',
 
 	props: {
+		inputId: {
+			type: String,
+			default: null,
+		},
 		commonLanguages: {
 			type: Array,
 			required: true,
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
index 90882b23869..fdc1d31d10c 100644
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
+++ b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
@@ -22,11 +22,12 @@
 
 <template>
 	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="language" />
+		<HeaderBar :input-id="inputId"
+			:readable="propertyReadable" />
 
 		<template v-if="isEditable">
-			<Language :common-languages="commonLanguages"
+			<Language :input-id="inputId"
+				:common-languages="commonLanguages"
 				:other-languages="otherLanguages"
 				:language.sync="language" />
 		</template>
@@ -40,10 +41,10 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
-import Language from './Language'
-import HeaderBar from '../shared/HeaderBar'
+import Language from './Language.vue'
+import HeaderBar from '../shared/HeaderBar.vue'
 
-import { ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { ACCOUNT_SETTING_PROPERTY_ENUM, ACCOUNT_SETTING_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js'
 
 const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState('settings', 'personalInfoParameters', {})
 
@@ -57,7 +58,7 @@ export default {
 
 	data() {
 		return {
-			accountProperty: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LANGUAGE,
+			propertyReadable: ACCOUNT_SETTING_PROPERTY_READABLE_ENUM.LANGUAGE,
 			commonLanguages,
 			otherLanguages,
 			language: activeLanguage,
@@ -65,6 +66,10 @@ export default {
 	},
 
 	computed: {
+		inputId() {
+			return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}`
+		},
+
 		isEditable() {
 			return Boolean(this.language)
 		},