@conduction/nextcloud-vue 2.74.0 → 2.75.0

package/src/components/CnFormPage/CnFormPage.vue

@@ -217,6 +217,7 @@
 					<component
 						:is="resolveFieldRender(field).tag"
 						v-if="resolveFieldRender(field)"
+						v-cn-select-aria="selectAria(field)"
 						v-bind="fieldProps(field)"
 						v-on="resolveFieldRender(field).listeners">
 						<!-- NcCheckboxRadioSwitch puts its label in the slot -->
@@ -398,6 +399,7 @@ import CnStepper from '../CnStepper/CnStepper.vue'
 import { cnRenderFormField } from '../../composables/cnFormFieldRenderer.js'
 import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
 import { normalizeLook } from '../../composables/useLook.js'
+import { cnSelectAria } from '../../directives/cnSelectAria.js'
 import { loadCurrentUserProfile } from '../../utils/currentUserProfile.js'
 import { computeAssignments, resolveFieldDefaults } from '../../utils/formAssign.js'
 import { validateFieldValue } from '../../utils/formValidation.js'
@@ -441,6 +443,8 @@ function resolveParams(url, params) {
 export default {
 	name: 'CnFormPage',
 
+	directives: { cnSelectAria },
+
 	components: {
 		CnFormErrorSummary,
 		CnFormField,
@@ -1308,6 +1312,35 @@ export default {
 			return props
 		},
 
+		/**
+		 * The accessibility attributes of an enum field's NcSelect. NcSelect
+		 * forwards no attributes to its input, so these go through
+		 * `v-cn-select-aria` onto the combobox input instead of `fieldProps`.
+		 * The error element exists for an enum in both looks (NcSelect has no
+		 * native error text), so an invalid value lists it before the hint.
+		 *
+		 * @param {object} field The formField shape.
+		 * @return {object|null} The attributes, or null for any other control.
+		 */
+		selectAria(field) {
+			const render = this.resolveFieldRender(field)
+			if (!render || render.kind !== 'enum') {
+				return null
+			}
+			const ids = []
+			if (this.fieldErrors[field.key]) {
+				ids.push(this.errorIdFor(field))
+			}
+			if (field.help) {
+				ids.push(this.helpIdFor(field))
+			}
+			return {
+				'aria-invalid': this.fieldErrors[field.key] ? 'true' : null,
+				'aria-describedby': ids.length > 0 ? ids.join(' ') : null,
+				'aria-required': this.showsBoardHead(field) && this.isFieldRequired(field) ? 'true' : null,
+			}
+		},
+
 		/**
 		 * Cancel (board look footer): go to `cancelRoute` when set, and tell the
 		 * host.

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -82,7 +82,7 @@
 			:activeFilterChips="activeFilterChips"
 			:showBuildiqButton="!buildiqInHeader"
 			:bulkNoun="boardBulkNoun"
-			:bulkHint="bulkHint"
+			:bulkHint="bulkHint ? cnTranslate(bulkHint) : bulkHint"
 			:pagination="effectivePagination"
 			:objectCount="effectiveObjects.length"
 			:selectable="selectable"
@@ -848,7 +848,7 @@
 				<CnPagination
 					v-if="effectivePagination && (effectivePagination.pages > 1 || (isBoardLook && effectivePagination.total > 0))"
 					:variant="isBoardLook ? 'board' : ''"
-					:footerNote="footerNote"
+					:footerNote="footerNote ? cnTranslate(footerNote) : footerNote"
 					:currentPage="effectivePagination.page || 1"
 					:totalPages="effectivePagination.pages || 1"
 					:totalItems="effectivePagination.total || 0"

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -46,7 +46,7 @@
 					:name="entry.tab.icon"
 					:size="16"
 					class="cn-quick-filter-bar__icon" />
-				<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+				<span class="cn-quick-filter-bar__label">{{ tl(entry.tab.label) }}</span>
 				<span
 					v-if="countOf(entry) !== null"
 					class="cn-quick-filter-bar__count"
@@ -102,7 +102,7 @@
 							:name="entry.tab.icon"
 							:size="16"
 							class="cn-quick-filter-bar__icon" />
-						<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+						<span class="cn-quick-filter-bar__label">{{ tl(entry.tab.label) }}</span>
 						<span
 							v-if="countOf(entry) !== null"
 							class="cn-quick-filter-bar__count"
@@ -152,6 +152,11 @@ export default {
 	inject: {
 		/** The look CnAppRoot provides; `board` draws the tabs as pressed chips. */
 		cnLook: { default: 'nextcloud' },
+		/**
+		 * The host's label lookup (CnAppRoot provides it); identity without one, so a
+		 * label that is not a key renders as written.
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	// NO `model: { prop, event }` OPTION.
@@ -336,7 +341,7 @@ export default {
 		overflowLabel() {
 			const active = this.activeOverflowEntries
 			if (active.length === 1) {
-				return active[0].tab.label
+				return this.tl(active[0].tab.label)
 			}
 			if (active.length > 1) {
 				return t('nextcloud-vue', '{count} filters', { count: active.length })
@@ -370,7 +375,7 @@ export default {
 				.map((tab, index) => {
 					const count = this.countOf({ tab, index })
 					return {
-						label: count === null ? tab.label : `${tab.label} (${count})`,
+						label: count === null ? this.tl(tab.label) : `${this.tl(tab.label)} (${count})`,
 						icon: tab.icon,
 						index,
 						_empty: this.isEmptyFilter(tab),
@@ -394,6 +399,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
+		 * such as "Mine" reads in the user's language.
+		 *
+		 * @param {string} text The text as written in the manifest.
+		 * @return {string} The translated text.
+		 */
+		tl(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		t,
 
 		/**

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -39,7 +39,7 @@
 					</slot>
 				</span>
 				<h4 class="cn-kpi-card__title" :title="title || undefined">
-					{{ title || t('nextcloud-vue', 'Objects') }}
+					{{ title ? tl(title) : t('nextcloud-vue', 'Objects') }}
 				</h4>
 			</div>
 
@@ -54,7 +54,7 @@
 					<!-- @binding {string} formatted The default localized count string. -->
 					<slot name="value" :count="count" :formatted="formattedCount">{{ formattedCount }}</slot>
 				</span>
-				<span class="cn-kpi-card__label cn-stats-block__count-label">{{ countLabel }}</span>
+				<span class="cn-kpi-card__label cn-stats-block__count-label">{{ countLabel ? tl(countLabel) : countLabel }}</span>
 			</div>
 			<div v-else-if="loading" class="cn-stats-block__loading">
 				<NcLoadingIcon :size="16" />
@@ -164,6 +164,11 @@ export default {
 		 * @spec openspec/changes/screens-dashboard-parity/specs/dashboard-page/spec.md#requirement-the-board-kpi-tile
 		 */
 		cnLook: { default: 'nextcloud' },
+		/**
+		 * The host's label lookup (CnAppRoot provides it); identity without one, so a
+		 * label that is not a key renders as written.
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -453,6 +458,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
+		 * such as "Mine" reads in the user's language.
+		 *
+		 * @param {string} text The text as written in the manifest.
+		 * @return {string} The translated text.
+		 */
+		tl(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		formatBreakdownLabel(key) {
 			return key.charAt(0).toUpperCase() + key.slice(1) + ':'
 		},

package/src/css/form-field.css

@@ -88,7 +88,7 @@
 }
 
 /* An invalid field: 2px error border on the control, 4px edge on the group. */
-.cn-look-board .cn-form-field--invalid input,
+.cn-look-board .cn-form-field--invalid input:not([type='checkbox']):not([type='radio']),
 .cn-look-board .cn-form-field--invalid textarea,
 .cn-look-board .cn-form-field--invalid .select {
 	border: var(--cn-field-error-border) solid var(--color-error);

package/src/directives/cnSelectAria.js

@@ -0,0 +1,54 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * `v-cn-select-aria`: puts `aria-invalid`, `aria-describedby` and
+ * `aria-required` on the search input of an NcSelect.
+ *
+ * NcSelect forwards no attributes to its input: an attribute bound on it lands
+ * on the wrapping `.v-select` div, where a screen reader never reads it. The
+ * input is the combobox, so the attributes belong there. This directive sets
+ * them on that input after every render, and removes the ones that go away
+ * (a field that becomes valid loses `aria-invalid`).
+ *
+ * Usage: `<NcSelect v-cn-select-aria="{ 'aria-invalid': 'true', 'aria-describedby': 'err-id' }" />`
+ * A `null` or `undefined` value does nothing, so a caller can bind it
+ * unconditionally.
+ *
+ * @spec openspec/changes/screens-form-parity/tasks.md
+ */
+
+const ARIA_ATTRIBUTES = ['aria-invalid', 'aria-describedby', 'aria-required']
+
+/**
+ * Apply the bound attributes to the combobox input inside the element.
+ *
+ * @param {HTMLElement} el The element the directive sits on (the select root).
+ * @param {{value: object|null|undefined}} binding The directive binding.
+ * @return {void}
+ */
+function apply(el, binding) {
+	const attributes = binding.value
+	if (!attributes || typeof el.querySelector !== 'function') {
+		return
+	}
+	const input = el.querySelector('input.vs__search') || el.querySelector('input')
+	if (!input) {
+		return
+	}
+	for (const name of ARIA_ATTRIBUTES) {
+		const value = attributes[name]
+		if (value === undefined || value === null || value === false) {
+			input.removeAttribute(name)
+		} else {
+			input.setAttribute(name, String(value))
+		}
+	}
+}
+
+export const cnSelectAria = {
+	mounted: apply,
+	updated: apply,
+}
+
+export default cnSelectAria

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.72.0",
+	"version": "2.73.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -326,6 +326,11 @@
 						"alt": {
 							"type": "string",
 							"description": "i18n key / alternative text for the logo. Used only when no `name` is set."
+						},
+						"placement": {
+							"type": "string",
+							"enum": ["header", "nav"],
+							"description": "Where the brand block is drawn (screens-brand-block-top-bar). Under `look: \"board\"` the default is `header`: a 237px block at the start of Nextcloud's own header (#header), before the app menu, drawn by CnAppRoot; an app without CnAppNav has it too. Nextcloud offers no extension point there, so when `#header` is absent the block falls back to the navigation. `nav` keeps the block at the top of the app navigation. Ignored without the board look, where the navigation draws the block."
 						}
 					}
 				},

package/src/utils/cnFetch.js

@@ -59,11 +59,26 @@ export function configureCnFetch(config = {}) {
 	}
 	transport = {
 		host,
-		baseUrl: typeof config.baseUrl === 'string' ? config.baseUrl.replace(/\/+$/, '') : '',
+		baseUrl: typeof config.baseUrl === 'string' ? stripTrailingSlashes(config.baseUrl) : '',
 		credential: config.credential || null,
 	}
 }
 
+/**
+ * Drop trailing `/` characters in one linear pass (a `/\/+$/` pattern
+ * backtracks quadratically on a long run of slashes).
+ *
+ * @param {string} value The string to trim.
+ * @return {string} The string without trailing slashes.
+ */
+export function stripTrailingSlashes(value) {
+	let end = value.length
+	while (end > 0 && value.charCodeAt(end - 1) === 47) {
+		end--
+	}
+	return value.slice(0, end)
+}
+
 /**
  * The bearer credential, resolved.
  *

package/src/utils/resolveBrand.js

@@ -0,0 +1,37 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Reads a declared brand (`nav.brand`, or the `brand` prop of CnAppNav and
+ * CnAppRoot) into the one shape the brand block and the brand bar draw.
+ *
+ * @spec openspec/changes/screens-brand-block-top-bar/tasks.md
+ */
+
+/**
+ * Resolve a declared brand.
+ *
+ * @param {object|null|undefined} declared The declared brand.
+ * @param {(text: string) => string} translate Label lookup for name, caption and alt.
+ * @return {{logo: string, emblem: (string|boolean), name: string, caption: string, alt: string, placement: string}|null}
+ *   The brand, or null when nothing is declared that can be drawn.
+ */
+export function resolveBrand(declared, translate) {
+	if (!declared || typeof declared !== 'object') {
+		return null
+	}
+	const text = (value) => (typeof value === 'string' && value !== '' ? translate(value) : '')
+	const brand = {
+		logo: typeof declared.logo === 'string' ? declared.logo : '',
+		// A URL, or `true` for the theme's emblem (--nldesign-emblem-url).
+		emblem: declared.emblem === true ? true : (typeof declared.emblem === 'string' ? declared.emblem : ''),
+		name: text(declared.name),
+		caption: text(declared.caption),
+		alt: text(declared.alt),
+		// '' means "not declared": the caller decides the default from the look.
+		placement: declared.placement === 'nav' || declared.placement === 'header' ? declared.placement : '',
+	}
+	return (brand.logo || brand.emblem || brand.name || brand.caption) ? brand : null
+}
+
+export default resolveBrand