fix(a11y): gate-32/34/39/43/45/55 — frontend accessibility fixes

l10n/en.json

@@ -3099,7 +3099,21 @@
         "working days": "working days",
         "Your action": "Your action",
         "Your advice": "Your advice",
-        "Your advice has been received successfully. You can close this window.": "Your advice has been received successfully. You can close this window."
+        "Your advice has been received successfully. You can close this window.": "Your advice has been received successfully. You can close this window.",
+        "Close mandate details": "Close mandate details",
+        "Close step configuration": "Close step configuration",
+        "Close transition configuration": "Close transition configuration",
+        "Count": "Count",
+        "Delete {name}": "Delete {name}",
+        "Delete checklist “{name}”?": "Delete checklist “{name}”?",
+        "Delete complaint category": "Delete complaint category",
+        "Edit {name}": "Edit {name}",
+        "Remove action": "Remove action",
+        "Remove checklist item": "Remove checklist item",
+        "Remove guard": "Remove guard",
+        "Remove participant": "Remove participant",
+        "Remove required field": "Remove required field",
+        "The category could not be deleted. Please try again.": "The category could not be deleted. Please try again."
     },
     "plurals": ""
 }

l10n/nl.json

@@ -1,5 +1,19 @@
 {
     "translations": {
+        "Close mandate details": "Mandaatdetails sluiten",
+        "Close step configuration": "Stapconfiguratie sluiten",
+        "Close transition configuration": "Overgangconfiguratie sluiten",
+        "Count": "Aantal",
+        "Delete {name}": "{name} verwijderen",
+        "Delete checklist “{name}”?": "Checklist “{name}” verwijderen?",
+        "Delete complaint category": "Klachtcategorie verwijderen",
+        "Edit {name}": "{name} bewerken",
+        "Remove action": "Actie verwijderen",
+        "Remove checklist item": "Checklistitem verwijderen",
+        "Remove guard": "Voorwaarde verwijderen",
+        "Remove participant": "Deelnemer verwijderen",
+        "Remove required field": "Verplicht veld verwijderen",
+        "The category could not be deleted. Please try again.": "De categorie kon niet worden verwijderd. Probeer het opnieuw.",
         "\"{doc}\" is {class} but has no weigeringsgrond selected.": "\"{doc}\" is {class} maar heeft geen weigeringsgrond geselecteerd.",
         "#": "#",
         "%n document selected": "%n document geselecteerd",

lib/Settings/procest_register.json

@@ -171,12 +171,11 @@
                         "type": "array",
                         "title": "Products or Services",
                         "description": "Products/services (fees) that apply to this case type. References product objects in the Pipelinq product register (ADR-003); the charge on a concrete case is a Pipelinq financial transaction.",
+                        "x-external-register": "pipelinq",
                         "items": {
                             "type": "string",
-                            "format": "uuid",
-                            "$ref": "product"
-                        },
-                        "x-external-register": "pipelinq"
+                            "format": "uuid"
+                        }
                     },
                     "selectionListProcessType": {
                         "type": "string",
@@ -1287,11 +1286,10 @@
                     "vergunningaanvraagRef": {
                         "type": "string",
                         "format": "uuid",
-                        "$ref": "vergunningaanvraag",
+                        "x-external-register": "dso",
                         "description": "Reference to the DSO vergunningaanvraag object in OpenRegister",
                         "visible": false,
-                        "title": "Permit Application Reference",
-                        "x-external-register": "dso"
+                        "title": "Permit Application Reference"
                     },
                     "procedureType": {
                         "type": "string",
@@ -1385,8 +1383,7 @@
                         "items": {
                             "type": "string",
                             "format": "uuid",
-                            "$ref": "decision",
-                            "x-external-register": "decidesk"
+                            "$ref": "decision"
                         },
                         "referenceType": "decision",
                         "x-allow-create": true

src/components/map/AddressSearch.vue

@@ -15,7 +15,11 @@
 				v-for="result in results"
 				:key="result.id"
 				class="address-search__item"
-				@click="selectResult(result)">
+				role="button"
+				tabindex="0"
+				@click="selectResult(result)"
+				@keydown.enter="selectResult(result)"
+				@keydown.space.prevent="selectResult(result)">
 				<span class="address-search__icon">
 					{{ getTypeIcon(result.type) }}
 				</span>
@@ -51,7 +55,7 @@
 	},
 	methods: {
 		/**
 		 * @param value
 		 * @spec openspec/changes/retrofit-2026-05-25-map-component/tasks.md
 		 */
 		async onInput(value) {
@@ -84,7 +88,7 @@
 		},
 
 		/**
 		 * @param result
 		 * @spec openspec/changes/retrofit-2026-05-25-map-component/tasks.md
 		 */
 		async selectResult(result) {
@@ -121,7 +125,7 @@
 		},
 
 		/**
 		 * @param type
 		 * @spec openspec/changes/retrofit-2026-05-25-map-component/tasks.md
 		 */
 		getTypeIcon(type) {

src/components/map/LocationPicker.vue

@@ -1,5 +1,10 @@
 <template>
-	<div class="location-picker-overlay" @click.self="$emit('cancel')">
+	<div class="location-picker-overlay"
+		role="button"
+		tabindex="0"
+		@click.self="$emit('cancel')"
+		@keydown.enter.self="$emit('cancel')"
+		@keydown.space.self.prevent="$emit('cancel')">
 		<div class="location-picker">
 			<div class="location-picker__header">
 				<h3>{{ t('procest', 'Select location') }}</h3>
@@ -145,7 +150,7 @@
 		},
 
 		/**
 		 * @param mode
 		 * @spec openspec/changes/retrofit-2026-05-25-map-component/tasks.md
 		 */
 		setMode(mode) {

src/components/tabs/CaseDecisionsTab.vue

@@ -33,7 +33,11 @@
 				v-for="decision in decisions"
 				:key="decision.id"
 				class="case-tab__item"
-				@click="openEdit(decision)">
+				role="button"
+				tabindex="0"
+				@click="openEdit(decision)"
+				@keydown.enter="openEdit(decision)"
+				@keydown.space.prevent="openEdit(decision)">
 				<div class="case-tab__row">
 					<strong class="case-tab__item-title">{{ decision.title || '—' }}</strong>
 					<NcActions :inline="0" @click.stop>

src/components/tabs/CaseDocumentsTab.vue

@@ -33,7 +33,11 @@
 				v-for="doc in documents"
 				:key="doc.id"
 				class="case-tab__item"
-				@click="openEdit(doc)">
+				role="button"
+				tabindex="0"
+				@click="openEdit(doc)"
+				@keydown.enter="openEdit(doc)"
+				@keydown.space.prevent="openEdit(doc)">
 				<div class="case-tab__row">
 					<strong class="case-tab__item-title">{{ doc.title || '—' }}</strong>
 					<NcActions :inline="0" @click.stop>

src/components/tabs/CaseTasksTab.vue

@@ -35,7 +35,11 @@
 				:key="task.id"
 				class="case-tab__item"
 				:class="{ 'case-tab__item--overdue': isOverdue(task) }"
-				@click="openTask(task)">
+				role="button"
+				tabindex="0"
+				@click="openTask(task)"
+				@keydown.enter="openTask(task)"
+				@keydown.space.prevent="openTask(task)">
 				<div class="case-tab__row">
 					<strong class="case-tab__item-title">{{ task.title || '—' }}</strong>
 					<CnStatusBadge :status="statusLabel(task.status)" :type="statusBadgeType(task.status)" />

src/dialogs/RedactionAssistDialog.vue

@@ -56,9 +56,9 @@
 					<thead>
 						<tr>
 							<th />
-							<th>{{ t('procest', 'Category') }}</th>
-							<th>{{ t('procest', 'Source') }}</th>
-							<th>{{ t('procest', 'Preview') }}</th>
+							<th scope="col">{{ t('procest', 'Category') }}</th>
+							<th scope="col">{{ t('procest', 'Source') }}</th>
+							<th scope="col">{{ t('procest', 'Preview') }}</th>
 						</tr>
 					</thead>
 					<tbody>

src/manifest.json

@@ -1766,6 +1766,12 @@
 							"label": "Email",
 							"icon": "EmailOutline",
 							"component": "CaseEmailTab"
+						},
+						{
+							"id": "besluitvorming",
+							"label": "Besluitvorming",
+							"icon": "Gavel",
+							"component": "BesluitvormingLeafTab"
 						}
 					]
 				}
@@ -3058,7 +3064,7 @@
 						"id": "ai-audit-data",
 						"type": "data",
 						"title": "AI audit entry",
-						"icon": "RobotOutline",
+						"icon": "ShieldCheckOutline",
 						"content": {
 							"columns": 2
 						}

src/modals/BulkReassignModal.vue

@@ -59,11 +59,11 @@
 				<table v-else class="bulk-reassign__table">
 					<thead>
 						<tr>
-							<th>{{ t('procest', 'Type') }}</th>
-							<th>{{ t('procest', 'Title') }}</th>
-							<th>{{ t('procest', 'Case type') }}</th>
-							<th>{{ t('procest', 'Status') }}</th>
-							<th>{{ t('procest', 'Next deadline') }}</th>
+							<th scope="col">{{ t('procest', 'Type') }}</th>
+							<th scope="col">{{ t('procest', 'Title') }}</th>
+							<th scope="col">{{ t('procest', 'Case type') }}</th>
+							<th scope="col">{{ t('procest', 'Status') }}</th>
+							<th scope="col">{{ t('procest', 'Next deadline') }}</th>
 						</tr>
 					</thead>
 					<tbody>

src/views/admin/SubstitutionAdmin.vue

@@ -47,11 +47,11 @@
 		<table v-else class="substitution-admin__table">
 			<thead>
 				<tr>
-					<th>{{ t('procest', 'Absentee') }}</th>
-					<th>{{ t('procest', 'Substitute') }}</th>
-					<th>{{ t('procest', 'Period') }}</th>
-					<th>{{ t('procest', 'Scope') }}</th>
-					<th>{{ t('procest', 'Status') }}</th>
+					<th scope="col">{{ t('procest', 'Absentee') }}</th>
+					<th scope="col">{{ t('procest', 'Substitute') }}</th>
+					<th scope="col">{{ t('procest', 'Period') }}</th>
+					<th scope="col">{{ t('procest', 'Scope') }}</th>
+					<th scope="col">{{ t('procest', 'Status') }}</th>
 					<th />
 				</tr>
 			</thead>

src/views/admin/VerwerkingenOverview.vue

@@ -48,10 +48,10 @@
 			<table v-else class="verwerkingen-overview__table">
 				<thead>
 					<tr>
-						<th>{{ t('procest', 'Code') }}</th>
-						<th>{{ t('procest', 'Activity') }}</th>
-						<th>{{ t('procest', 'Legal basis') }}</th>
-						<th>{{ t('procest', 'Review status') }}</th>
+						<th scope="col">{{ t('procest', 'Code') }}</th>
+						<th scope="col">{{ t('procest', 'Activity') }}</th>
+						<th scope="col">{{ t('procest', 'Legal basis') }}</th>
+						<th scope="col">{{ t('procest', 'Review status') }}</th>
 					</tr>
 				</thead>
 				<tbody>

src/views/cases/DeelzaakList.vue

@@ -82,12 +82,12 @@
 			<table class="viewTable">
 				<thead>
 					<tr>
-						<th>{{ t('procest', 'Identifier') }}</th>
-						<th>{{ t('procest', 'Title') }}</th>
-						<th>{{ t('procest', 'Status') }}</th>
-						<th>{{ t('procest', 'Assignee') }}</th>
-						<th>{{ t('procest', 'Deadline') }}</th>
-						<th>{{ t('procest', 'Completed') }}</th>
+						<th scope="col">{{ t('procest', 'Identifier') }}</th>
+						<th scope="col">{{ t('procest', 'Title') }}</th>
+						<th scope="col">{{ t('procest', 'Status') }}</th>
+						<th scope="col">{{ t('procest', 'Assignee') }}</th>
+						<th scope="col">{{ t('procest', 'Deadline') }}</th>
+						<th scope="col">{{ t('procest', 'Completed') }}</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -124,6 +124,16 @@
 			:sub-case-count="totalCount"
 			@deleted="onParentDeleted"
 			@close="showDeleteWarning = false" />
+
+		<CnConfirmDialog
+			v-if="showDeleteConfirm"
+			ref="deleteConfirmDialog"
+			:dialog-title="t('procest', 'Delete case')"
+			:message="t('procest', 'Are you sure you want to delete this case?')"
+			variant="error"
+			:confirm-label="t('procest', 'Delete')"
+			@confirm="onConfirmDeleteParent"
+			@close="showDeleteConfirm = false" />
 	</div>
 </template>
 
@@ -133,6 +143,7 @@ import {
 	NcEmptyContent,
 	NcLoadingIcon,
 } from '@nextcloud/vue'
+import { CnConfirmDialog } from '@conduction/nextcloud-vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import FolderMultipleOutline from 'vue-material-design-icons/FolderMultipleOutline.vue'
@@ -158,6 +169,7 @@ export default {
 		Plus,
 		DeelzaakCreateModal,
 		DeelzaakDeleteWarningModal,
+		CnConfirmDialog,
 	},
 	props: {
 		/** Optional override for the parent case UUID (otherwise read from $route.params.id). */
@@ -174,6 +186,7 @@ export default {
 			loading: true,
 			showCreate: false,
 			showDeleteWarning: false,
+			showDeleteConfirm: false,
 		}
 	},
 	computed: {
@@ -334,19 +347,29 @@ export default {
 		 *
 		 * @spec openspec/changes/deelzaak-support/tasks.md#T11
 		 */
-		async onDeleteParent() {
+		onDeleteParent() {
 			if (requiresOrphanWarning(this.totalCount)) {
 				this.showDeleteWarning = true
 				return
 			}
-			if (!window.confirm(t('procest', 'Are you sure you want to delete this case?'))) {
-				return
-			}
+			this.showDeleteConfirm = true
+		},
+		/**
+		 * Confirm-handler for the CnConfirmDialog opened by onDeleteParent().
+		 * Runs the actual delete and reports the outcome back to the dialog.
+		 *
+		 * @spec openspec/changes/deelzaak-support/tasks.md#T11
+		 */
+		async onConfirmDeleteParent() {
 			try {
 				await this.objectStore.deleteObject('case', this.parentCaseId)
+				this.showDeleteConfirm = false
 				this.onParentDeleted(this.parentCaseId)
 			} catch (err) {
 				console.error('[DeelzaakList] parent delete failed', err)
+				this.$refs.deleteConfirmDialog.setResult({
+					error: t('procest', 'The case could not be deleted. Please try again.'),
+				})
 			}
 		},
 		/**
@@ -461,4 +484,10 @@ export default {
 	background: var(--color-success);
 	color: white;
 }
+
+@media (prefers-reduced-motion: reduce) {
+	.viewTableRow {
+		transition: none;
+	}
+}
 </style>

src/views/cases/components/AddParticipantDialog.vue

@@ -1,13 +1,18 @@
 <template>
-	<div class="add-participant-overlay" @click.self="$emit('close')">
+	<div class="add-participant-overlay"
+		role="button"
+		tabindex="0"
+		@click.self="$emit('close')"
+		@keydown.enter.self="$emit('close')"
+		@keydown.space.self.prevent="$emit('close')">
 		<div class="add-participant-dialog">
 			<h3>{{ t('procest', 'Add Participant') }}</h3>
 
 			<div class="form-group">
 				<label>{{ t('procest', 'Role type') }} *</label>
 				<NcSelect
 					v-model="selectedRoleType"
-					:options="roleTypes"
+					:options="roleTypes"
 					:aria-label-combobox="t('procest', 'Role type')"
 					label="name"
 					track-by="id"
@@ -18,7 +23,7 @@
 				<label>{{ t('procest', 'Participant') }} *</label>
 				<NcSelect
 					v-model="selectedUser"
-					:options="userOptions"
+					:options="userOptions"
 					:aria-label-combobox="t('procest', 'Participant')"
 					label="label"
 					track-by="id"

src/views/cases/components/AdvicePanel.vue

@@ -57,7 +57,13 @@
 		</div>
 
 		<!-- Advice request dialog -->
-		<div v-if="showRequestDialog" class="advice-panel__dialog-overlay" @click.self="showRequestDialog = false">
+		<div v-if="showRequestDialog"
+			class="advice-panel__dialog-overlay"
+			role="button"
+			tabindex="0"
+			@click.self="showRequestDialog = false"
+			@keydown.enter.self="showRequestDialog = false"
+			@keydown.space.self.prevent="showRequestDialog = false">
 			<div class="advice-panel__dialog">
 				<h4>{{ t('procest', 'Request Advice') }}</h4>
 

src/views/cases/components/AiExtractDialog.vue

@@ -17,14 +17,14 @@
 				<table class="ai-extract-dialog__table">
 					<thead>
 						<tr>
-							<th>
+							<th scope="col">
 								<NcCheckboxRadioSwitch
 									:model-value="allSelected"
 									@update:model-value="toggleAll" />
 							</th>
-							<th>{{ t('procest', 'Field') }}</th>
-							<th>{{ t('procest', 'Extracted value') }}</th>
-							<th>{{ t('procest', 'Confidence') }}</th>
+							<th scope="col">{{ t('procest', 'Field') }}</th>
+							<th scope="col">{{ t('procest', 'Extracted value') }}</th>
+							<th scope="col">{{ t('procest', 'Confidence') }}</th>
 						</tr>
 					</thead>
 					<tbody>