Pickers: Show the number of selected items in the tree and collection item picker modals

[madsrasmussen]

Description

Adds a selection count to the two picker modals, so the current selection stays visible while
browsing or searching.

Picking several items in a tree or collection picker gives no running feedback today. Once you
expand into a branch or start searching, the already-picked items scroll out of view and the only
signal that anything is selected is the enabled Choose button. This adds a bar above the modal
footer showing how many items are currently selected.

What changed

• umb-tree-picker-modal and umb-collection-item-picker-modal each render a info bar
  in umb-body-layout's footer slot, directly above the Close/Choose actions.
• The bar is styled to match the existing collection selection action bar.
• It renders only when the picker allows multiple selection.
• The count comes from the picker context's selection observable, so it stays in sync while
  browsing, searching and paging.
• New localization key

The bar is deliberately duplicated in both modals to keep this change contained within the two pickers it targets. We can generalize it later.

How to test

Multi-select tree picker — bar shows

1. Open a document with a Multinode Treepicker property configured to allow multiple items.
2. Click Choose.
3. Select several items in the tree.
4. A blue bar appears above the footer reading "N items selected", and updates as you select and
   deselect.
5. Select exactly one item and confirm it reads "1 item selected", not "1 items selected".
6. Expand a branch or type in the search field and confirm the count stays correct and visible.

Single-select picker — no bar

1. Open a document with a Content Picker property that allows only one item.
2. Remove the current value, then click Choose.
3. Select an item and confirm no bar appears — the layout is unchanged from before.

Collection item picker

1. Open a property editor that uses the collection item picker (for example the Entity Data Picker)
   configured for multiple selection.
2. Click Choose, select several items, and confirm the same bar appears in the same position.

[claude]

Claude finished @madsrasmussen's task in 3m 41s —— View job

---

PR Review

Target: origin/v17/dev · Based on commit: 021cf18b · Skipped: 17 files out of 20 total (non-English lang files)

Adds a reactive "N items selected" count bar above the footer in umb-tree-picker-modal and umb-collection-item-picker-modal. The bar is driven by the picker context selection observable and renders only for multi-select pickers — a clear UX improvement with a minimal change surface.

• No modified public API — only @state() fields and private render methods added; no @property() or exported symbols changed.
• No breaking changes.
• Other changes: New picker.selectedCount localization key added to all 18 shipped locale files.

---

Suggestions

• tree-picker-modal.element.ts:453 / collection-item-picker-modal.element.ts:189: The #selection-info bar updates its count reactively, but without an ARIA live region, screen readers won't announce the change. Adding aria-live="polite" lets assistive technology announce the updated count without interrupting current speech. Same fix applies in both modals:

  <div id="selection-info" slot="footer" aria-live="polite">
    ${this.localize.term('picker_selectedCount', this._selectionCount)}
  </div>

---

Approved with Suggestions for improvement

Good to go, but please carefully consider the importance of the suggestions.

---

Labels applied: area/frontend, category/localization, category/ux, category/ui

[claude]

PR Review - see summary in Claude comment above.

[Copilot]

Pull request overview

Adds a persistent, localized “selected items” count bar to the multi-select variants of the tree picker and collection item picker modals, keeping selection feedback visible while browsing/searching.

Changes:

• Track selection length in both picker modals and render a footer info bar when multiple is enabled and there is a selection.
• Add styling for the new footer bar to match existing “selected” action bar visuals.
• Introduce a new localization key (picker_selectedCount) and provide translations across several languages.

Reviewed changes

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

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts	Adds selection count state and renders a footer selection-count bar for multi-select tree picker.
src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.element.ts	Adds selection count state and renders a footer selection-count bar for multi-select collection item picker.
src/Umbraco.Web.UI.Client/src/assets/lang/zh.ts	Adds picker.selectedCount localization entry.
src/Umbraco.Web.UI.Client/src/assets/lang/zh-tw.ts	Adds picker.selectedCount localization entry.
src/Umbraco.Web.UI.Client/src/assets/lang/vi.ts	Adds picker.selectedCount localization entry.
src/Umbraco.Web.UI.Client/src/assets/lang/tr.ts	Adds picker.selectedCount localization entry.
src/Umbraco.Web.UI.Client/src/assets/lang/sv.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/ro.ts	Adds picker.selectedCount localization entry (language-specific pluralization rules).
src/Umbraco.Web.UI.Client/src/assets/lang/pt.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/pt-br.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/nl.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/nb.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/ko.ts	Adds picker.selectedCount localization entry.
src/Umbraco.Web.UI.Client/src/assets/lang/ja.ts	Adds picker.selectedCount localization entry.
src/Umbraco.Web.UI.Client/src/assets/lang/it.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/fr.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/es.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/en.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/de.ts	Adds picker.selectedCount localization entry (with pluralization).
src/Umbraco.Web.UI.Client/src/assets/lang/da.ts	Adds picker.selectedCount localization entry (with pluralization).

Suppressed comments (2)

src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.element.ts:86

• _selectionConfiguration.selection filters out null values (see updated()), but _selectionCount is based on the raw selection array length. If the modal value ever contains null, the UI will show fewer selected items than the count shown in the new footer bar. Consider counting only non-null uniques to keep the count consistent with what the collection components can actually represent.

This issue also appears on line 189 of the same file.

	#observePickerSelection() {
		this.observe(
			this.#pickerContext.selection.selection,
			(selection) => {
				this._selectionCount = selection.length;
				this.updateValue({ selection });
				this.requestUpdate();
			},
			'umbPickerSelectionObserver',
		);

src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.element.ts:195

• #renderSelectionCount() currently checks _hasSelection, which can be true even when the displayed count is 0 (e.g., if the selection array contains only null values). After filtering null values for _selectionCount, it’s safer to render the bar only when _selectionCount > 0.

	#renderSelectionCount() {
		if (!this._selectionConfiguration.multiple || !this._hasSelection) return nothing;

		return html`
			<div id="selection-info" slot="footer">${this.localize.term('picker_selectedCount', this._selectionCount)}</div>
		`;
	}

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[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

[madsrasmussen]

We will fix the aria-attribute in another PR. We need to address this issue across the different selection experiences in the back office. A live region must already be in the accessibility tree before its content changes. Adding the attribute to a node that is inserted together with its text produces inconsistent results across NVDA, JAWS, and VoiceOver. This means we will need to duplicate the markup and visually hide it. It will make sense to add this once we have it componentized.