Media picker: Allows cancellation of folder creation, and adds buttons for better accessibility (closes #20452)

[iOvergaard]

Prerequisites

Fixes #20452

Description

Adds a key listener to presses of the ESC button to allow cancelling a folder creation.

Adds a Create button and a real <form> element surrounding the folder creation input for accessibility.

Adds an inline appended Cancel button (with an X icon) to additionally allow cancelling creation through a mouse click.

Screenshots

2026-07-02.at.15.47.44.-.Lime.Heron.mp4

[Copilot]

Pull request overview

Improves the media picker’s “create folder” flow by adding explicit cancel affordances and more accessible form semantics, aiming to address #20452 where folder creation couldn’t be abandoned without closing the picker.

Changes:

• Add ESC handling + a cancel button to exit folder creation.
• Wrap the new-folder input in a real <form> and add an explicit “Create” submit button for accessibility.
• Update kitchen-sink mock media-type data to mark the “Folder” media type as a folder.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.ts	Adds cancel/create UI and ESC handling for the inline “new folder” creation flow in the media picker.
src/Umbraco.Web.UI.Client/mocks/data/sets/kitchen-sink/media-type.data.ts	Adjusts mock media type data to set the “Folder” type as isFolder: true.

Comments suppressed due to low confidence (1)

src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.ts:229

• Escape handling is only wired on the folder-name , so when the UI is in "folder type selection" mode (this._selectingFolderType === true) pressing ESC will still bubble up to the modal and close the media picker instead of cancelling folder creation. This leaves the original issue unresolved for the multi-folder-type scenario.

Consider listening for Escape on the component wrapper (and only intercepting it while selecting/typing) so it cancels both type-selection and name-entry states.

	#onKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') {
			e.preventDefault();
			e.stopImmediatePropagation();
			this.#cancelFolderCreation();
		}
	}

	override render() {
		return html`<div id="path">
			<uui-breadcrumbs>
				${repeat(

[nielslyngsoe]

Surely an improvement, so from a UX perspective I accept the change.

But, (as always)

If you want to take it to the next level, then I would take that UI and put it into a dialog. Then it becomes a known UX format, cause this is very much a custom solution.

The problem with this type of UX is that it has limited space and a different look than everything else, so new users will spend a longer time decoding what it is about.

Where a dialog with an input, and the classis CTA's 'cancel', 'create' would be decoded instantly.

[nielslyngsoe]

great

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud