Add accessibility label for splitview divider

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -848,6 +848,7 @@ export default {
 		details: 'Detaljer',
 		dictionary: 'Ordbog',
 		dimensions: 'Dimensioner',
+		dividerPosition: (value: string | number) => `Skillevæg ved ${value}%`,
 		discard: 'Kassér',
 		down: 'Ned',
 		download: 'Hent',

src/Umbraco.Web.UI.Client/src/assets/lang/de.ts

@@ -770,6 +770,7 @@ export default {
 		design: 'Design',
 		dictionary: 'Wörterbuch',
 		dimensions: 'Abmessungen',
+		dividerPosition: (value: string | number) => `Trenner bei ${value}%`,
 		discard: 'Verwerfen',
 		down: 'nach unten',
 		download: 'Herunterladen',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -847,6 +847,7 @@ export default {
 		details: 'Details',
 		dictionary: 'Dictionary',
 		dimensions: 'Dimensions',
+		dividerPosition: (value: string | number) => `Divider at ${value}%`,
 		discard: 'Discard',
 		document: 'Document',
 		down: 'Down',

src/Umbraco.Web.UI.Client/src/assets/lang/es.ts

@@ -481,6 +481,7 @@ export default {
 		design: 'Diseño',
 		dictionary: 'Diccionario',
 		dimensions: 'Dimensiones',
+		dividerPosition: (value: string | number) => `Divisor en ${value}%`,
 		down: 'Abajo',
 		download: 'Descargar',
 		edit: 'Editar',

src/Umbraco.Web.UI.Client/src/assets/lang/fr.ts

@@ -673,6 +673,7 @@ export default {
 		design: 'Design',
 		dictionary: 'Dictionnaire',
 		dimensions: 'Dimensions',
+		dividerPosition: (value: string | number) => `Séparateur à ${value}%`,
 		down: 'Bas',
 		download: 'Télécharger',
 		edit: 'Editer',

src/Umbraco.Web.UI.Client/src/assets/lang/nl.ts

@@ -688,6 +688,7 @@ export default {
 		design: 'Ontwerp',
 		dictionary: 'Woordenboek',
 		dimensions: 'Afmetingen',
+		dividerPosition: (value: string | number) => `Verdeler op ${value}%`,
 		discard: 'Gooi weg',
 		down: 'Omlaag',
 		download: 'Download',

src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts

@@ -1,6 +1,7 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import {
 	type PropertyValueMap,
 	LitElement,
 	css,
 	customElement,
 	html,
@@ -23,7 +24,7 @@
  * @cssprop --umb-split-panel-divider-color - Color of the divider.
  */
 @customElement('umb-split-panel')
-export class UmbSplitPanelElement extends LitElement {
+export class UmbSplitPanelElement extends UmbLitElement {
 	@query('#main') mainElement!: HTMLElement;
 	@query('#divider-touch-area') dividerTouchAreaElement!: HTMLElement;
 	@query('#divider') dividerElement!: HTMLElement;
@@ -91,11 +92,17 @@
 	}
 
 	#setPosition(pos: number) {
-		const { width } = this.mainElement.getBoundingClientRect();
-		const localPos = clamp(pos, 0, width);
-		const percentagePos = (localPos / width) * 100;
-		this.position = percentagePos + '%';
-	}
+    const { width } = this.mainElement.getBoundingClientRect();
+    const localPos = clamp(pos, 0, width);
+    const percentagePos = (localPos / width) * 100;
+    this.position = percentagePos + '%';
+
+	// Update ARIA value for divider
+    const formatted = percentagePos.toFixed(0);
+    const ariaText = this.localize?.term('general_dividerPosition', [formatted]) ?? `Divider at ${formatted}%`;
+
+    this.dividerTouchAreaElement.setAttribute('aria-valuetext', ariaText);
+}
 
 	#updateSplit() {
 		// If lock is none