refactor(ui-select,ui-form-field): make the code a bit more understan…

…dable
instructure · Feb 7, 2025 · 455f58a · 455f58a
1 parent 3e11f86
commit 455f58a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/packages/ui-form-field/src/FormField/index.tsx b/packages/ui-form-field/src/FormField/index.tsx
@@ -67,8 +67,6 @@ class FormField extends Component<FormFieldProps> {
         {...pickProps(this.props, FormFieldLayout.allowedProps)}
         label={this.props.label}
         vAlign={this.props.vAlign}
-        as="label"
-        htmlFor={this.props.id} // TODO do this on the layout instead!
         elementRef={this.handleRef}
       />
     )

diff --git a/packages/ui-form-field/src/FormFieldLayout/index.tsx b/packages/ui-form-field/src/FormFieldLayout/index.tsx
@@ -155,10 +155,16 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
 
     const hasNewErrorMsg =
       !!messages?.find((m) => m.type === 'newError') && isGroup
-    // If it's a label we apply the 'for' attribute to associate the label
-    let ariaLabelledBy = {}
-    if (ElementType != 'label' && this.props.label) {
-      ariaLabelledBy = { 'aria-labelledby': this._labelId }
+
+    let labelConnector = {}
+    if (ElementType == 'label') {
+      // this is a `<label>`, it needs to be connected to a control
+      // This is the case for e.g. `FormField`, `TextInput`, `NumberInput`
+      labelConnector = { htmlFor: this.props.id }
+    } else if (this.props.label) {
+      // This is a FormFieldGroup (span), it needs to be connected to its label
+      // This is the case for `FormFieldGroup`
+      labelConnector = { 'aria-labelledby': this._labelId }
     }
     return (
       <ElementType
@@ -169,7 +175,7 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
         css={styles?.formFieldLayout}
         style={{ width }}
         aria-describedby={this.hasMessages ? this._messagesId : undefined}
-        {...ariaLabelledBy}
+        {...labelConnector}
         ref={this.handleRef}
       >
         <Grid

diff --git a/packages/ui-select/src/Select/__new-tests__/Select.test.tsx b/packages/ui-select/src/Select/__new-tests__/Select.test.tsx
@@ -487,7 +487,7 @@ describe('<Select />', () => {
         })
       })
 
-      it.only('when input is clicked', async () => {
+      it('when input is clicked', async () => {
         const onRequestShowOptions = vi.fn()
 
         const { rerender } = render(