From 2ff5df3d213127654ebf5ff31cc86f97ffd7f29e Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <asb.dev.1001@gmail.com>
Date: Wed, 2 Sep 2026 13:35:06 +0530
Subject: [PATCH] fix: address icon migration review on space

Drop strokeWidth from Propel icons. The generated glyphs paint with
fill="currentColor", so the prop reached the svg and changed nothing;
keeping it implied a control that no longer exists.

Wrap the password and email-clear icon click targets in buttons. These
already carried onClick directly on the icon, but Propel bakes
aria-hidden="true" onto the svg, so the migration also hid them from
assistive tech. The buttons restore an accessible name and put the
controls in the tab order, matching the pattern email.tsx already uses.
---
 .../account/auth-forms/password.tsx           | 51 +++++++++++++------
 .../account/auth-forms/unique-code.tsx        | 11 ++--
 .../filters/applied-filters/filters-list.tsx  |  4 +-
 .../issues/filters/applied-filters/label.tsx  |  2 +-
 .../filters/applied-filters/priority.tsx      |  2 +-
 .../issues/filters/applied-filters/state.tsx  |  2 +-
 .../issues/filters/helpers/filter-option.tsx  |  2 +-
 .../components/issues/filters/selection.tsx   |  4 +-
 .../kanban/headers/sub-group-by-card.tsx      |  6 +--
 .../properties/all-properties.tsx             |  6 +--
 .../issue-layouts/properties/labels.tsx       |  2 +-
 .../comment/comment-detail-card.tsx           |  8 +--
 12 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/apps/space/components/account/auth-forms/password.tsx b/apps/space/components/account/auth-forms/password.tsx
index ba93fd27b5..3b17cdf18f 100644
--- a/apps/space/components/account/auth-forms/password.tsx
+++ b/apps/space/components/account/auth-forms/password.tsx
@@ -137,10 +137,15 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             disabled
           />
           {passwordFormData.email.length > 0 && (
-            <CloseCircleOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Clear email"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={handleEmailClear}
-            />
+              tabIndex={-1}
+            >
+              <CloseCircleOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
       </div>
@@ -163,15 +168,23 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
             autoFocus
           />
           {showPassword?.password ? (
-            <HideOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Hide password"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
-            />
+            >
+              <HideOutline className="h-5 w-5 text-placeholder" />
+            </button>
           ) : (
-            <ShowOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Show password"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={() => handleShowPassword("password")}
-            />
+            >
+              <ShowOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
         {passwordSupport}
@@ -195,15 +208,23 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
               autoComplete="off"
             />
             {showPassword?.retypePassword ? (
-              <HideOutline
-                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+              <button
+                type="button"
+                aria-label="Hide password"
+                className="absolute right-3 hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
-              />
+              >
+                <HideOutline className="h-5 w-5 text-placeholder" />
+              </button>
             ) : (
-              <ShowOutline
-                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+              <button
+                type="button"
+                aria-label="Show password"
+                className="absolute right-3 hover:cursor-pointer"
                 onClick={() => handleShowPassword("retypePassword")}
-              />
+              >
+                <ShowOutline className="h-5 w-5 text-placeholder" />
+              </button>
             )}
           </div>
           {!!passwordFormData.confirm_password &&
diff --git a/apps/space/components/account/auth-forms/unique-code.tsx b/apps/space/components/account/auth-forms/unique-code.tsx
index c990bdae16..61f0587265 100644
--- a/apps/space/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/components/account/auth-forms/unique-code.tsx
@@ -102,10 +102,15 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
-            <CloseCircleOutline
-              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
+            <button
+              type="button"
+              aria-label="Clear email"
+              className="absolute right-3 hover:cursor-pointer"
               onClick={handleEmailClear}
-            />
+              tabIndex={-1}
+            >
+              <CloseCircleOutline className="h-5 w-5 text-placeholder" />
+            </button>
           )}
         </div>
       </div>
diff --git a/apps/space/components/issues/filters/applied-filters/filters-list.tsx b/apps/space/components/issues/filters/applied-filters/filters-list.tsx
index c456f1c43b..701fb4959f 100644
--- a/apps/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/apps/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -59,7 +59,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
                 className="grid place-items-center text-tertiary hover:text-secondary"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
-                <CloseOutline height={12} width={12} strokeWidth={2} />
+                <CloseOutline height={12} width={12} />
               </button>
             </div>
           </div>
@@ -71,7 +71,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
         className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1 text-11 text-tertiary hover:text-secondary"
       >
         {t("common.clear_all")}
-        <CloseOutline height={12} width={12} strokeWidth={2} />
+        <CloseOutline height={12} width={12} />
       </button>
     </div>
   );
diff --git a/apps/space/components/issues/filters/applied-filters/label.tsx b/apps/space/components/issues/filters/applied-filters/label.tsx
index 70f20266c2..23785b5f1f 100644
--- a/apps/space/components/issues/filters/applied-filters/label.tsx
+++ b/apps/space/components/issues/filters/applied-filters/label.tsx
@@ -38,7 +38,7 @@ export function AppliedLabelsFilters(props: Props) {
               className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(labelId)}
             >
-              <CloseOutline height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} />
             </button>
           </div>
         );
diff --git a/apps/space/components/issues/filters/applied-filters/priority.tsx b/apps/space/components/issues/filters/applied-filters/priority.tsx
index 01b9ca4966..1b3a03a85e 100644
--- a/apps/space/components/issues/filters/applied-filters/priority.tsx
+++ b/apps/space/components/issues/filters/applied-filters/priority.tsx
@@ -27,7 +27,7 @@ export function AppliedPriorityFilters(props: Props) {
             className="grid place-items-center text-tertiary hover:text-secondary"
             onClick={() => handleRemove(priority)}
           >
-            <CloseOutline height={10} width={10} strokeWidth={2} />
+            <CloseOutline height={10} width={10} />
           </button>
         </div>
       ))}
diff --git a/apps/space/components/issues/filters/applied-filters/state.tsx b/apps/space/components/issues/filters/applied-filters/state.tsx
index e1866e89c2..1a37861f2d 100644
--- a/apps/space/components/issues/filters/applied-filters/state.tsx
+++ b/apps/space/components/issues/filters/applied-filters/state.tsx
@@ -38,7 +38,7 @@ export const AppliedStateFilters = observer(function AppliedStateFilters(props:
               className="grid place-items-center text-tertiary hover:text-secondary"
               onClick={() => handleRemove(stateId)}
             >
-              <CloseOutline height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} />
             </button>
           </div>
         );
diff --git a/apps/space/components/issues/filters/helpers/filter-option.tsx b/apps/space/components/issues/filters/helpers/filter-option.tsx
index 23be05e1b0..58d0be53c5 100644
--- a/apps/space/components/issues/filters/helpers/filter-option.tsx
+++ b/apps/space/components/issues/filters/helpers/filter-option.tsx
@@ -30,7 +30,7 @@ export function FilterOption(props: Props) {
           isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
         } ${multiple ? "rounded-xs" : "rounded-full"}`}
       >
-        {isChecked && <TickOutline width={10} height={10} strokeWidth={3} />}
+        {isChecked && <TickOutline width={10} height={10} />}
       </div>
       <div className="flex items-center gap-2 truncate">
         {icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}
diff --git a/apps/space/components/issues/filters/selection.tsx b/apps/space/components/issues/filters/selection.tsx
index f0619ed0da..6781c52437 100644
--- a/apps/space/components/issues/filters/selection.tsx
+++ b/apps/space/components/issues/filters/selection.tsx
@@ -30,7 +30,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="p-2.5 pb-0">
         <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
-          <SearchOutline className="text-placeholder" width={12} height={12} strokeWidth={2} />
+          <SearchOutline className="text-placeholder" width={12} height={12} />
           <input
             type="text"
             className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
@@ -41,7 +41,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseOutline className="text-tertiary" height={12} width={12} strokeWidth={2} />
+              <CloseOutline className="text-tertiary" height={12} width={12} />
             </button>
           )}
         </div>
diff --git a/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 792631ecff..904011682c 100644
--- a/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -25,11 +25,7 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
       onClick={() => toggleExpanded()}
     >
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
-        {isExpanded ? (
-          <ChevronUpOutline width={14} height={14} strokeWidth={2} />
-        ) : (
-          <ChevronDownOutline width={14} height={14} strokeWidth={2} />
-        )}
+        {isExpanded ? <ChevronUpOutline width={14} height={14} /> : <ChevronDownOutline width={14} height={14} />}
       </div>
 
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
diff --git a/apps/space/components/issues/issue-layouts/properties/all-properties.tsx b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
index e2527e7bed..728ccd4c82 100644
--- a/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
@@ -146,7 +146,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
               }
             )}
           >
-            <ViewsOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <ViewsOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.sub_issues_count}</div>
           </div>
         </Tooltip>
@@ -160,7 +160,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <AttachOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <AttachOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.attachment_count}</div>
           </div>
         </Tooltip>
@@ -174,7 +174,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <LinkOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <LinkOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.link_count}</div>
           </div>
         </Tooltip>
diff --git a/apps/space/components/issues/issue-layouts/properties/labels.tsx b/apps/space/components/issues/issue-layouts/properties/labels.tsx
index 5d10629b13..909c71629c 100644
--- a/apps/space/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/labels.tsx
@@ -29,7 +29,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
         <div
           className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
         >
-          <LabelsOutline className="h-3.5 w-3.5" strokeWidth={2} />
+          <LabelsOutline className="h-3.5 w-3.5" />
           {shouldShowLabel && <span>No Labels</span>}
         </div>
       </Tooltip>
diff --git a/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index c18609896d..7a1aa65da2 100644
--- a/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -88,7 +88,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
         )}
 
         <span className="absolute -right-1 -bottom-0.5 rounded-tl-sm bg-layer-1 px-0.5 py-px">
-          <ChatOutline className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
+          <ChatOutline className="size-3 text-secondary" aria-hidden="true" />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -139,14 +139,14 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                 disabled={isSubmitting}
                 className="group shadow-md rounded-sm border border-success-strong bg-success-primary p-2 duration-300 hover:bg-success-primary"
               >
-                <TickOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <TickOutline className="h-3 w-3 text-on-color" />
               </button>
               <button
                 type="button"
                 className="group shadow-md rounded-sm border border-danger-strong bg-danger-primary p-2 duration-300 hover:bg-danger-primary-hover"
                 onClick={() => setIsEditing(false)}
               >
-                <CloseOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <CloseOutline className="h-3 w-3 text-on-color" />
               </button>
             </div>
           </form>
@@ -173,7 +173,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             onClick={() => {}}
             className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-tertiary outline-none hover:bg-layer-transparent-hover"
           >
-            <MoreVerticalOutline className="size-4" strokeWidth={2} />
+            <MoreVerticalOutline className="size-4" />
           </Menu.Button>
 
           <Transition