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((props, ref) => { const descriptionId = useId(); const errorId = useId(); + const triggerRef = useRef(null); + + const handleLabelClick = useCallback( + (e: MouseEvent) => { + if (!props.disabled && triggerRef.current) { + e.preventDefault(); + triggerRef.current.focus(); + } + }, + [props.disabled], + ); + return (
{label && ( -