diff --git a/.changeset/floppy-days-tell.md b/.changeset/floppy-days-tell.md index 38b23b3973..2eb184f6fe 100644 --- a/.changeset/floppy-days-tell.md +++ b/.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. diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index 7933abd80c..6496363868 100644 --- a/packages/canon/css/components.css +++ b/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 { diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index eb6ce287dd..b2743220c7 100644 --- a/packages/canon/css/styles.css +++ b/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 { diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css index bf21b3bd74..4caf7cb2e9 100644 --- a/packages/canon/css/textfield.css +++ b/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 { diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css index e2c843f166..7ee0a937dc 100644 --- a/packages/canon/src/components/TextField/TextField.styles.css +++ b/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 { diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx index 63c7e21435..db56463c3a 100644 --- a/packages/canon/src/components/TextField/TextField.tsx +++ b/packages/canon/src/components/TextField/TextField.tsx @@ -32,6 +32,7 @@ export const TextField = forwardRef( error, required, style, + disabled, ...rest } = props; @@ -50,7 +51,11 @@ export const TextField = forwardRef( ref={ref} > {label && ( -