Allow open split view using the keyboard (#19927)

* Allow open split view using the keyboard

* Add localize method to the label

* Add a method to localize terms with a language parameter

* adjust localization wording

* support segments in label

* localize texts

---------

Co-authored-by: Mads Rasmussen <[email protected]>

Author: engijlr

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

@@ -176,6 +176,9 @@ export default {
 		confirmActionConfirm: 'Bekræft',
 		morePublishingOptions: 'Flere publiseringsmuligheder',
 		submitChanges: 'Indsæt',
+		openInSplitView: 'Åbn i sidestillet visning',
+		openVersionSelector: 'Åbn udgavevælger',
+		closeVersionSelector: 'Luk udgavevælger',
 	},
 	auditTrailsMedia: {
 		delete: 'Medie slettet',
@@ -352,6 +355,7 @@ export default {
 		selectAllVariants: 'Vælg alle varianter',
 		scheduledPendingChanges: 'Denne tidsplan har ændringer, der træder i kraft, når du klikker på "%0%".',
 		noVariantsToProcess: 'Der er ingen tilgængelige varianter',
+		openSplitViewForVariant: (variant: string) => `Åbn ${variant} i sidestillet visning`,
 	},
 	blueprints: {
 		createBlueprintFrom: "Opret en ny indholdsskabelon fra '%0%'",

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

@@ -177,6 +177,9 @@ export default {
 		morePublishingOptions: 'More publishing options',
 		submitChanges: 'Submit',
 		viewSystemDetails: 'View Umbraco CMS system information and version number',
+		openInSplitView: 'Open in split view',
+		openVersionSelector: 'Open version selector',
+		closeVersionSelector: 'Close version selector',
 	},
 	auditTrailsMedia: {
 		delete: 'Media deleted',
@@ -353,6 +356,7 @@ export default {
 		saveModalTitle: 'Save',
 		saveAndPublishModalTitle: 'Save and publish',
 		publishModalTitle: 'Publish',
+		openSplitViewForVariant: (variant: string) => `Open ${variant} in split view`,
 	},
 	blueprints: {
 		createBlueprintFrom: "Create a new Document Blueprint from '%0%'",

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

@@ -204,6 +204,7 @@ export default {
 		removeTextBox: 'Eliminar caja de texto',
 		contentRoot: 'Raíz de contenido',
 		saveModalTitle: 'Guardar',
+		openSplitViewForVariant: (variant: string) => `Abrir vista dividida para '${variant}'`,
 	},
 	blueprints: {
 		createBlueprintFrom: 'Crear nueva Plantilla de Contenido desde <em>%0%</em>',

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts

@@ -324,7 +324,9 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 								slot="append"
 								popovertarget="popover"
 								title=${this.#getVariantSpecInfo(this._activeVariant)}
-								label="Select a variant">
+								label=${this._variantSelectorOpen
+									? this.localize.term('buttons_closeVersionSelector')
+									: this.localize.term('buttons_openVersionSelector')}>
 								${this.#getVariantSpecInfo(this._activeVariant)}
 								${this.#renderReadOnlyTag(this._activeVariant?.culture)}
 								<uui-symbol-expand .open=${this._variantSelectorOpen}></uui-symbol-expand>
@@ -488,9 +490,9 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 				: html`
 						<uui-button
 							class="split-view"
-							label="Open Split view for ${variant.language.name}"
+							label=${this.localize.term('content_openSplitViewForVariant', this.#getVariantSpecInfo(variant))}
 							@click=${() => this.#openSplitView(variant)}>
-							Open in Split view
+							${this.localize.term('buttons_openInSplitView')}
 						</uui-button>
 					`}
 		`;
@@ -561,7 +563,9 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 				background: none;
 			}
 
-			.variant:hover > .split-view {
+			.variant:hover > .split-view,
+			.variant:focus > .split-view,
+			.variant:focus-within > .split-view {
 				display: flex;
 			}