From 1bb3b2e660faa5be4ed021e12300803a06d7d3dc Mon Sep 17 00:00:00 2001
From: Esteban Galvis <egalvis@shokworks.io>
Date: Fri, 17 Oct 2025 11:02:11 -0500
Subject: [PATCH 1/4] feat: Enhance accessibility by adding ARIA roles and
 attributes to interactive elements

---
 .../components/cleanup-confirm-dialog.tsx     |  2 +-
 .../components/cleanup-size-indicator.tsx     |  2 +-
 .../components/section-detail-header.tsx      |  6 +++-
 .../components/section-detail-menu.tsx        | 28 +++++++++----------
 .../cleaner/components/section-item.tsx       |  2 ++
 5 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx b/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx
index f8f15c4..e2f763a 100644
--- a/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx
+++ b/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx
@@ -18,7 +18,7 @@ export function CleanupConfirmDialog({ isVisible, onConfirm, onCancel, useTransl
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
-      <div className="bg-opacity-50 absolute inset-0 bg-black backdrop-blur-sm" onClick={onCancel} />
+      <div className="bg-opacity-50 absolute inset-0 bg-black backdrop-blur-sm" onClick={onCancel} aria-hidden="true" role="button" />
 
       {/* Dialog */}
       <div className="bg-surface relative mx-4 w-full max-w-md rounded-lg p-6 shadow-xl dark:bg-gray-800">
diff --git a/src/frontend/features/cleaner/components/cleanup-size-indicator.tsx b/src/frontend/features/cleaner/components/cleanup-size-indicator.tsx
index 9ac7e65..d3b8f12 100644
--- a/src/frontend/features/cleaner/components/cleanup-size-indicator.tsx
+++ b/src/frontend/features/cleaner/components/cleanup-size-indicator.tsx
@@ -41,7 +41,7 @@ export function CleanupSizeIndicator({ selectedSize, totalSize, segmentDetails,
 
                     acc.elements.push(
                       <path
-                        key={index}
+                        key={`segment-${index}`}
                         d="M 20 100 A 80 80 0 0 1 180 100"
                         fill="none"
                         stroke={segment.color}
diff --git a/src/frontend/features/cleaner/components/section-detail-header.tsx b/src/frontend/features/cleaner/components/section-detail-header.tsx
index 2dfa37c..6f3126d 100644
--- a/src/frontend/features/cleaner/components/section-detail-header.tsx
+++ b/src/frontend/features/cleaner/components/section-detail-header.tsx
@@ -31,7 +31,11 @@ export function SectionDetailHeader({
   return (
     <div className="dark:bg-gray-5 flex items-center justify-between p-4">
       <div className="flex items-center gap-3">
-        <div className="flex items-center gap-1 text-blue-600 hover:cursor-pointer dark:text-blue-400" onClick={onClose}>
+        <div
+          className="flex items-center gap-1 text-blue-600 hover:cursor-pointer dark:text-blue-400"
+          onClick={onClose}
+          role="button"
+          aria-hidden="true">
           <CaretDoubleRight color="#0066ff" weight="bold" />
         </div>
         <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{sectionConfig[sectionName].name}</h3>
diff --git a/src/frontend/features/cleaner/components/section-detail-menu.tsx b/src/frontend/features/cleaner/components/section-detail-menu.tsx
index 0b37385..28c37e3 100644
--- a/src/frontend/features/cleaner/components/section-detail-menu.tsx
+++ b/src/frontend/features/cleaner/components/section-detail-menu.tsx
@@ -32,11 +32,21 @@ export function SectionDetailMenu({
   onToggleItem,
   useTranslationContext,
 }: Readonly<Props>) {
-  if (!sectionName) return null;
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const sectionData = sectionName ? report[sectionName] : null;
+  const sectionViewModel = sectionName ? viewModel[sectionName] : null;
+  const items = sectionData?.items || [];
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 80,
+    overscan: 10,
+  });
 
-  const sectionData = report[sectionName];
-  const sectionViewModel = viewModel[sectionName];
-  if (!sectionViewModel) return null;
+  if (!sectionName) return null;
+  if (!sectionViewModel || !sectionData) return null;
 
   const stats = getSectionStats({ viewModel: sectionViewModel, allItems: sectionData.items });
 
@@ -50,16 +60,6 @@ export function SectionDetailMenu({
     }
   }
 
-  const parentRef = useRef<HTMLDivElement>(null);
-  const items = sectionData.items;
-
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 80,
-    overscan: 10,
-  });
-
   return (
     <div
       className={
diff --git a/src/frontend/features/cleaner/components/section-item.tsx b/src/frontend/features/cleaner/components/section-item.tsx
index 89caf85..315a676 100644
--- a/src/frontend/features/cleaner/components/section-item.tsx
+++ b/src/frontend/features/cleaner/components/section-item.tsx
@@ -53,6 +53,8 @@ export function SectionItem({
 
         <div
           className="flex flex-1 items-end justify-end"
+          aria-hidden="true"
+          role="button"
           onClick={(e) => {
             e.stopPropagation();
             onToggleSectionExpansion(sectionName);

From 8eadac5b6ca5f5baa672fdfe5396dbc17567700e Mon Sep 17 00:00:00 2001
From: Esteban Galvis <egalvis@shokworks.io>
Date: Fri, 17 Oct 2025 11:20:00 -0500
Subject: [PATCH 2/4] refactor: Remove redundant role attributes from
 interactive elements

---
 .../features/cleaner/components/cleanup-confirm-dialog.tsx      | 2 +-
 .../features/cleaner/components/section-detail-header.tsx       | 1 -
 src/frontend/features/cleaner/components/section-item.tsx       | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx b/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx
index e2f763a..5e13a3f 100644
--- a/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx
+++ b/src/frontend/features/cleaner/components/cleanup-confirm-dialog.tsx
@@ -18,7 +18,7 @@ export function CleanupConfirmDialog({ isVisible, onConfirm, onCancel, useTransl
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
-      <div className="bg-opacity-50 absolute inset-0 bg-black backdrop-blur-sm" onClick={onCancel} aria-hidden="true" role="button" />
+      <div className="bg-opacity-50 absolute inset-0 bg-black backdrop-blur-sm" onClick={onCancel} aria-hidden="true" />
 
       {/* Dialog */}
       <div className="bg-surface relative mx-4 w-full max-w-md rounded-lg p-6 shadow-xl dark:bg-gray-800">
diff --git a/src/frontend/features/cleaner/components/section-detail-header.tsx b/src/frontend/features/cleaner/components/section-detail-header.tsx
index 6f3126d..a990054 100644
--- a/src/frontend/features/cleaner/components/section-detail-header.tsx
+++ b/src/frontend/features/cleaner/components/section-detail-header.tsx
@@ -34,7 +34,6 @@ export function SectionDetailHeader({
         <div
           className="flex items-center gap-1 text-blue-600 hover:cursor-pointer dark:text-blue-400"
           onClick={onClose}
-          role="button"
           aria-hidden="true">
           <CaretDoubleRight color="#0066ff" weight="bold" />
         </div>
diff --git a/src/frontend/features/cleaner/components/section-item.tsx b/src/frontend/features/cleaner/components/section-item.tsx
index 315a676..cc58f03 100644
--- a/src/frontend/features/cleaner/components/section-item.tsx
+++ b/src/frontend/features/cleaner/components/section-item.tsx
@@ -54,7 +54,6 @@ export function SectionItem({
         <div
           className="flex flex-1 items-end justify-end"
           aria-hidden="true"
-          role="button"
           onClick={(e) => {
             e.stopPropagation();
             onToggleSectionExpansion(sectionName);

From 973958c665189339a35e336ab7487dce1c036975 Mon Sep 17 00:00:00 2001
From: Esteban Galvis <egalvis@shokworks.io>
Date: Fri, 17 Oct 2025 13:52:59 -0500
Subject: [PATCH 3/4] fix: Ensure startCleanup returns a promise and update
 cleanup confirmation handling

---
 src/frontend/features/cleaner/cleaner-section.tsx            | 2 +-
 src/frontend/features/cleaner/cleaner.types.ts               | 2 +-
 .../features/cleaner/components/section-detail-header.tsx    | 5 +----
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/frontend/features/cleaner/cleaner-section.tsx b/src/frontend/features/cleaner/cleaner-section.tsx
index d403ab9..8461e4a 100644
--- a/src/frontend/features/cleaner/cleaner-section.tsx
+++ b/src/frontend/features/cleaner/cleaner-section.tsx
@@ -43,7 +43,7 @@ export function CleanerSection({
 
   function confirmCleanup() {
     if (report) {
-      startCleanup(useCleanerViewModelHook.viewModel);
+      void startCleanup(useCleanerViewModelHook.viewModel);
     }
     setShowConfirmDialog(false);
   }
diff --git a/src/frontend/features/cleaner/cleaner.types.ts b/src/frontend/features/cleaner/cleaner.types.ts
index 1e6cf6f..d1f3e35 100644
--- a/src/frontend/features/cleaner/cleaner.types.ts
+++ b/src/frontend/features/cleaner/cleaner.types.ts
@@ -16,7 +16,7 @@ export type CleanerContextType = {
   diskSpace: number;
   sectionKeys: CleanerSectionKey[];
   generateReport: (force?: boolean) => Promise<void>;
-  startCleanup: (viewModel: CleanerViewModel) => void;
+  startCleanup: (viewModel: CleanerViewModel) => Promise<void>;
   stopCleanup: () => void;
   setInitialCleaningState: () => void;
 };
diff --git a/src/frontend/features/cleaner/components/section-detail-header.tsx b/src/frontend/features/cleaner/components/section-detail-header.tsx
index a990054..3bbe7b4 100644
--- a/src/frontend/features/cleaner/components/section-detail-header.tsx
+++ b/src/frontend/features/cleaner/components/section-detail-header.tsx
@@ -31,10 +31,7 @@ export function SectionDetailHeader({
   return (
     <div className="dark:bg-gray-5 flex items-center justify-between p-4">
       <div className="flex items-center gap-3">
-        <div
-          className="flex items-center gap-1 text-blue-600 hover:cursor-pointer dark:text-blue-400"
-          onClick={onClose}
-          aria-hidden="true">
+        <div className="flex items-center gap-1 text-blue-600 hover:cursor-pointer dark:text-blue-400" onClick={onClose} aria-hidden="true">
           <CaretDoubleRight color="#0066ff" weight="bold" />
         </div>
         <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{sectionConfig[sectionName].name}</h3>

From 238a795bdc94dbada4104640375ef72df5c8fd89 Mon Sep 17 00:00:00 2001
From: Esteban Galvis <egalvis@shokworks.io>
Date: Mon, 20 Oct 2025 08:31:34 -0500
Subject: [PATCH 4/4] refactor: Simplify section data retrieval by removing
 unnecessary null checks

---
 .../features/cleaner/components/section-detail-menu.tsx    | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/frontend/features/cleaner/components/section-detail-menu.tsx b/src/frontend/features/cleaner/components/section-detail-menu.tsx
index 28c37e3..3fd1788 100644
--- a/src/frontend/features/cleaner/components/section-detail-menu.tsx
+++ b/src/frontend/features/cleaner/components/section-detail-menu.tsx
@@ -34,8 +34,8 @@ export function SectionDetailMenu({
 }: Readonly<Props>) {
   const parentRef = useRef<HTMLDivElement>(null);
 
-  const sectionData = sectionName ? report[sectionName] : null;
-  const sectionViewModel = sectionName ? viewModel[sectionName] : null;
+  const sectionData = report[sectionName];
+  const sectionViewModel = viewModel[sectionName];
   const items = sectionData?.items || [];
 
   const virtualizer = useVirtualizer({
@@ -45,9 +45,6 @@ export function SectionDetailMenu({
     overscan: 10,
   });
 
-  if (!sectionName) return null;
-  if (!sectionViewModel || !sectionData) return null;
-
   const stats = getSectionStats({ viewModel: sectionViewModel, allItems: sectionData.items });
 
   const isAllSelected = stats.selected === 'all';