Repository: infonl/dimpact-zaakafhandelcomponent
Pull request #3335: chore(dialog): added consistent headers
Author: login: xiduzo
Created: 2025-05-13T11:43:19Z | Merged: 2025-05-13T13:04:00Z

This pull request refactors the dialog headers in multiple components to improve accessibility and visual consistency by replacing `<h1>` elements with `mat-toolbar` components and adding icons and close buttons. Additionally, it includes minor updates to conditional checks for consistency.

### Dialog Header Refactoring:
* Replaced `<h1>` elements with `mat-toolbar` components in `taken-verdelen-dialog`, adding an `assignment_ind` icon, a close button, and a divider for improved accessibility and design. (`src/main/app/src/app/taken/taken-verdelen-dialog/taken-verdelen-dialog.component.html`)
* Updated the `taken-vrijgeven-dialog` to use `mat-toolbar` with a `clear_all` icon, a close button, and a divider for consistency with other dialogs. (`src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.html`)
* Refactored `zaken-verdelen-dialog` to replace `<h1>` elements with `mat-toolbar`, adding an `assignment_ind` icon, a close button, and a divider for a unified look. (`src/main/app/src/app/zaken/zaken-verdelen-dialog/zaken-verdelen-dialog.component.html`)
* Modified `zaken-vrijgeven-dialog` to use `mat-toolbar` with a `clear_all` icon, a close button, and a divider, and updated conditional checks for consistency. (`src/main/app/src/app/zaken/zaken-vrijgeven-dialog/zaken-vrijgeven-dialog.component.html`)

Solves PZ-6542


Diff:
diff --git a/src/main/app/src/app/taken/taken-verdelen-dialog/taken-verdelen-dialog.component.html b/src/main/app/src/app/taken/taken-verdelen-dialog/taken-verdelen-dialog.component.html
index 62b1334728..afec84316b 100644
--- a/src/main/app/src/app/taken/taken-verdelen-dialog/taken-verdelen-dialog.component.html
+++ b/src/main/app/src/app/taken/taken-verdelen-dialog/taken-verdelen-dialog.component.html
@@ -3,12 +3,19 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 *ngIf="data.taken.length === 1" mat-dialog-title>
-  {{ "msg.verdelen.taak" | translate }}
-</h1>
-<h1 *ngIf="data.taken.length !== 1" mat-dialog-title>
-  {{ "msg.verdelen.taken" | translate: { aantal: data.taken.length } }}
-</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>assignment_ind</mat-icon>
+  <span *ngIf="data.taken.length === 1" class="flex-grow-1">
+    {{ "msg.verdelen.taak" | translate }}
+  </span>
+  <span *ngIf="data.taken.length !== 1" class="flex-grow-1">
+    {{ "msg.verdelen.taken" | translate: { aantal: data.taken.length } }}
+  </span>
+  <button mat-icon-button (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-divider></mat-divider>
 
 <div mat-dialog-content>
   <mfb-form-field [field]="medewerkerGroepFormField"></mfb-form-field>
diff --git a/src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.html b/src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.html
index 2edd7f595f..796e2ba038 100644
--- a/src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.html
+++ b/src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.html
@@ -3,7 +3,16 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 mat-dialog-title>{{ "title.taken.vrijgeven" | translate }}</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>clear_all</mat-icon>
+  <span class="flex-grow-1">
+    {{ "title.taken.vrijgeven" | translate }}
+  </span>
+  <button mat-icon-button (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-divider></mat-divider>
 
 <div mat-dialog-content>
   <mfb-form-field [field]="redenFormField"></mfb-form-field>
diff --git a/src/main/app/src/app/zaken/zaken-verdelen-dialog/zaken-verdelen-dialog.component.html b/src/main/app/src/app/zaken/zaken-verdelen-dialog/zaken-verdelen-dialog.component.html
index 49cb239fbf..661fea51b5 100644
--- a/src/main/app/src/app/zaken/zaken-verdelen-dialog/zaken-verdelen-dialog.component.html
+++ b/src/main/app/src/app/zaken/zaken-verdelen-dialog/zaken-verdelen-dialog.component.html
@@ -3,12 +3,19 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 *ngIf="data.length == 1" mat-dialog-title>
-  {{ "title.zaak.verdelen" | translate }}
-</h1>
-<h1 *ngIf="data.length != 1" mat-dialog-title>
-  {{ "title.zaken.verdelen" | translate: { aantal: data.length } }}
-</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>assignment_ind</mat-icon>
+  <span *ngIf="data.length === 1" class="flex-grow-1">
+    {{ "title.zaak.verdelen" | translate }}
+  </span>
+  <span *ngIf="data.length !== 1" class="flex-grow-1">
+    {{ "title.zaken.verdelen" | translate: { aantal: data.length } }}
+  </span>
+  <button mat-icon-button (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-divider></mat-divider>
 
 <div mat-dialog-content>
   <mfb-form-field [field]="medewerkerGroepFormField"></mfb-form-field>
diff --git a/src/main/app/src/app/zaken/zaken-vrijgeven-dialog/zaken-vrijgeven-dialog.component.html b/src/main/app/src/app/zaken/zaken-vrijgeven-dialog/zaken-vrijgeven-dialog.component.html
index 6aee4a681c..9b2c291cd4 100644
--- a/src/main/app/src/app/zaken/zaken-vrijgeven-dialog/zaken-vrijgeven-dialog.component.html
+++ b/src/main/app/src/app/zaken/zaken-vrijgeven-dialog/zaken-vrijgeven-dialog.component.html
@@ -3,17 +3,24 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 *ngIf="data.length == 1" mat-dialog-title>
-  {{ "title.zaak.vrijgeven" | translate }}
-</h1>
-<h1 *ngIf="data.length != 1" mat-dialog-title>
-  {{ "title.zaken.vrijgeven" | translate: { aantal: data.length } }}
-</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>clear_all</mat-icon>
+  <span *ngIf="data.length === 1" class="flex-grow-1">
+    {{ "title.zaak.vrijgeven" | translate }}
+  </span>
+  <span *ngIf="data.length !== 1" class="flex-grow-1">
+    {{ "title.zaken.vrijgeven" | translate: { aantal: data.length } }}
+  </span>
+  <button mat-icon-button (click)="close()">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-divider></mat-divider>
 
 <div mat-dialog-content>
   <mfb-form-field [field]="redenFormField"></mfb-form-field>
-  <p *ngIf="data.length == 1">{{ "msg.vrijgeven.zaak" | translate }}</p>
-  <p *ngIf="data.length != 1">{{ "msg.vrijgeven.zaken" | translate }}</p>
+  <p *ngIf="data.length === 1">{{ "msg.vrijgeven.zaak" | translate }}</p>
+  <p *ngIf="data.length !== 1">{{ "msg.vrijgeven.zaken" | translate }}</p>
 </div>
 <div mat-dialog-actions>
   <button


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This pull request refactors the dialog headers across multiple components to achieve consistent styling and improved accessibility by replacing <h1> elements with <mat-toolbar> components and adding icons, close buttons, and dividers.  
- Replaces <h1> elements with <mat-toolbar> in four dialog components  
- Adds appropriate icons, conditional title spans, close buttons, and dividers for visual consistency  
- Updates conditional checks to use strict equality for better reliability

### Reviewed Changes

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

| File | Description |
| ---- | ----------- |
| src/main/app/src/app/zaken/zaken-vrijgeven-dialog/zaken-vrijgeven-dialog.component.html | Refactored header with conditional title and close button using mat-toolbar |
| src/main/app/src/app/zaken/zaken-verdelen-dialog/zaken-verdelen-dialog.component.html | Updated header structure, replaced <h1> with mat-toolbar, added icon and close button |
| src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.html | Modified dialog header to use mat-toolbar with clear_all icon and added close button |
| src/main/app/src/app/taken/taken-verdelen-dialog/taken-verdelen-dialog.component.html | Replaced <h1> with mat-toolbar and added icon, conditional title, and close button |




state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T11:44:35Z
user: login: DaxRiool
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T12:54:29Z

Review comments:
diff_hunk: @@ -3,17 +3,24 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 *ngIf="data.length == 1" mat-dialog-title>
-  {{ "title.zaak.vrijgeven" | translate }}
-</h1>
-<h1 *ngIf="data.length != 1" mat-dialog-title>
-  {{ "title.zaken.vrijgeven" | translate: { aantal: data.length } }}
-</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>clear_all</mat-icon>
+  <span *ngIf="data.length === 1" class="flex-grow-1">
+    {{ "title.zaak.vrijgeven" | translate }}
+  </span>
+  <span *ngIf="data.length !== 1" class="flex-grow-1">
+    {{ "title.zaken.vrijgeven" | translate: { aantal: data.length } }}
+  </span>
+  <button mat-icon-button (click)="close()">
path: src/main/app/src/app/zaken/zaken-vrijgeven-dialog/zaken-vrijgeven-dialog.component.html
user: login: Copilot
body: Consider adding an aria-label attribute (e.g., aria-label="Close dialog") to the close button to further enhance accessibility.
```suggestion
  <button mat-icon-button (click)="close()" aria-label="Close dialog">
```
created_at: 2025-05-13T11:44:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -3,12 +3,19 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 *ngIf="data.length == 1" mat-dialog-title>
-  {{ "title.zaak.verdelen" | translate }}
-</h1>
-<h1 *ngIf="data.length != 1" mat-dialog-title>
-  {{ "title.zaken.verdelen" | translate: { aantal: data.length } }}
-</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>assignment_ind</mat-icon>
+  <span *ngIf="data.length === 1" class="flex-grow-1">
+    {{ "title.zaak.verdelen" | translate }}
+  </span>
+  <span *ngIf="data.length !== 1" class="flex-grow-1">
+    {{ "title.zaken.verdelen" | translate: { aantal: data.length } }}
+  </span>
+  <button mat-icon-button (click)="close()">
path: src/main/app/src/app/zaken/zaken-verdelen-dialog/zaken-verdelen-dialog.component.html
user: login: Copilot
body: Consider adding an aria-label attribute (e.g., aria-label="Close dialog") to the close button for improved screen reader support.
```suggestion
  <button mat-icon-button (click)="close()" aria-label="Close dialog">
```
created_at: 2025-05-13T11:44:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -3,7 +3,16 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 mat-dialog-title>{{ "title.taken.vrijgeven" | translate }}</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>clear_all</mat-icon>
+  <span class="flex-grow-1">
+    {{ "title.taken.vrijgeven" | translate }}
+  </span>
+  <button mat-icon-button (click)="close()">
path: src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.html
user: login: Copilot
body: Consider adding an aria-label attribute (e.g., aria-label="Close dialog") to the close button for better accessibility.
```suggestion
  <button mat-icon-button (click)="close()" aria-label="Close dialog">
```
created_at: 2025-05-13T11:44:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -3,12 +3,19 @@
   ~ SPDX-License-Identifier: EUPL-1.2+
   -->
 
-<h1 *ngIf="data.taken.length === 1" mat-dialog-title>
-  {{ "msg.verdelen.taak" | translate }}
-</h1>
-<h1 *ngIf="data.taken.length !== 1" mat-dialog-title>
-  {{ "msg.verdelen.taken" | translate: { aantal: data.taken.length } }}
-</h1>
+<mat-toolbar role="heading" class="gap-16" mat-dialog-title>
+  <mat-icon>assignment_ind</mat-icon>
+  <span *ngIf="data.taken.length === 1" class="flex-grow-1">
+    {{ "msg.verdelen.taak" | translate }}
+  </span>
+  <span *ngIf="data.taken.length !== 1" class="flex-grow-1">
+    {{ "msg.verdelen.taken" | translate: { aantal: data.taken.length } }}
+  </span>
+  <button mat-icon-button (click)="close()">
path: src/main/app/src/app/taken/taken-verdelen-dialog/taken-verdelen-dialog.component.html
user: login: Copilot
body: Consider adding an aria-label attribute (e.g., aria-label="Close dialog") to the close button to enhance accessibility for users of assistive technologies.
```suggestion
  <button mat-icon-button (click)="close()" aria-label="Close dialog">
```
created_at: 2025-05-13T11:44:34Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-13T11:51:14Z
body: ## unit-test-results
 97 files  ±0  141 suites  ±0   2m 0s ⏱️ +4s
581 tests ±0  581 ✅ ±0  0 💤 ±0  0 ❌ ±0 
731 runs  ±0  731 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit ad31b5a3. ± Comparison against base commit 6f193b04.

[test-results]:data:application/gzip;base64,H4sIAPE5I2gC/12Myw7CIBQFf6Vh7cLLo6X+TIMXmhDbYnisGv9dIK2iy5mTMzuZ7WICuXXjcOlISDZWAg4ZdfIqWrcVQa9Z5DGWWUg4aQoJ8V897DOrz2OalV1+hPHe+cP4tJXmwOCAM9mab7FyE6zc9tCtq40ZiNIM7kKxHozWErRBwRU1FPtZ0JFJTTkyiYq83h8+nCwIAQAA

:recycle: This comment has been updated with latest results.
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-13T11:55:39Z
body: ## integration-test-results
 36 files  ±0   36 suites  ±0   42s ⏱️ -1s
130 tests ±0  130 ✅ ±0  0 💤 ±0  0 ❌ ±0 
148 runs  ±0  148 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit ad31b5a3. ± Comparison against base commit 6f193b04.

[test-results]:data:application/gzip;base64,H4sIANM6I2gC/13MSw7CIBSF4a00jB3IowTdjLleILmxLYbHyLh3kVRBh99/kvNgnhaX2HmS+jCxVCh32RIhU9iqlaiuU36PXB4/uqSC+J9udK+pBw+0/AQXY4h7iWVrn8rs+F4OpT82D4fN4x+GdaVcwcBKfp1Bau6sNdw6nBUIJ1D7WZyksUKhNAjs+QL6RrUbBgEAAA==

:recycle: This comment has been updated with latest results.
author_association: CONTRIBUTOR
user: login: codecov[bot]
created_at: 2025-05-13T11:56:04Z
body: ## [Codecov](https://app.codecov.io/gh/infonl/dimpact-zaakafhandelcomponent/pull/3335?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 41.20%. Comparing base [(`6f193b0`)](https://app.codecov.io/gh/infonl/dimpact-zaakafhandelcomponent/commit/6f193b041b37d8eb588a2008ea1beee66a574140?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl) to head [(`ad31b5a`)](https://app.codecov.io/gh/infonl/dimpact-zaakafhandelcomponent/commit/ad31b5a361edd81dec54a2e2c6f52938d24c38ca?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl).
> Report is 2 commits behind head on main.

:white_check_mark: All tests successful. No failed tests found.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##               main    #3335    +/-   ##
==========================================
  Coverage     41.20%   41.20%            
  Complexity     3755     3755            
==========================================
  Files          1395     1395            
  Lines         36134    36134            
  Branches       3950     3950            
==========================================
  Hits          14890    14890            
+ Misses        20398    20020   -378     
- Partials        846     1224   +378     
```

| [Flag](https://app.codecov.io/gh/infonl/dimpact-zaakafhandelcomponent/pull/3335/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl) | Coverage Δ | |
|---|---|---|
| [integrationtests](https://app.codecov.io/gh/infonl/dimpact-zaakafhandelcomponent/pull/3335/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl) | `44.86% <ø> (ø)` | |
| [unittests](https://app.codecov.io/gh/infonl/dimpact-zaakafhandelcomponent/pull/3335/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl) | `28.91% <ø> (ø)` | |

Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl#carryforward-flags-in-the-pull-request-comment) to find out more.

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/infonl/dimpact-zaakafhandelcomponent/pull/3335?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=infonl).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE