fix(visualization): fix Sonar issues and restore screenshot label borders

Use native <input type="radio"> instead of <button role="radio"> for
accessibility. Mark labelSettingsFacade as readonly. Replace box-shadow
with a solid border during screenshot capture so labels render correctly
in html2canvas.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

visualization/app/codeCharta/features/labelSettings/components/labelSettingsPanel/labelSettingsPanel.component.html

@@ -10,21 +10,17 @@
     </div>
 </div>
 
-<div class="join w-full" role="radiogroup" aria-label="Label mode">
-    <button
-        class="btn btn-sm join-item flex-1"
-        [class.btn-primary]="labelMode() === LabelMode.Height"
-        [attr.aria-checked]="labelMode() === LabelMode.Height"
-        role="radio"
-        (click)="setLabelMode(LabelMode.Height)"
-    >Height</button>
-    <button
-        class="btn btn-sm join-item flex-1"
-        [class.btn-primary]="labelMode() === LabelMode.Color"
-        [attr.aria-checked]="labelMode() === LabelMode.Color"
-        role="radio"
-        (click)="setLabelMode(LabelMode.Color)"
-    >Color</button>
+<div class="join w-full" aria-label="Label mode">
+    <input type="radio" name="labelMode"
+        class="join-item btn btn-sm flex-1"
+        aria-label="Height"
+        [checked]="labelMode() === LabelMode.Height"
+        (change)="setLabelMode(LabelMode.Height)" />
+    <input type="radio" name="labelMode"
+        class="join-item btn btn-sm flex-1"
+        aria-label="Color"
+        [checked]="labelMode() === LabelMode.Color"
+        (change)="setLabelMode(LabelMode.Color)" />
 </div>
 
 <label class="flex items-center gap-2 cursor-pointer">

visualization/app/codeCharta/features/labelSettings/components/labelSettingsPanel/labelSettingsPanel.component.spec.ts

@@ -63,8 +63,8 @@ describe("LabelSettingsPanelComponent", () => {
         await render(LabelSettingsPanelComponent)
 
         // Assert
-        expect(screen.getByText("Height")).not.toBe(null)
-        expect(screen.getByText("Color")).not.toBe(null)
+        expect(screen.getByRole("radio", { name: "Height" })).not.toBe(null)
+        expect(screen.getByRole("radio", { name: "Color" })).not.toBe(null)
     })
 
     it("should dispatch setLabelMode when clicking Color button", async () => {
@@ -73,7 +73,7 @@ describe("LabelSettingsPanelComponent", () => {
         const dispatchSpy = jest.spyOn(TestBed.inject(Store), "dispatch")
 
         // Act
-        await userEvent.click(screen.getByText("Color"))
+        await userEvent.click(screen.getByRole("radio", { name: "Color" }))
 
         // Assert
         expect(dispatchSpy).toHaveBeenCalledWith(setLabelMode({ value: LabelMode.Color }))

visualization/app/codeCharta/ui/codeMap/codeMap.render.service.ts

@@ -39,7 +39,7 @@ export class CodeMapRenderService implements OnDestroy {
         private readonly store: Store<CcState>,
         private readonly state: State<CcState>,
         private threeSceneService: ThreeSceneService,
-        private labelSettingsFacade: LabelSettingsFacade,
+        private readonly labelSettingsFacade: LabelSettingsFacade,
         private codeMapArrowService: CodeMapArrowService,
         private threeStatsService: ThreeStatsService,
         private codeMapMouseEventService: CodeMapMouseEventService

visualization/app/codeCharta/ui/screenshotButton/screenshotButton.component.ts

@@ -160,6 +160,8 @@ export class ScreenshotButtonComponent implements OnInit {
             el.style.backdropFilter = "none"
             el.style.setProperty("-webkit-backdrop-filter", "none")
             el.style.background = "white"
+            el.style.boxShadow = "none"
+            el.style.border = "1px solid rgba(0, 0, 0, 0.3)"
             el.style.transition = "none"
         }
         return saved