From 6c3233e7754f895b2133dab96a690768241d8b8a Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Wed, 30 Jul 2025 11:01:27 +0200
Subject: [PATCH] Scopes: Proper usage of checkbox label (#108892)

* Proper use of label for checkbox

* Cleanup
---
 .../app/features/scopes/selector/ScopesTreeItem.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/public/app/features/scopes/selector/ScopesTreeItem.tsx b/public/app/features/scopes/selector/ScopesTreeItem.tsx
index 211991b353b..9640c4f7e85 100644
--- a/public/app/features/scopes/selector/ScopesTreeItem.tsx
+++ b/public/app/features/scopes/selector/ScopesTreeItem.tsx
@@ -63,7 +63,7 @@ export function ScopesTreeItem({
               id={treeNode.scopeNodeId}
               name={treeNode.scopeNodeId}
               checked={selected}
-              label=""
+              label={isExpandable ? '' : scopeNode.spec.title}
               data-testid={`scopes-tree-${treeNode.scopeNodeId}-radio`}
               onClick={() => {
                 selected ? deselectScope(treeNode.scopeNodeId) : selectScope(treeNode.scopeNodeId);
@@ -73,6 +73,7 @@ export function ScopesTreeItem({
             <Checkbox
               checked={selected}
               data-testid={`scopes-tree-${treeNode.scopeNodeId}-checkbox`}
+              label={isExpandable ? '' : scopeNode.spec.title}
               onChange={() => {
                 selected ? deselectScope(treeNode.scopeNodeId) : selectScope(treeNode.scopeNodeId);
               }}
@@ -80,7 +81,7 @@ export function ScopesTreeItem({
           )
         ) : null}
 
-        {isExpandable ? (
+        {isExpandable && (
           <button
             className={styles.expand}
             data-testid={`scopes-tree-${treeNode.scopeNodeId}-expand`}
@@ -93,8 +94,6 @@ export function ScopesTreeItem({
 
             {scopeNode.spec.title}
           </button>
-        ) : (
-          <span data-testid={`scopes-tree-${treeNode.scopeNodeId}-title`}>{scopeNode.spec.title}</span>
         )}
       </div>
 
@@ -130,8 +129,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       lineHeight: theme.typography.pxToRem(22),
       padding: theme.spacing(0.5, 0),
 
-      '& > label': css({
-        gap: 0,
+      '& > label :last-child': css({
+        fontSize: theme.typography.pxToRem(14),
+        lineHeight: theme.typography.pxToRem(22),
+        fontWeight: theme.typography.fontWeightRegular,
       }),
     }),
     titlePadding: css({