Add accessibility label for splitview divider (#20380)

* added hovering and focus border to RTE

* fix main to OG

* fix to main again

* I'm going to cry

* Added label for splitviewdivider

* Added localization to divider label and updated common lang files

* Removes unused import

---------

Co-authored-by: Oskar kruger <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

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

@@ -850,6 +850,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,6 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import {
 	type PropertyValueMap,
-	LitElement,
 	css,
 	customElement,
 	html,
@@ -23,7 +23,7 @@ import { clamp } from '@umbraco-cms/backoffice/utils';
  * @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 +91,17 @@ export class UmbSplitPanelElement extends LitElement {
 	}
 
 	#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