(canon)fix: Add cursor styling for TextField label.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/floppy-days-tell.md

@@ -2,4 +2,4 @@
 '@backstage/canon': patch
 ---
 
-For improved a11y, clicking a Select component label now focuses the Select trigger element.
+For improved a11y, clicking a Select component label now focuses the Select trigger element, and the TextField component's label is now styled to indicate it's interactive.

packages/canon/css/components.css

@@ -543,6 +543,11 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
+  cursor: pointer;
+}
+
+.canon-TextFieldLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-TextFieldDescription {

packages/canon/css/styles.css

@@ -9767,6 +9767,11 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
+  cursor: pointer;
+}
+
+.canon-TextFieldLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-TextFieldDescription {

packages/canon/css/textfield.css

@@ -10,6 +10,11 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
+  cursor: pointer;
+}
+
+.canon-TextFieldLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-TextFieldDescription {

packages/canon/src/components/TextField/TextField.styles.css

@@ -26,6 +26,10 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
+  cursor: pointer;
+}
+.canon-TextFieldLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-TextFieldDescription {

packages/canon/src/components/TextField/TextField.tsx

@@ -32,6 +32,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
       error,
       required,
       style,
+      disabled,
       ...rest
     } = props;
 
@@ -50,7 +51,11 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
         ref={ref}
       >
         {label && (
-          <label className="canon-TextFieldLabel" htmlFor={inputId}>
+          <label
+            className="canon-TextFieldLabel"
+            htmlFor={inputId}
+            data-disabled={disabled}
+          >
             {label}
             {required && (
               <span aria-hidden="true" className="canon-TextFieldRequired">
@@ -70,6 +75,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
           })}
           data-invalid={error}
           required={required}
+          disabled={disabled}
           {...rest}
         />
         {description && (