Skip to content

feat(forms): resolve external labels to inner control of form controls#2263

Open
rkaraivanov wants to merge 1 commit into
masterfrom
rkaraivanov/feat-external-labels-association
Open

feat(forms): resolve external labels to inner control of form controls#2263
rkaraivanov wants to merge 1 commit into
masterfrom
rkaraivanov/feat-external-labels-association

Conversation

@rkaraivanov

@rkaraivanov rkaraivanov commented Jun 22, 2026

Copy link
Copy Markdown
Member

Description

Form-associated controls are the labellable element, so external associations target the host rather than the inner native control (<input>/<textarea>) that assistive technologies expose. Resolve the host's ElementInternals.labels onto the inner control so external labels (via for/id IDREF or by nesting) reach the AT-exposed element and focus delegation works on label activation.

  • input-base / date-time-input.base: add internal _labelElements state and a _resolvedLabelElements getter feeding the native input's ariaLabelledByElements (igc-input, igc-mask-input, igc-date-time-input)
  • textarea: forward _internals.labels to the inner native <textarea>
  • select, combo, date-picker, date-range-picker: forward _internals.labels to the inner input in updated(); date-range two-input mode targets the start input
  • combo: add delegatesFocus so label activation focuses the inner input
  • tests: add shared runExternalLabelAssociationTests covering IDREF and nested label association plus focus delegation

Type of Change

  • New feature (non-breaking change that adds functionality)

Checklist

  • My code follows the project's coding standards
  • I have tested my changes locally

Form-associated controls are the labellable element, so external <label>
associations target the host rather than the inner native control (<input>/
<textarea>) that assistive technologies expose. Resolve the host's
ElementInternals.labels onto the inner control so external labels (via for/id
IDREF or by nesting) reach the AT-exposed element and focus delegation works on
label activation.

- input-base / date-time-input.base: add internal _labelElements state and a
  _resolvedLabelElements getter feeding the native input's ariaLabelledByElements
  (igc-input, igc-mask-input, igc-date-time-input)
- textarea: forward _internals.labels to the inner native <textarea>
- select, combo, date-picker, date-range-picker: forward _internals.labels to
  the inner input in updated(); date-range two-input mode targets the start input
- combo: add delegatesFocus so label activation focuses the inner input
- tests: add shared runExternalLabelAssociationTests covering IDREF and nested
  label association plus focus delegation

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves accessibility and focus behavior for form-associated custom elements by forwarding external <label> associations (via for/id and label nesting) from the host element to the inner native control that assistive technologies expose.

Changes:

  • Forward ElementInternals.labels from composite hosts (select/combo/date-picker/date-range-picker) to their inner input components, and bind ariaLabelledByElements on leaf native controls (input/mask-input/date-time-input/textarea).
  • Enable delegatesFocus where needed so label activation results in correct focus delegation to the inner input.
  • Add a shared test suite (runExternalLabelAssociationTests) and apply it across affected components; update changelog.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/components/textarea/textarea.ts Forwards associated external labels onto the native <textarea> via ariaLabelledByElements.
src/components/textarea/textarea.spec.ts Adds shared external label association tests for textarea.
src/components/select/select.ts Enables delegatesFocus and forwards host labels to inner igc-input.
src/components/select/select.spec.ts Adds shared external label association tests for select.
src/components/mask-input/mask-input.ts Applies resolved label elements to the masked native input template options.
src/components/mask-input/mask-input.spec.ts Adds shared external label association tests for mask input.
src/components/input/input.ts Applies resolved label elements to the native <input>.
src/components/input/input.spec.ts Adds shared external label association tests for input.
src/components/input/input-base.ts Introduces _labelElements forwarding state and _resolvedLabelElements resolution logic.
src/components/date-time-input/date-time-input.base.ts Introduces _labelElements forwarding state and wires resolved labels into the native masked input.
src/components/date-time-input/date-time-input.spec.ts Adds shared external label association tests for date-time input.
src/components/date-range-picker/date-range-picker.ts Forwards host labels to the start input (single input mode or first input in two-input mode).
src/components/date-range-picker/date-range-picker-two-inputs.spec.ts Adds shared external label association tests for two-input date range picker.
src/components/date-range-picker/date-range-picker-single.spec.ts Adds shared external label association tests for single-input date range picker.
src/components/date-picker/date-picker.ts Forwards host labels to the inner date-time input.
src/components/date-picker/date-picker.spec.ts Adds shared external label association tests for date picker.
src/components/combo/combo.ts Enables delegatesFocus and forwards host labels to the inner igc-input.
src/components/combo/combo.spec.ts Adds shared external label association tests for combo.
src/components/common/utils.spec.ts Adds the shared runExternalLabelAssociationTests test helper.
src/components/common/templates/masked-input.ts Adds ariaLabelledByElements support to the shared masked input renderer.
src/components/common/mixins/forms/types.ts Exposes _internals in typing for form-associated components.
src/components/common/mixins/forms/associated.ts Renames internals controller field to protected _internals for subclass access.
src/components/common/controllers/internals.ts Adds a labels getter to expose associated label elements.
CHANGELOG.md Documents the new external label association behavior under Unreleased.

Comment thread src/components/common/controllers/internals.ts
@rkaraivanov rkaraivanov requested a review from damyanpetev June 22, 2026 17:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants