From 720033cd264a434852a2b61f2fd9ba238bf5bc95 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Mon, 28 Apr 2025 10:04:21 +0200
Subject: [PATCH] (Canon)fix: Clicking Select label moves focus to trigger.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/floppy-days-tell.md                |  5 +++++
 packages/canon/css/components.css             |  5 +++++
 packages/canon/css/select.css                 |  5 +++++
 packages/canon/css/styles.css                 |  5 +++++
 .../src/components/Select/Select.styles.css   |  4 ++++
 .../canon/src/components/Select/Select.tsx    | 22 +++++++++++++++++--
 6 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/floppy-days-tell.md

diff --git a/.changeset/floppy-days-tell.md b/.changeset/floppy-days-tell.md
new file mode 100644
index 0000000000..38b23b3973
--- /dev/null
+++ b/.changeset/floppy-days-tell.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+For improved a11y, clicking a Select component label now focuses the Select trigger element.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index f4c8008673..7933abd80c 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -836,6 +836,11 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
+  cursor: pointer;
+}
+
+.canon-SelectLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-SelectDescription {
diff --git a/packages/canon/css/select.css b/packages/canon/css/select.css
index cf8c05622b..1c23f39201 100644
--- a/packages/canon/css/select.css
+++ b/packages/canon/css/select.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-SelectLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-SelectDescription {
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 141bc1b5fb..eb6ce287dd 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -10060,6 +10060,11 @@
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-fg-primary);
   margin-bottom: var(--canon-space-1_5);
+  cursor: pointer;
+}
+
+.canon-SelectLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-SelectDescription {
diff --git a/packages/canon/src/components/Select/Select.styles.css b/packages/canon/src/components/Select/Select.styles.css
index fa00d81302..34cb242c7b 100644
--- a/packages/canon/src/components/Select/Select.styles.css
+++ b/packages/canon/src/components/Select/Select.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-SelectLabel[data-disabled] {
+  cursor: default;
 }
 
 .canon-SelectDescription {
diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx
index be8047ca02..3f25ac26de 100644
--- a/packages/canon/src/components/Select/Select.tsx
+++ b/packages/canon/src/components/Select/Select.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { forwardRef, useId } from 'react';
+import { forwardRef, useCallback, useId, useRef, MouseEvent } from 'react';
 import { Select as SelectPrimitive } from '@base-ui-components/react/select';
 import { Icon } from '../Icon';
 import clsx from 'clsx';
@@ -45,10 +45,27 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
   const descriptionId = useId();
   const errorId = useId();
 
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const handleLabelClick = useCallback(
+    (e: MouseEvent<HTMLLabelElement>) => {
+      if (!props.disabled && triggerRef.current) {
+        e.preventDefault();
+        triggerRef.current.focus();
+      }
+    },
+    [props.disabled],
+  );
+
   return (
     <div className={clsx('canon-Select', className)} style={style} ref={ref}>
       {label && (
-        <label className="canon-SelectLabel" htmlFor={selectId}>
+        <label
+          className="canon-SelectLabel"
+          htmlFor={selectId}
+          onClick={handleLabelClick}
+          data-disabled={props.disabled ? true : undefined}
+        >
           {label}
           {required && (
             <span aria-hidden="true" className="canon-SelectRequired">
@@ -59,6 +76,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
       )}
       <SelectPrimitive.Root {...rest}>
         <SelectPrimitive.Trigger
+          ref={triggerRef}
           id={selectId}
           className="canon-SelectTrigger"
           data-size={responsiveSize}