From a06e8acf6fad569fc085fc2eee6c0f9ca733f183 Mon Sep 17 00:00:00 2001
From: Mohamed Fall <ps.hackmaster@gmail.com>
Date: Fri, 1 May 2026 20:43:58 +0000
Subject: [PATCH] fix(Label): extend clickable hit area to full label bounds

When a Label has an onClick handler (no onClose), promote the outer
element to a <button> so the full padding/border area is interactive.

When onClose is also present, fall back to the original inner <button>
structure to avoid nested buttons.

Co-authored-by: Copilot <copilot@github.com>
---
 packages/react-core/src/components/Label/Label.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 71427cff802..b2607ee0a5a 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -285,7 +285,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   let LabelComponentChildElement = 'span';
   if (href) {
     LabelComponentChildElement = 'a';
-  } else if (isEditable || (onLabelClick && !isOverflowLabel && !isAddLabel)) {
+  } else if (isEditable || (onLabelClick && !isOverflowLabel && !isAddLabel && onClose)) {
     LabelComponentChildElement = 'button';
   }
 
@@ -338,7 +338,9 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
 
-  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
+  const LabelComponent = (
+    isOverflowLabel || isAddLabel || (!!onLabelClick && !isEditable && !onClose) ? 'button' : 'span'
+  ) as any;
 
   return (
     <LabelComponent
@@ -358,8 +360,9 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         isAddLabel && styles.modifiers.add,
         className
       )}
-      onClick={isOverflowLabel || isAddLabel ? onLabelClick : undefined}
+      onClick={isOverflowLabel || isAddLabel || (!!onLabelClick && !isEditable && !onClose) ? onLabelClick : undefined}
       {...(LabelComponent === 'button' && { type: 'button' })}
+      {...(isClickableDisabled && !!onLabelClick && !isEditable && !onClose && { disabled: true })}
     >
       {!isEditableActive && labelComponentChild}
       {!isEditableActive && onClose && closeButton}