[Bug]: Enhance Label component with accessibility improvements and variant support

[GaroGabrielyan]

Component

Label

Is this a regression?

no

Describe the bug

The current Label component has accessibility issues and lacks proper semantic distinction between interactive and descriptive labels. We need to enhance it to:

1. Fix accessibility warnings: Currently getting "No label associated with a form field" warnings because the component always renders as even when not associated with form controls.
2. Add cursor pointer: Interactive labels should have cursor: pointer styling.
3. Support two variants: Interactive (clickable) vs Descriptive (non-clickable) labels.

Current Problems

1. Accessibility Issues:

• Label component always renders as <label> element
• When used in RadioGroup, ProgressBar, Rate components, it's not associated with any form control
• Browser dev tools show "No label associated with a form field" warnings

2. Missing Visual Feedback:

• Interactive labels don't show cursor pointer
• No clear distinction between clickable and non-clickable labels

3. Semantic Incorrectness:

• Using <label> for descriptive text violates HTML semantics
• Current readOnly prop tries to fix this with pointer-events: none but doesn't solve the semantic issue

To Reproduce

1. Open RadioGroup or ProgressBar
2. Click on the label

Expected behavior

The Label component should support two distinct variants:

1. Interactive Labels ( variant="interactive" ) ( default ):

• Renders as <label> element
• Has cursor: pointer styling
• Wraps form controls (inputs, checkboxes, radios)
• Clicking the label text activates the associated form control
• Used in: Checkbox, Radio, TextField

2. Descriptive Labels ( variant="descriptive" ):

• Renders as <div> element
• No cursor pointer
• Just descriptive text, not associated with form controls
• Used in: RadioGroup (group label), ProgressBar, Rate, CheckboxGroup.

Screenshots

No response

Package version

3.0.0-next-8bad474-17102025

Desktop

No response

Smartphone

Exception or Error

Additional context

Benefits

✅ Fixes accessibility warnings
✅ Proper HTML semantics
✅ Clear visual distinction between label types
✅ Backward compatible
✅ Better developer experience with explicit intent