feat(forms): resolve external labels to inner control of form controls#2263
Open
rkaraivanov wants to merge 1 commit into
Open
feat(forms): resolve external labels to inner control of form controls#2263rkaraivanov wants to merge 1 commit into
rkaraivanov wants to merge 1 commit into
Conversation
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
Contributor
There was a problem hiding this comment.
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.labelsfrom composite hosts (select/combo/date-picker/date-range-picker) to their inner input components, and bindariaLabelledByElementson leaf native controls (input/mask-input/date-time-input/textarea). - Enable
delegatesFocuswhere 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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.Type of Change
Checklist