🐛 fix(form-controls): connect aria-labelledby with the correct label of the bar-field

[GinaBiondo-aperto]

Current Behavior

Aria-labelledby is not set correctly for and

• [ ] bal-label should create its unique id
• [ ] checkbox and radios should be linked with their label
• [ ] form controls should be linked with their bal-field-label
• [ ] fix checkbox and radio group label-by

Expected Behavior

The connection between group-tags and bal-field-label should be established correctly to set aria-labelledby for the group-tags

Steps to Reproduce

Set a radio group or checkbox group within a field tag with label

Version

12.10.0

Browsers

All

Device

All

Code Reproduction URL

No response

Additional Information

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[hirsch88]

  /**
   * @internal
   */
  @Prop() context?: 'field-label' | 'radio-label' | 'radio-button-label' | 'checkbox-label' | 'checkbox-button-label'

[hirsch88]

export interface BalLabeledBy {
  labeledBy: string
}

class Component implements BalLabeledBy {

  /**
   * @internal
   */
  @Prop() labeledBy: string

  sync() {
    if(this.context === 'field-label'){
      const controls = this.el.closest('bal-field-label')?.closest('bal-field')?.querySelector('bal-field-control')
      this.htmlFor = controls[0]
      controls.forEach(control => control.ariaLabeldBy = this.id)
    }
  }
}

[mladenplaninicic]

/cib

[github-actions[bot]]

Branch fix/issue-825 created!