fix: address SonarCloud accessibility and code quality issues

- Replace div+role="button" with native <button> elements for color swatches
  (resolves Web:S6819 and supersedes the previous keydown workaround)
- Replace <label> with <p> since it has no associated form control (Web:S6853)
- Add readonly modifier to constructor-injected services (typescript:S2933)
- Reset native button styles in SCSS to preserve visual appearance

Signed-off-by: Jeremy Snidaro <jeremy.snidaro@papernest.com>
Signed-off-by: Jeremy SNIDARO <jeremy.snidaro@papernest.com>

Author: JeremySnidaro

packages/desktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.html

@@ -3,20 +3,17 @@ <h4>{{session.sessionName}}</h4>
 <h5>{{session | detail }}</h5>
 
 <div class="color-form">
-  <label>Select a color</label>
+  <p>Select a color</p>
   <div class="color-swatches">
-    <div
+    <button
       *ngFor="let color of colors"
+      type="button"
       class="color-swatch-wrapper"
-      role="button"
-      tabindex="0"
       [class.selected]="selectedColor === color.name"
-      (click)="selectColor(color.name)"
-      (keydown.enter)="selectColor(color.name)"
-      (keydown.space)="selectColor(color.name)">
+      (click)="selectColor(color.name)">
       <div class="color-swatch" [style.background-color]="color.hex"></div>
       <span class="color-label">{{color.name}}</span>
-    </div>
+    </button>
   </div>
   <br>
   <button type="button" (click)="saveColor();" [disabled]="!selectedColor"

packages/desktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.scss

@@ -1,7 +1,7 @@
 .color-form {
   margin-top: 20px;
 
-  label {
+  p {
     display: block;
     margin-bottom: 12px;
   }
@@ -24,6 +24,9 @@
   align-items: center;
   cursor: pointer;
   gap: 4px;
+  background: none;
+  border: none;
+  padding: 0;
 
   &:hover .color-swatch {
     transform: scale(1.15);

packages/desktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.ts

@@ -28,7 +28,11 @@ export class ChangeColorDialogComponent implements OnInit {
   public colors = containerColors;
   public selectedColor: string;
 
-  constructor(private appService: AppService, private appProviderService: AppProviderService, private messageToasterService: MessageToasterService) {}
+  constructor(
+    private readonly appService: AppService,
+    private readonly appProviderService: AppProviderService,
+    private readonly messageToasterService: MessageToasterService
+  ) {}
 
   ngOnInit(): void {
     this.selectedColor = this.session.color ?? null;