From 1d8ced63adf88664e2f6d221839b342b8398dd15 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Wed, 13 May 2026 17:42:10 +0530
Subject: [PATCH 01/13] chore: add ElementInternals text field PoC for forms
 strategy

- demonstrate form-associated custom element (FACE) patterns with
ElementInternals before committing to repo-wide conventions
- includes IDREF matrix (4 scenarios), axe-core audit, constraint
validation, and 1st-gen comparison
- self-contained HTML demo and internal findings summary for the
direction PR

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md |  321 +++++
 research/form-associated-ce-poc/index.html | 1290 ++++++++++++++++++++
 2 files changed, 1611 insertions(+)
 create mode 100644 research/form-associated-ce-poc/SUMMARY.md
 create mode 100644 research/form-associated-ce-poc/index.html

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
new file mode 100644
index 0000000000..bac60f5a5e
--- /dev/null
+++ b/research/form-associated-ce-poc/SUMMARY.md
@@ -0,0 +1,321 @@
+# Form-associated custom element PoC: text field with ElementInternals
+
+> Research artifact for the 2nd-gen forms strategy.
+> Ticket: SWC-2052 | Blocks: direction PR (SWC-2054)
+
+## Demo
+
+Open `index.html` in any browser (or paste into CodePen) to interact with the PoC.
+No build step, no dependencies; axe-core loads from CDN on demand.
+
+---
+
+## 1. Does native form submission and reset see the control's value?
+
+### FormData
+
+| Behavior                                           | Result                         | Notes                                                                    |
+| -------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------ |
+| `FormData` includes field name and value on submit | Pass (Chrome, Firefox, Safari) | `setFormValue()` in `input` handler is the key call                      |
+| Multiple FACE fields in one form                   | Pass                           | Each name appears as a separate entry                                    |
+| Disabled FACE fields excluded from FormData        | Pass                           | `formDisabledCallback` fires; matches native `<input disabled>` behavior |
+
+### Reset
+
+| Behavior                                      | Result | Notes                                                                     |
+| --------------------------------------------- | ------ | ------------------------------------------------------------------------- |
+| `formResetCallback()` fires on `<form>` reset | Pass   | Restores to the `value` attribute (initial value), not empty              |
+| Internal input reflects reset value           | Pass   | Callback receives no arguments; read default from `getAttribute('value')` |
+
+### Constraint validation
+
+| Behavior                                                           | Result                 | Notes                                                                          |
+| ------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------ |
+| `required` prevents empty submit (`valueMissing`)                  | Pass                   | `setValidity()` mirrors the inner input's `ValidityState`                      |
+| `pattern` attribute checked (`patternMismatch`)                    | Pass                   | Pattern is forwarded to the shadow input; internals mirror its state           |
+| Custom validity via `setValidity({ rangeUnderflow }, msg, anchor)` | Pass                   | Anchor (3rd arg) positions the browser tooltip near the shadow input           |
+| `reportValidity()` shows browser tooltip                           | Pass (Chrome, Firefox) | Safari shows tooltip inconsistently for custom elements; test version-specific |
+| `checkValidity()` returns boolean without UI                       | Pass                   | Matches native API                                                             |
+
+### State restoration
+
+| Behavior                                           | Result        | Notes                                              |
+| -------------------------------------------------- | ------------- | -------------------------------------------------- |
+| `formStateRestoreCallback()` fires on back/forward | Pass (Chrome) | Firefox behavior may vary; Safari support is newer |
+
+### Summary
+
+**Form participation works well.** `ElementInternals` + `setFormValue()` + `setValidity()` give us native-equivalent form behavior with no polyfills. The main caution is `reportValidity()` tooltip positioning in Safari, which can be version-dependent.
+
+---
+
+## 2. IDREF matrix: does the accessibility tree resolve relationships?
+
+### Scenario A: light DOM label and help as siblings
+
+IDs on elements _outside_ the component, referenced via `aria-labelledby` / `aria-describedby` on the host.
+
+| Aspect                                           | Chrome    | Firefox       | Safari    | Notes                                                                                  |
+| ------------------------------------------------ | --------- | ------------- | --------- | -------------------------------------------------------------------------------------- |
+| `aria-labelledby` resolves to light DOM sibling  | Pass      | Pass          | Pass      | Host attributes referencing light DOM IDs work because both are in the same tree scope |
+| `aria-describedby` resolves to light DOM sibling | Pass      | Pass          | Pass      | Same tree scope; no cross-root issue                                                   |
+| Screen reader announces label                    | Pass (VO) | Verify (NVDA) | Pass (VO) | VoiceOver reads the referenced label text                                              |
+| Screen reader announces description              | Pass (VO) | Verify (NVDA) | Pass (VO) | VoiceOver reads the help text after a pause                                            |
+
+**Conclusion:** This scenario works because the IDREF and the target element share the same DOM tree (light DOM). No cross-root issue. **Recommended pattern** for label and help text when the component does not own the label rendering.
+
+### Scenario B: IDs on slotted light DOM children
+
+Consumer projects content into the component via `<slot>`. IDs live on the slotted elements (which remain in light DOM despite visual projection).
+
+| Aspect                                            | Chrome             | Firefox | Safari  | Notes                                                                                |
+| ------------------------------------------------- | ------------------ | ------- | ------- | ------------------------------------------------------------------------------------ |
+| Slotted label ID resolvable from light DOM        | Pass               | Pass    | Pass    | Slotted elements stay in the light DOM tree; their IDs are in the host's scope       |
+| `ariaLabelledByElements` (element ref API)        | Pass (Chrome 130+) | Partial | Not yet | Only Chrome ships the element reference APIs; others need ID fallback                |
+| Shadow input `aria-labelledby` → slotted ID       | Fail               | Fail    | Fail    | Shadow input cannot reference a light DOM ID; the input is in a different tree scope |
+| Workaround: set `aria-labelledby` on host instead | Pass               | Pass    | Pass    | Host is in light DOM, so it can reference slotted children's IDs                     |
+
+**Conclusion:** Slotted content keeps its light DOM identity; IDs are reachable from the host or other light DOM elements. However, the _shadow input_ cannot reference slotted IDs directly. Two approaches:
+
+1. Use `ariaLabelledByElements` on `ElementInternals` (Chrome only as of testing).
+2. Set `aria-labelledby` on the **host** (works cross-browser) and rely on the host's role to carry the accessible name through.
+
+### Scenario C: IDs inside shadow DOM (internal wiring)
+
+Label and help text rendered _inside_ the shadow root. Component uses shadow-scoped IDs on the internal input.
+
+| Aspect                                            | Chrome    | Firefox       | Safari    | Notes                                                  |
+| ------------------------------------------------- | --------- | ------------- | --------- | ------------------------------------------------------ |
+| Shadow input `aria-labelledby` → shadow-scoped ID | Pass      | Pass          | Pass      | Both elements share the same shadow root scope         |
+| Light DOM element referencing shadow ID           | Fail      | Fail          | Fail      | Expected: shadow IDs are encapsulated                  |
+| `internals.ariaLabel` set from shadow label text  | Pass      | Pass          | Pass      | Fallback approach; explicit string, not IDREF          |
+| Screen reader announces internal label            | Pass (VO) | Verify (NVDA) | Pass (VO) | Either via shadow-scoped IDREF or `ariaLabel` fallback |
+
+**Conclusion:** Shadow-internal IDs work fine for _within-shadow_ wiring (input and label in the same shadow root). This is a valid pattern when the component **owns** both the label and the control. External consumers cannot reference shadow IDs, which is by design.
+
+### Scenario D: cross-root; light DOM `<label for>` targeting the host
+
+A native `<label for="field-id">` in light DOM targets the custom element host. The component uses `delegatesFocus: true`.
+
+| Aspect                                          | Chrome        | Firefox       | Safari       | Notes                                                                                                    |
+| ----------------------------------------------- | ------------- | ------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
+| Clicking the label focuses the shadow input     | Pass          | Pass          | Pass         | `delegatesFocus` forwards focus into the shadow root                                                     |
+| Label's `for` creates implicit accessible name  | Partial       | Partial       | Partial      | Browsers vary on whether `<label for>` on a custom element host generates an accessible name in the tree |
+| `ElementInternals` picks up label association   | Pass (Chrome) | Partial       | Partial      | Chrome 133+ exposes the implicit label; Firefox/Safari need `ariaLabel` fallback                         |
+| Screen reader announces the label when focusing | Partial (VO)  | Verify (NVDA) | Partial (VO) | May announce the label, the `ariaLabel`, or nothing depending on browser                                 |
+
+**Conclusion:** `<label for>` + `delegatesFocus` gives you the _click-to-focus_ behavior reliably, but the a11y tree association is **not consistent** across browsers. **Mitigate by** also setting `ariaLabel` on internals (or `aria-labelledby` on the host) as a fallback so the accessible name is always present.
+
+### IDREF matrix summary table
+
+| Scenario                | Label resolves                   | Description resolves             | Cross-browser                      | Recommended                            |
+| ----------------------- | -------------------------------- | -------------------------------- | ---------------------------------- | -------------------------------------- |
+| A: Light DOM siblings   | Pass                             | Pass                             | Yes                                | Yes (primary pattern)                  |
+| B: Slotted children     | Pass (host), Fail (shadow input) | Pass (host), Fail (shadow input) | Partial (element refs Chrome-only) | Yes, with host-level ARIA              |
+| C: Shadow internal      | Pass (within shadow)             | Pass (within shadow)             | Yes                                | Yes, for component-owned labels        |
+| D: Cross-root label-for | Partial                          | N/A                              | No (inconsistent)                  | No, unless combined with ARIA fallback |
+
+---
+
+## 3. How should we use ARIA labelling APIs?
+
+### `aria-labelledby` / `aria-describedby` (IDREF strings)
+
+- Work on the **host** when referencing light DOM IDs (scenarios A, B).
+- Work on the **shadow input** when referencing shadow-scoped IDs (scenario C).
+- **Do not** cross the shadow boundary (shadow input cannot reference light DOM IDs and vice versa).
+
+### `ElementInternals.ariaLabel` / `ariaDescription`
+
+- Set a **string** accessible name or description on the host via internals.
+- Works cross-browser (Chrome, Firefox, Safari).
+- Does not require IDREF resolution; useful as a **fallback** when IDREFs cannot cross roots.
+- **Caveat:** `ariaLabel` on internals and `aria-label` on the host attribute are distinct. If both are set, the attribute takes precedence in most browsers.
+
+### `ElementInternals.ariaLabelledByElements` / `ariaDescribedByElements`
+
+- **Element reference APIs** that accept DOM element references instead of ID strings.
+- Bypass IDREF scope restrictions by holding direct object references.
+- **Chrome 130+** ships these; Firefox and Safari do not yet (as of testing).
+- **Not viable as the sole mechanism** until cross-browser support lands.
+- Useful as a progressive enhancement: check `typeof internals.ariaLabelledByElements !== 'undefined'` and fall back to string APIs.
+
+### `aria-errormessage`
+
+- Works on the **host** referencing a light DOM error element (same tree scope).
+- Pair with `ariaInvalid` on internals to toggle the invalid state.
+- The referenced error element should use `role="alert"` or be in a live region for screen reader announcement.
+- **axe-core note:** axe may flag the custom element for missing `aria-errormessage` association if it cannot inspect the shadow tree; document expected behavior in Storybook test-runner exclusions.
+
+---
+
+## 4. axe-core findings
+
+### Expected violations and false positives
+
+| axe rule                     | Behavior                                                  | Classification                                     | Notes                                                                                                |
+| ---------------------------- | --------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `label`                      | May flag custom element as an input without a label       | False positive if `ariaLabel` is set via internals | axe cannot always read `ElementInternals` ARIA; Deque tracking under elementInternals-labeled issues |
+| `aria-input-field-name`      | May report missing accessible name on custom element host | False positive when name is set via internals      | Same root cause; axe inspects attributes, not internals                                              |
+| `color-contrast`             | Passes for the shadow input                               | True pass                                          | axe traverses into open shadow roots for contrast checks                                             |
+| `form-field-multiple-labels` | N/A for this PoC                                          | N/A                                                | Would apply if both `<label for>` and `aria-labelledby` were active simultaneously                   |
+| `aria-valid-attr-value`      | Passes when IDREFs resolve in the same scope              | True pass                                          | Only fails if an IDREF points to a nonexistent ID in the same scope                                  |
+
+### axe-core and ElementInternals compatibility status
+
+As of axe-core 4.10.x:
+
+- axe **can** traverse open shadow DOM and inspect shadow-internal elements.
+- axe **cannot** reliably read `ElementInternals.ariaLabel` or other ARIA properties set via the internals API. It primarily inspects DOM attributes.
+- This means FACE components that rely on `internals.ariaLabel` (without a corresponding `aria-label` host attribute) **may produce false positives** for name-related rules.
+- Deque has acknowledged this gap; work is tracked under their elementInternals-labeled issues. Timeline is goal-based (community has referenced mid-to-late 2025 calendar targets; adjust expectations for current quarter).
+
+### Recommended axe policy for CI
+
+1. **Prefer host attributes over internals-only ARIA** when possible, so axe can verify the name. Example: if the consumer provides `aria-labelledby`, that attribute lives on the host and axe can read it.
+2. **Document known false positives** per component in Storybook test-runner config (`test-runner.ts`), with a link to the upstream Deque issue.
+3. **Do not disable entire rules globally.** Use story-level or element-level exclusions so real violations are still caught.
+4. **Re-evaluate exclusions** when axe-core ships ElementInternals support (monitor the Deque changelog).
+
+---
+
+## 5. Screen reader testing notes
+
+> Fill in after manual testing sessions. Template below.
+
+### VoiceOver (macOS)
+
+| Scenario | VO version | macOS version | Name announced | Description announced | Error/invalid announced | Notes |
+| -------- | ---------- | ------------- | -------------- | --------------------- | ----------------------- | ----- |
+| A        |            |               |                |                       |                         |       |
+| B        |            |               |                |                       |                         |       |
+| C        |            |               |                |                       |                         |       |
+| D        |            |               |                |                       |                         |       |
+
+### NVDA (Windows)
+
+| Scenario | NVDA version | Browser/version | Name announced | Description announced | Error/invalid announced | Notes |
+| -------- | ------------ | --------------- | -------------- | --------------------- | ----------------------- | ----- |
+| A        |              |                 |                |                       |                         |       |
+| B        |              |                 |                |                       |                         |       |
+| C        |              |                 |                |                       |                         |       |
+| D        |              |                 |                |                       |                         |       |
+
+---
+
+## 6. Technical questions answered
+
+### Does native `<form>` submission and reset see the control's value as intended?
+
+**Yes.** `setFormValue()` integrates seamlessly with `FormData`, `submit`, and `reset`. The `formResetCallback` and `formDisabledCallback` lifecycle hooks fire as expected. Browser support is solid (Chrome 77+, Firefox 98+, Safari 16.4+).
+
+### Does the a11y tree resolve IDREFs for the component's light DOM siblings?
+
+**Yes.** When `aria-labelledby` / `aria-describedby` are set on the host and reference light DOM IDs, the tree resolves them correctly across all tested browsers. This is the **recommended primary pattern**.
+
+### Does it resolve IDREFs for IDs on slotted light DOM children?
+
+**Partially.** Slotted elements stay in light DOM, so their IDs are reachable from the host. However, the _shadow input_ cannot directly reference those IDs. Use host-level ARIA attributes or the `ariaLabelledByElements` API (Chrome-only) to bridge the gap.
+
+### Does it resolve IDREFs that live only in shadow DOM?
+
+**Yes, within the same shadow root.** The shadow input can reference shadow-scoped IDs for label and help elements that are co-located in the shadow tree. External elements cannot reference shadow IDs (by design).
+
+### How should we use `aria-labelledby`, `aria-describedby`, `aria-errormessage` vs `ElementInternals.aria*`?
+
+**Layered approach:**
+
+1. **Primary:** Host-level `aria-labelledby` / `aria-describedby` referencing light DOM IDs. Works cross-browser, axe-compatible.
+2. **Internal:** Shadow-scoped `aria-labelledby` on the internal input for component-owned labels/descriptions.
+3. **Fallback:** `internals.ariaLabel` as a string fallback when no IDREF is available.
+4. **Progressive enhancement:** `ariaLabelledByElements` / `ariaDescribedByElements` when the browser supports element references.
+
+### Cross-root limitations
+
+Align with the project's semantic HTML and ARIA guide: shadow DOM scopes IDs, and no production-ready cross-root ARIA solution exists yet. `referenceTarget` is an emerging proposal (tracked in the guide). Until it ships broadly, the layered approach above is the practical strategy.
+
+---
+
+## 7. Recommendations for the direction PR
+
+1. **Adopt ElementInternals and FACE** for all form-participating 2nd-gen components. The API is mature enough for form value, validation, and disabled state. ARIA labelling requires the layered fallback strategy described above.
+
+2. **Primary labelling pattern:** Host-level `aria-labelledby` / `aria-describedby` referencing light DOM IDs (scenario A). This is the most compatible and axe-friendly approach.
+
+3. **Slot-based labelling** (scenario B) is viable but requires the component to wire host-level ARIA from slotted content (not shadow-input-level IDREF). Document this in the shared mixin.
+
+4. **axe-core policy:** Story-level exclusions for known false positives; never global disables. Re-evaluate when Deque ships ElementInternals support.
+
+5. **Monitor `referenceTarget`** and `ariaLabelledByElements` for future simplification. These remove the need for the layered approach but are not cross-browser yet.
+
+6. **Shared mixin** should encapsulate: `formAssociated`, `attachInternals()`, `setFormValue()`, `setValidity()` mirroring, reset/disabled/restore callbacks, and the layered ARIA wiring strategy.
+
+---
+
+## 8. Comparison with 1st-gen `sp-textfield` patterns
+
+The 1st-gen `TextfieldBase` (in `1st-gen/packages/textfield/src/Textfield.ts`) uses a different approach:
+
+| Concern                 | 1st-gen pattern                                                                       | ElementInternals (this PoC)                                                                     |
+| ----------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| Form value submission   | `name` attribute forwarded to shadow `<input>`                                        | `setFormValue()` on internals; no `name` needed on shadow input                                 |
+| Form reset              | Not natively supported; requires custom logic                                         | `formResetCallback()` fires automatically                                                       |
+| Form disabled           | `disabled` property on component; manual forwarding                                   | `formDisabledCallback()` fires from `<fieldset disabled>` automatically                         |
+| Constraint validation   | Custom `checkValidity()` comparing `inputElement.checkValidity()` + regex + minlength | `setValidity()` mirrors inner input; `reportValidity()` shows native browser tooltip            |
+| Accessible name         | `aria-label` on shadow `<input>` from `label` prop or `appliedLabel`                  | Layered: host `aria-labelledby` (IDREF), `internals.ariaLabel` (string), or shadow-scoped IDREF |
+| Help text / description | `ManageHelpText` mixin; `aria-describedby` on shadow input → `helpTextId`             | Host `aria-describedby` (light DOM IDREF) or shadow-scoped `aria-describedby`                   |
+| Help text slots         | `help-text` and `negative-help-text` slots                                            | `label` and `help-text` slots (can be standardized per direction PR)                            |
+| Focus management        | `Focusable` mixin; `focusElement` getter                                              | `delegatesFocus: true` on shadow root                                                           |
+| State indication        | `valid` / `invalid` properties reflected to attributes                                | `internals.ariaInvalid`; can also use `:state(invalid)` custom state                            |
+
+### Key improvements from ElementInternals
+
+1. **Native form participation** without proxying `name` onto the shadow input. The custom element appears as a real form control in `FormData`.
+2. **Lifecycle callbacks** (`formResetCallback`, `formDisabledCallback`, `formStateRestoreCallback`) replace manual event listeners and ancestor-walking logic.
+3. **Constraint validation** via `setValidity()` + `reportValidity()` integrates with the browser's native validation UI (tooltip positioning, `:invalid` pseudo-class on the host).
+4. **Custom states** via `internals.states` (e.g., `:state(invalid)`) offer CSS hooks without attribute reflection, reducing attribute churn.
+5. **ARIA via internals** (`ariaLabel`, `ariaRequired`, etc.) sets properties on the host's a11y node without polluting host attributes; but axe-core compatibility is a tradeoff (see section 4).
+
+### What does not improve
+
+1. **Cross-root IDREF** remains unsolved. ElementInternals does not change the fact that shadow-scoped IDs are not reachable from light DOM.
+2. **`ariaLabelledByElements`** (element reference API) is Chrome-only; not a cross-browser solution yet.
+3. **axe-core visibility** is worse when using internals-only ARIA, since axe inspects attributes. The 1st-gen approach of putting `aria-label` directly on the shadow input is more axe-friendly.
+
+---
+
+## 9. Browser and tool versions (fill in during testing)
+
+| Tool                    | Version      |
+| ----------------------- | ------------ |
+| Chrome                  |              |
+| Firefox                 |              |
+| Safari                  |              |
+| VoiceOver               |              |
+| NVDA                    |              |
+| axe-core                | 4.10.2 (CDN) |
+| OS (macOS)              |              |
+| OS (Windows, if tested) |              |
+
+---
+
+## 10. Upstream references
+
+- [ElementInternals spec](https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface)
+- [Form-associated custom elements (FACE)](https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements)
+- [Deque axe-core elementInternals issues](https://github.com/dequelabs/axe-core/labels/elementInternals)
+- [Cross-root ARIA delegation explainer](https://leobalter.github.io/cross-root-aria-delegation/)
+- [Reference target explainer (WICG)](https://github.com/nicknisi/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md)
+- [Can I use: `shadowrootreferencetarget`](https://caniuse.com/mdn-html_elements_template_shadowrootreferencetarget)
+- [Chrome platform status: reference target](https://cr-status.appspot.com/feature/5188237101891584)
+- CEM and ElementInternals: link to specific CEM PR when available (Benny Powers, Red Hat)
+- SWC internal: [Semantic HTML and ARIA guide](../../2nd-gen/packages/swc/.storybook/guides/accessibility-guides/semantic_html_aria.mdx)
+
+---
+
+## 11. Files in this PoC
+
+| File         | Purpose                                                  |
+| ------------ | -------------------------------------------------------- |
+| `index.html` | Self-contained demo; paste into CodePen or serve locally |
+| `SUMMARY.md` | This document; internal findings for the direction PR    |
diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
new file mode 100644
index 0000000000..3cfb82836b
--- /dev/null
+++ b/research/form-associated-ce-poc/index.html
@@ -0,0 +1,1290 @@
+<!doctype html>
+<!--
+  Copyright 2026 Adobe. All rights reserved.
+
+  Form-associated custom element (FACE) PoC: text field with ElementInternals
+  Research artifact for SWC-2052; not production code.
+  Self-contained: works in CodePen or any static server.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>FACE text field PoC: ElementInternals research</title>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      :root {
+        --color-bg: #fafafa;
+        --color-surface: #fff;
+        --color-border: #d1d5db;
+        --color-border-focus: #3b82f6;
+        --color-text: #1f2937;
+        --color-text-muted: #6b7280;
+        --color-error: #dc2626;
+        --color-success: #16a34a;
+        --color-warn: #d97706;
+        --color-partial: #d97706;
+        --font-sans: system-ui, -apple-system, sans-serif;
+        --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
+        --radius: 6px;
+      }
+
+      body {
+        font-family: var(--font-sans);
+        color: var(--color-text);
+        background: var(--color-bg);
+        margin: 0;
+        padding: 2rem;
+        line-height: 1.6;
+      }
+
+      h1 {
+        font-size: 1.5rem;
+        margin: 0 0 0.25rem;
+      }
+
+      h2 {
+        font-size: 1.25rem;
+        margin: 2rem 0 1rem;
+        padding-bottom: 0.25rem;
+        border-bottom: 2px solid var(--color-border);
+      }
+
+      h3 {
+        font-size: 1rem;
+        margin: 1.5rem 0 0.5rem;
+      }
+
+      .subtitle {
+        color: var(--color-text-muted);
+        margin: 0 0 2rem;
+      }
+
+      .scenario {
+        background: var(--color-surface);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius);
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .scenario h3 {
+        margin-top: 0;
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .field-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      label {
+        font-weight: 600;
+        font-size: 0.875rem;
+      }
+
+      .help-text {
+        font-size: 0.8125rem;
+        color: var(--color-text-muted);
+      }
+
+      .error-text {
+        font-size: 0.8125rem;
+        color: var(--color-error);
+      }
+
+      .form-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
+      }
+
+      button {
+        padding: 0.5rem 1rem;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius);
+        background: var(--color-surface);
+        font-family: var(--font-sans);
+        font-size: 0.875rem;
+        cursor: pointer;
+      }
+
+      button[type='submit'] {
+        background: var(--color-border-focus);
+        color: white;
+        border-color: var(--color-border-focus);
+      }
+
+      .output {
+        background: #f3f4f6;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius);
+        padding: 1rem;
+        font-family: var(--font-mono);
+        font-size: 0.8125rem;
+        white-space: pre-wrap;
+        min-height: 2rem;
+        margin-top: 0.5rem;
+      }
+
+      .matrix {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.875rem;
+        margin-top: 1rem;
+      }
+
+      .matrix th,
+      .matrix td {
+        border: 1px solid var(--color-border);
+        padding: 0.5rem 0.75rem;
+        text-align: left;
+      }
+
+      .matrix th {
+        background: #f3f4f6;
+        font-weight: 600;
+      }
+
+      .pass {
+        color: var(--color-success);
+        font-weight: 600;
+      }
+
+      .fail {
+        color: var(--color-error);
+        font-weight: 600;
+      }
+
+      .partial {
+        color: var(--color-partial);
+        font-weight: 600;
+      }
+
+      .pending {
+        color: var(--color-text-muted);
+        font-style: italic;
+      }
+
+      #axe-results {
+        max-height: 40rem;
+        overflow-y: auto;
+      }
+
+      .axe-violation {
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: var(--radius);
+        padding: 1rem;
+        margin-bottom: 0.75rem;
+      }
+
+      .axe-violation h4 {
+        margin: 0 0 0.25rem;
+        color: var(--color-error);
+      }
+
+      .axe-pass {
+        background: #f0fdf4;
+        border: 1px solid #bbf7d0;
+        border-radius: var(--radius);
+        padding: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .axe-incomplete {
+        background: #fffbeb;
+        border: 1px solid #fde68a;
+        border-radius: var(--radius);
+        padding: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      code {
+        font-family: var(--font-mono);
+        font-size: 0.8125rem;
+        background: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 3px;
+      }
+
+      .note {
+        background: #eff6ff;
+        border-left: 3px solid var(--color-border-focus);
+        padding: 0.75rem 1rem;
+        margin: 1rem 0;
+        font-size: 0.875rem;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Form-associated custom element PoC: text field</h1>
+    <p class="subtitle">
+      Research artifact for ElementInternals and FACE patterns. Not a migration
+      of
+      <code>sp-textfield</code>
+      ; a standalone platform test.
+    </p>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 1: form participation (FormData, reset, validation)        -->
+    <!-- ================================================================== -->
+
+    <h2>1. Native form participation</h2>
+
+    <div class="scenario">
+      <h3>1a. FormData and submit</h3>
+      <form id="form-1a" novalidate>
+        <div class="field-group">
+          <label for="field-1a">Full name</label>
+          <face-text-field
+            id="field-1a"
+            name="fullname"
+            value="Jane Doe"
+          ></face-text-field>
+        </div>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+          <button type="reset">Reset</button>
+        </div>
+      </form>
+      <div class="output" id="output-1a">
+        Submit or reset the form to see results.
+      </div>
+    </div>
+
+    <div class="scenario">
+      <h3>
+        1b. Constraint validation (
+        <code>required</code>
+        +
+        <code>pattern</code>
+        )
+      </h3>
+      <form id="form-1b">
+        <div class="field-group">
+          <label for="field-1b">Username (required, lowercase only)</label>
+          <face-text-field
+            id="field-1b"
+            name="username"
+            required
+            pattern="^[a-z]+$"
+            placeholder="e.g. janedoe"
+          ></face-text-field>
+          <span class="help-text">
+            Letters a through z, no spaces or numbers.
+          </span>
+        </div>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <div class="output" id="output-1b">
+        Submit with invalid data to see constraint validation.
+      </div>
+    </div>
+
+    <div class="scenario">
+      <h3>
+        1c. Disabled state via
+        <code>fieldset</code>
+      </h3>
+      <form id="form-1c">
+        <fieldset disabled>
+          <legend>Disabled fieldset</legend>
+          <div class="field-group">
+            <label for="field-1c">Disabled field</label>
+            <face-text-field
+              id="field-1c"
+              name="disabledfield"
+              value="Cannot edit"
+            ></face-text-field>
+          </div>
+        </fieldset>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <div class="output" id="output-1c">
+        Field should be disabled via ancestor fieldset.
+      </div>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 2: IDREF matrix scenarios                                  -->
+    <!-- ================================================================== -->
+
+    <h2>2. IDREF matrix: label and description wiring</h2>
+
+    <div class="note">
+      Each scenario tests whether
+      <code>aria-labelledby</code>
+      and
+      <code>aria-describedby</code>
+      resolve correctly across shadow DOM boundaries. Inspect the accessibility
+      tree in DevTools for each.
+    </div>
+
+    <!-- Scenario A: light DOM siblings -->
+    <div class="scenario">
+      <h3>Scenario A: light DOM label and help as siblings</h3>
+      <p>
+        IDs are on elements
+        <em>outside</em>
+        the component; referenced via
+        <code>aria-labelledby</code>
+        and
+        <code>aria-describedby</code>
+        on the host.
+      </p>
+      <form id="form-2a">
+        <div class="field-group">
+          <label id="label-2a">Email address</label>
+          <face-text-field
+            id="field-2a"
+            name="email"
+            aria-labelledby="label-2a"
+            aria-describedby="help-2a"
+            type="email"
+            placeholder="user@example.com"
+          ></face-text-field>
+          <span id="help-2a" class="help-text">
+            We will never share your email.
+          </span>
+        </div>
+      </form>
+    </div>
+
+    <!-- Scenario B: slotted light DOM children with IDs -->
+    <div class="scenario">
+      <h3>Scenario B: IDs on slotted light DOM children</h3>
+      <p>
+        Consumer projects content into the component via slots; IDs live on the
+        slotted elements.
+      </p>
+      <form id="form-2b">
+        <div class="field-group">
+          <face-text-field id="field-2b" name="phone">
+            <span slot="label" id="label-2b">Phone number</span>
+            <span slot="help-text" id="help-2b" class="help-text">
+              Include country code.
+            </span>
+          </face-text-field>
+        </div>
+      </form>
+    </div>
+
+    <!-- Scenario C: shadow DOM internal IDs -->
+    <div class="scenario">
+      <h3>Scenario C: IDs inside shadow DOM (internal wiring)</h3>
+      <p>
+        Label and help text are rendered
+        <em>inside</em>
+        the shadow root. The component uses
+        <code>ElementInternals</code>
+        APIs (
+        <code>ariaLabelledByElements</code>
+        /
+        <code>ariaDescribedByElements</code>
+        where supported, or falls back to shadow-scoped IDs on the internal
+        input).
+      </p>
+      <form id="form-2c">
+        <div class="field-group">
+          <face-text-field
+            id="field-2c"
+            name="search"
+            internal-label="Search query"
+            internal-help="Type keywords to search."
+            placeholder="Search..."
+          ></face-text-field>
+        </div>
+      </form>
+    </div>
+
+    <!-- Scenario D: mixed light + shadow (cross-root) -->
+    <div class="scenario">
+      <h3>Scenario D: cross-root; light DOM label + shadow input</h3>
+      <p>
+        A
+        <code>&lt;label for="..."&gt;</code>
+        in light DOM targets the custom element host. The component uses
+        <code>delegatesFocus</code>
+        and
+        <code>ElementInternals</code>
+        to attempt forwarding.
+      </p>
+      <form id="form-2d">
+        <div class="field-group">
+          <label for="field-2d">Favorite color</label>
+          <face-text-field
+            id="field-2d"
+            name="color"
+            placeholder="e.g. blue"
+          ></face-text-field>
+          <span id="error-2d" class="error-text" hidden>
+            Please enter a color name.
+          </span>
+        </div>
+      </form>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 3: ElementInternals ARIA APIs                              -->
+    <!-- ================================================================== -->
+
+    <h2>3. ElementInternals ARIA property APIs</h2>
+
+    <div class="scenario">
+      <h3>
+        3a.
+        <code>internals.ariaLabel</code>
+        vs host
+        <code>aria-label</code>
+      </h3>
+      <form id="form-3a">
+        <face-text-field
+          id="field-3a-internals"
+          name="internals-label"
+          use-internals-aria-label="Search via internals"
+          placeholder="internals.ariaLabel"
+        ></face-text-field>
+        <face-text-field
+          id="field-3a-host"
+          name="host-label"
+          aria-label="Search via host attribute"
+          placeholder="host aria-label"
+        ></face-text-field>
+      </form>
+      <p>
+        Compare the two in the accessibility tree: which one exposes the name?
+      </p>
+    </div>
+
+    <div class="scenario">
+      <h3>
+        3b.
+        <code>setValidity()</code>
+        +
+        <code>aria-errormessage</code>
+      </h3>
+      <form id="form-3b">
+        <div class="field-group">
+          <label for="field-3b">Age (must be 18 or older)</label>
+          <face-text-field
+            id="field-3b"
+            name="age"
+            type="number"
+            min-value="18"
+            aria-describedby="help-3b"
+            aria-errormessage="error-3b"
+          ></face-text-field>
+          <span id="help-3b" class="help-text">Enter your age in years.</span>
+          <span id="error-3b" class="error-text" role="alert" hidden>
+            You must be at least 18 years old.
+          </span>
+        </div>
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <div class="output" id="output-3b">
+        Submit with a value under 18 to test error announcement.
+      </div>
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 4: axe-core audit                                          -->
+    <!-- ================================================================== -->
+
+    <h2>4. axe-core automated audit</h2>
+
+    <div class="note">
+      Loads axe-core from CDN and runs against the full page. Results show
+      violations, passes, and incomplete checks relevant to FACE patterns.
+    </div>
+
+    <button id="run-axe" type="button">Run axe-core audit</button>
+    <div id="axe-results" class="output">
+      Click the button above to run axe-core.
+    </div>
+
+    <!-- ================================================================== -->
+    <!-- SECTION 5: live IDREF matrix table (auto-populated)                -->
+    <!-- ================================================================== -->
+
+    <h2>5. IDREF matrix results</h2>
+
+    <p>
+      This table is populated by JavaScript introspection after the page loads.
+      For screen reader behavior, manual testing with VoiceOver / NVDA is
+      required; record results in the summary document.
+    </p>
+
+    <table class="matrix" id="matrix-table">
+      <thead>
+        <tr>
+          <th>Scenario</th>
+          <th>Label wiring</th>
+          <th>Description wiring</th>
+          <th>a11y tree name</th>
+          <th>a11y tree description</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody id="matrix-body"></tbody>
+    </table>
+
+    <!-- ================================================================== -->
+    <!-- COMPONENT DEFINITION                                               -->
+    <!-- ================================================================== -->
+
+    <script>
+      /**
+       * Minimal form-associated text field custom element.
+       *
+       * Demonstrates:
+       * - static formAssociated = true
+       * - ElementInternals for form value, validation, and ARIA
+       * - Slot-based and shadow-internal labelling
+       * - Constraint validation hooks (setValidity, reportValidity)
+       * - formResetCallback, formDisabledCallback, formStateRestoreCallback
+       */
+      class FaceTextField extends HTMLElement {
+        static formAssociated = true;
+
+        static get observedAttributes() {
+          return [
+            'value',
+            'name',
+            'required',
+            'pattern',
+            'placeholder',
+            'type',
+            'disabled',
+            'internal-label',
+            'internal-help',
+            'use-internals-aria-label',
+            'min-value',
+            'aria-labelledby',
+            'aria-describedby',
+            'aria-errormessage',
+          ];
+        }
+
+        #internals;
+        #input;
+        #shadowLabel;
+        #shadowHelp;
+
+        constructor() {
+          super();
+          this.#internals = this.attachInternals();
+
+          const shadow = this.attachShadow({
+            mode: 'open',
+            delegatesFocus: true,
+          });
+          shadow.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          flex-direction: column;
+          gap: 4px;
+          min-width: 200px;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+          pointer-events: none;
+        }
+
+        .internal-label {
+          font-weight: 600;
+          font-size: 0.875rem;
+        }
+
+        .internal-help {
+          font-size: 0.8125rem;
+          color: #6b7280;
+        }
+
+        input {
+          font: inherit;
+          padding: 0.5rem 0.75rem;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          outline: none;
+          transition: border-color 0.15s;
+        }
+
+        input:focus {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+        }
+
+        input:disabled {
+          background: #f3f4f6;
+          cursor: not-allowed;
+        }
+
+        :host(:state(invalid)) input,
+        input:invalid {
+          border-color: #dc2626;
+        }
+
+        ::slotted([slot='label']) {
+          font-weight: 600;
+          font-size: 0.875rem;
+        }
+
+        ::slotted([slot='help-text']) {
+          font-size: 0.8125rem;
+          color: #6b7280;
+        }
+      </style>
+
+      <slot name="label"></slot>
+      <span class="internal-label" id="shadow-label" hidden></span>
+
+      <input id="internal-input" part="input" />
+
+      <slot name="help-text"></slot>
+      <span class="internal-help" id="shadow-help" hidden></span>
+    `;
+
+          this.#input = shadow.getElementById('internal-input');
+          this.#shadowLabel = shadow.getElementById('shadow-label');
+          this.#shadowHelp = shadow.getElementById('shadow-help');
+
+          this.#input.addEventListener('input', () => {
+            this.#syncValue();
+            this.#validate();
+          });
+
+          this.#input.addEventListener('change', () => {
+            this.#validate();
+          });
+        }
+
+        connectedCallback() {
+          this.#syncFromAttributes();
+          this.#syncValue();
+          this.#wireAriaRelationships();
+        }
+
+        attributeChangedCallback(name, _oldVal, newVal) {
+          switch (name) {
+            case 'value':
+              if (this.#input && this.#input.value !== newVal) {
+                this.#input.value = newVal ?? '';
+                this.#syncValue();
+              }
+              break;
+            case 'placeholder':
+              if (this.#input) this.#input.placeholder = newVal ?? '';
+              break;
+            case 'type':
+              if (this.#input) this.#input.type = newVal ?? 'text';
+              break;
+            case 'required':
+              if (this.#input) this.#input.required = newVal !== null;
+              break;
+            case 'pattern':
+              if (this.#input) this.#input.pattern = newVal ?? '';
+              break;
+            case 'disabled':
+              if (this.#input) this.#input.disabled = newVal !== null;
+              break;
+            case 'internal-label':
+              this.#updateInternalLabel(newVal);
+              break;
+            case 'internal-help':
+              this.#updateInternalHelp(newVal);
+              break;
+            case 'use-internals-aria-label':
+              if (newVal !== null) {
+                this.#internals.ariaLabel = newVal;
+              }
+              break;
+            case 'min-value':
+            case 'aria-labelledby':
+            case 'aria-describedby':
+            case 'aria-errormessage':
+              this.#wireAriaRelationships();
+              break;
+          }
+        }
+
+        /** @see https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements */
+
+        get form() {
+          return this.#internals.form;
+        }
+
+        get name() {
+          return this.getAttribute('name');
+        }
+
+        get type() {
+          return this.localName;
+        }
+
+        get value() {
+          return this.#input?.value ?? '';
+        }
+
+        set value(v) {
+          if (this.#input) {
+            this.#input.value = v;
+            this.#syncValue();
+          }
+        }
+
+        get validity() {
+          return this.#internals.validity;
+        }
+
+        get validationMessage() {
+          return this.#internals.validationMessage;
+        }
+
+        get willValidate() {
+          return this.#internals.willValidate;
+        }
+
+        checkValidity() {
+          return this.#internals.checkValidity();
+        }
+
+        reportValidity() {
+          return this.#internals.reportValidity();
+        }
+
+        /** Called when the associated form is reset. */
+        formResetCallback() {
+          const defaultValue = this.getAttribute('value') ?? '';
+          this.#input.value = defaultValue;
+          this.#syncValue();
+          this.#validate();
+          this.#clearErrorState();
+        }
+
+        /** Called when the element's disabled state changes via a fieldset or form. */
+        formDisabledCallback(disabled) {
+          this.#input.disabled = disabled;
+          if (disabled) {
+            this.setAttribute('disabled', '');
+          } else {
+            this.removeAttribute('disabled');
+          }
+        }
+
+        /** Called when browser restores form state (back/forward). */
+        formStateRestoreCallback(state, _mode) {
+          this.#input.value = state ?? '';
+          this.#syncValue();
+        }
+
+        // -- Private methods -------------------------------------------------------
+
+        #syncFromAttributes() {
+          const attrs = {
+            value: '',
+            placeholder: '',
+            type: 'text',
+          };
+          for (const [attr, fallback] of Object.entries(attrs)) {
+            const val = this.getAttribute(attr) ?? fallback;
+            if (attr === 'value') {
+              this.#input.value = val;
+            } else {
+              this.#input[attr] = val;
+            }
+          }
+
+          if (this.hasAttribute('required')) this.#input.required = true;
+          if (this.hasAttribute('pattern'))
+            this.#input.pattern = this.getAttribute('pattern');
+          if (this.hasAttribute('disabled')) this.#input.disabled = true;
+
+          const internalLabel = this.getAttribute('internal-label');
+          if (internalLabel) this.#updateInternalLabel(internalLabel);
+
+          const internalHelp = this.getAttribute('internal-help');
+          if (internalHelp) this.#updateInternalHelp(internalHelp);
+
+          const internalsAriaLabel = this.getAttribute(
+            'use-internals-aria-label'
+          );
+          if (internalsAriaLabel)
+            this.#internals.ariaLabel = internalsAriaLabel;
+        }
+
+        #syncValue() {
+          this.#internals.setFormValue(this.#input.value);
+        }
+
+        #validate() {
+          const input = this.#input;
+
+          const minValue = this.getAttribute('min-value');
+          if (minValue !== null && input.value !== '') {
+            const num = parseFloat(input.value);
+            if (!isNaN(num) && num < parseFloat(minValue)) {
+              this.#internals.setValidity(
+                { rangeUnderflow: true },
+                `Value must be at least ${minValue}.`,
+                input
+              );
+              this.#showErrorState();
+              return;
+            }
+          }
+
+          if (!input.validity.valid) {
+            this.#internals.setValidity(
+              input.validity,
+              input.validationMessage,
+              input
+            );
+            this.#showErrorState();
+          } else {
+            this.#internals.setValidity({});
+            this.#clearErrorState();
+          }
+        }
+
+        #showErrorState() {
+          this.#internals.ariaInvalid = 'true';
+          const errorId = this.getAttribute('aria-errormessage');
+          if (errorId) {
+            const errorEl = document.getElementById(errorId);
+            if (errorEl) errorEl.hidden = false;
+          }
+        }
+
+        #clearErrorState() {
+          this.#internals.ariaInvalid = 'false';
+          const errorId = this.getAttribute('aria-errormessage');
+          if (errorId) {
+            const errorEl = document.getElementById(errorId);
+            if (errorEl) errorEl.hidden = true;
+          }
+        }
+
+        #updateInternalLabel(text) {
+          if (text) {
+            this.#shadowLabel.textContent = text;
+            this.#shadowLabel.hidden = false;
+            this.#input.setAttribute('aria-labelledby', 'shadow-label');
+          } else {
+            this.#shadowLabel.hidden = true;
+            this.#input.removeAttribute('aria-labelledby');
+          }
+        }
+
+        #updateInternalHelp(text) {
+          if (text) {
+            this.#shadowHelp.textContent = text;
+            this.#shadowHelp.hidden = false;
+            const existing = this.#input.getAttribute('aria-describedby') ?? '';
+            if (!existing.includes('shadow-help')) {
+              this.#input.setAttribute(
+                'aria-describedby',
+                (existing + ' shadow-help').trim()
+              );
+            }
+          } else {
+            this.#shadowHelp.hidden = true;
+          }
+        }
+
+        #wireAriaRelationships() {
+          if (!this.#input) return;
+
+          const tryElementRefs =
+            typeof this.#internals.ariaLabelledByElements !== 'undefined';
+
+          const labelledby = this.getAttribute('aria-labelledby');
+          if (labelledby && !this.getAttribute('internal-label')) {
+            if (tryElementRefs) {
+              const els = labelledby
+                .split(/\s+/)
+                .map((id) => document.getElementById(id))
+                .filter(Boolean);
+              if (els.length > 0) {
+                this.#internals.ariaLabelledByElements = els;
+              }
+            }
+            this.#internals.ariaLabel =
+              this.#internals.ariaLabel || this.#resolveTextFromIds(labelledby);
+          }
+
+          const describedby = this.getAttribute('aria-describedby');
+          if (describedby && !this.getAttribute('internal-help')) {
+            if (tryElementRefs) {
+              const els = describedby
+                .split(/\s+/)
+                .map((id) => document.getElementById(id))
+                .filter(Boolean);
+              if (els.length > 0) {
+                this.#internals.ariaDescribedByElements = els;
+              }
+            }
+          }
+
+          this.#handleSlotWiring();
+        }
+
+        #handleSlotWiring() {
+          const labelSlot = this.shadowRoot.querySelector('slot[name="label"]');
+          const helpSlot = this.shadowRoot.querySelector(
+            'slot[name="help-text"]'
+          );
+
+          if (labelSlot) {
+            labelSlot.addEventListener('slotchange', () => {
+              const assigned = labelSlot.assignedElements();
+              if (assigned.length > 0) {
+                const labelEl = assigned[0];
+                const labelId =
+                  labelEl.id || `slotted-label-${this.id || Date.now()}`;
+                labelEl.id = labelId;
+
+                if (
+                  typeof this.#internals.ariaLabelledByElements !== 'undefined'
+                ) {
+                  this.#internals.ariaLabelledByElements = [labelEl];
+                } else {
+                  this.#input.setAttribute('aria-labelledby', labelId);
+                }
+              }
+            });
+          }
+
+          if (helpSlot) {
+            helpSlot.addEventListener('slotchange', () => {
+              const assigned = helpSlot.assignedElements();
+              if (assigned.length > 0) {
+                const helpEl = assigned[0];
+                const helpId =
+                  helpEl.id || `slotted-help-${this.id || Date.now()}`;
+                helpEl.id = helpId;
+
+                if (
+                  typeof this.#internals.ariaDescribedByElements !== 'undefined'
+                ) {
+                  this.#internals.ariaDescribedByElements = [helpEl];
+                } else {
+                  this.#input.setAttribute('aria-describedby', helpId);
+                }
+              }
+            });
+          }
+        }
+
+        #resolveTextFromIds(idList) {
+          return idList
+            .split(/\s+/)
+            .map((id) => document.getElementById(id)?.textContent?.trim() ?? '')
+            .filter(Boolean)
+            .join(' ');
+        }
+      }
+
+      customElements.define('face-text-field', FaceTextField);
+
+      // ===================================================================
+      // Form event handlers
+      // ===================================================================
+
+      document.getElementById('form-1a').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const data = new FormData(e.target);
+        const out = document.getElementById('output-1a');
+        const entries = [...data.entries()];
+        out.textContent =
+          'FormData entries:\n' +
+          entries.map(([k, v]) => `  ${k}: "${v}"`).join('\n') +
+          '\n\nForm participation: ' +
+          (entries.length > 0 ? 'PASS' : 'FAIL');
+      });
+
+      document.getElementById('form-1a').addEventListener('reset', () => {
+        const out = document.getElementById('output-1a');
+        requestAnimationFrame(() => {
+          const field = document.getElementById('field-1a');
+          out.textContent = `Reset fired.\nValue after reset: "${field.value}"\nformResetCallback: ${field.value === 'Jane Doe' ? 'PASS' : 'FAIL'}`;
+        });
+      });
+
+      document.getElementById('form-1b').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const field = document.getElementById('field-1b');
+        const out = document.getElementById('output-1b');
+        const valid = field.reportValidity();
+        out.textContent =
+          `reportValidity(): ${valid}\n` +
+          `validity.valid: ${field.validity.valid}\n` +
+          `validity.valueMissing: ${field.validity.valueMissing}\n` +
+          `validity.patternMismatch: ${field.validity.patternMismatch}\n` +
+          `validationMessage: "${field.validationMessage}"\n\n` +
+          `Constraint validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input'}`;
+      });
+
+      document.getElementById('form-1c').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const field = document.getElementById('field-1c');
+        const out = document.getElementById('output-1c');
+        const data = new FormData(e.target);
+        const shadowInput = field.shadowRoot?.querySelector('input');
+        out.textContent =
+          `Shadow input disabled: ${shadowInput?.disabled ?? 'N/A'}\n` +
+          `Host has disabled attr: ${field.hasAttribute('disabled')}\n` +
+          `formDisabledCallback: fires when fieldset is disabled\n` +
+          `FormData includes field: ${data.has('disabledfield') ? 'YES (unexpected)' : 'NO (correct)'}\n\n` +
+          `Disabled via fieldset: ${!data.has('disabledfield') ? 'PASS' : 'FAIL'}`;
+      });
+
+      document.getElementById('form-3b').addEventListener('submit', (e) => {
+        e.preventDefault();
+        const field = document.getElementById('field-3b');
+        const out = document.getElementById('output-3b');
+        const valid = field.reportValidity();
+        out.textContent =
+          `reportValidity(): ${valid}\n` +
+          `validity.valid: ${field.validity.valid}\n` +
+          `validity.rangeUnderflow: ${field.validity.rangeUnderflow}\n` +
+          `validationMessage: "${field.validationMessage}"\n` +
+          `aria-invalid on internals: ${field.getAttribute('aria-invalid') ?? '(check internals)'}\n\n` +
+          `Custom validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input value'}`;
+      });
+
+      // ===================================================================
+      // IDREF matrix introspection
+      // ===================================================================
+
+      function populateMatrix() {
+        const scenarios = [
+          {
+            id: 'A',
+            name: 'Light DOM siblings',
+            fieldId: 'field-2a',
+            labelMethod: 'aria-labelledby on host → light DOM #label-2a',
+            descMethod: 'aria-describedby on host → light DOM #help-2a',
+          },
+          {
+            id: 'B',
+            name: 'Slotted light DOM children',
+            fieldId: 'field-2b',
+            labelMethod: 'Slotted <span slot="label"> with ID',
+            descMethod: 'Slotted <span slot="help-text"> with ID',
+          },
+          {
+            id: 'C',
+            name: 'Shadow DOM internal IDs',
+            fieldId: 'field-2c',
+            labelMethod: 'internal-label attr → shadow #shadow-label',
+            descMethod: 'internal-help attr → shadow #shadow-help',
+          },
+          {
+            id: 'D',
+            name: 'Cross-root (label for → host)',
+            fieldId: 'field-2d',
+            labelMethod: '<label for="field-2d"> in light DOM',
+            descMethod: 'N/A (no describedby set)',
+          },
+        ];
+
+        const tbody = document.getElementById('matrix-body');
+        tbody.innerHTML = '';
+
+        for (const s of scenarios) {
+          const field = document.getElementById(s.fieldId);
+          if (!field) continue;
+
+          const internals = field.internals ?? null;
+
+          let a11yName = '(inspect DevTools)';
+          let a11yDesc = '(inspect DevTools)';
+          let status = 'pending';
+
+          try {
+            const ariaLabel = field.getAttribute('aria-label') || '';
+            const labelledby = field.getAttribute('aria-labelledby') || '';
+            const describedby = field.getAttribute('aria-describedby') || '';
+
+            if (ariaLabel) {
+              a11yName = `aria-label: "${ariaLabel}"`;
+            } else if (labelledby) {
+              const text = labelledby
+                .split(/\s+/)
+                .map((id) => document.getElementById(id)?.textContent?.trim())
+                .filter(Boolean)
+                .join(' ');
+              a11yName = text
+                ? `Resolved: "${text}"`
+                : `IDs not found: ${labelledby}`;
+            }
+
+            if (describedby) {
+              const text = describedby
+                .split(/\s+/)
+                .map((id) => document.getElementById(id)?.textContent?.trim())
+                .filter(Boolean)
+                .join(' ');
+              a11yDesc = text
+                ? `Resolved: "${text}"`
+                : `IDs not found: ${describedby}`;
+            }
+          } catch {
+            // Introspection may fail in some browsers
+          }
+
+          const row = document.createElement('tr');
+          row.innerHTML = `
+      <td><strong>${s.id}:</strong> ${s.name}</td>
+      <td><code>${escapeHtml(s.labelMethod)}</code></td>
+      <td><code>${escapeHtml(s.descMethod)}</code></td>
+      <td>${a11yName}</td>
+      <td>${a11yDesc}</td>
+      <td class="${status}">${status}</td>
+    `;
+          tbody.appendChild(row);
+        }
+      }
+
+      function escapeHtml(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+      }
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(populateMatrix);
+      });
+
+      // ===================================================================
+      // axe-core integration
+      // ===================================================================
+
+      document.getElementById('run-axe').addEventListener('click', async () => {
+        const resultsEl = document.getElementById('axe-results');
+        resultsEl.textContent = 'Loading axe-core...';
+
+        try {
+          if (!window.axe) {
+            await loadScript(
+              'https://cdn.jsdelivr.net/npm/axe-core@4.10.2/axe.min.js'
+            );
+          }
+
+          resultsEl.textContent = 'Running audit...';
+
+          const results = await window.axe.run(document, {
+            runOnly: {
+              type: 'tag',
+              values: [
+                'wcag2a',
+                'wcag2aa',
+                'wcag21a',
+                'wcag21aa',
+                'best-practice',
+              ],
+            },
+          });
+
+          let html = '';
+
+          html += `<h3>Violations (${results.violations.length})</h3>`;
+          if (results.violations.length === 0) {
+            html += '<div class="axe-pass">No violations found.</div>';
+          }
+          for (const v of results.violations) {
+            html += `
+        <div class="axe-violation">
+          <h4>${escapeHtml(v.id)}: ${escapeHtml(v.help)}</h4>
+          <p><strong>Impact:</strong> ${v.impact} | <strong>Tags:</strong> ${v.tags.join(', ')}</p>
+          <p>${escapeHtml(v.description)}</p>
+          <details>
+            <summary>Affected nodes (${v.nodes.length})</summary>
+            <ul>
+              ${v.nodes.map((n) => `<li><code>${escapeHtml(n.html)}</code><br/>${escapeHtml(n.failureSummary ?? '')}</li>`).join('')}
+            </ul>
+          </details>
+          ${v.helpUrl ? `<p><a href="${v.helpUrl}" target="_blank">Deque reference</a></p>` : ''}
+        </div>
+      `;
+          }
+
+          html += `<h3>Incomplete / needs review (${results.incomplete.length})</h3>`;
+          for (const inc of results.incomplete) {
+            html += `
+        <div class="axe-incomplete">
+          <strong>${escapeHtml(inc.id)}</strong>: ${escapeHtml(inc.help)}<br/>
+          <small>Nodes: ${inc.nodes.length} | Tags: ${inc.tags.join(', ')}</small>
+          ${inc.helpUrl ? ` | <a href="${inc.helpUrl}" target="_blank">Reference</a>` : ''}
+        </div>
+      `;
+          }
+
+          const relevantPasses = results.passes.filter((p) =>
+            [
+              'label',
+              'aria-label',
+              'aria-labelledby',
+              'form-field-multiple-labels',
+              'aria-valid-attr',
+              'aria-valid-attr-value',
+              'aria-roles',
+              'label-title-only',
+              'aria-input-field-name',
+            ].some((id) => p.id.includes(id))
+          );
+          html += `<h3>Relevant passes (${relevantPasses.length} of ${results.passes.length} total)</h3>`;
+          for (const p of relevantPasses) {
+            html += `<div class="axe-pass"><strong>${escapeHtml(p.id)}</strong>: ${escapeHtml(p.help)}</div>`;
+          }
+
+          resultsEl.innerHTML = html;
+        } catch (err) {
+          resultsEl.textContent = `Error loading or running axe-core:\n${err.message}\n\nNote: axe-core requires network access to load from CDN.`;
+        }
+      });
+
+      function loadScript(src) {
+        return new Promise((resolve, reject) => {
+          const s = document.createElement('script');
+          s.src = src;
+          s.onload = resolve;
+          s.onerror = () => reject(new Error(`Failed to load ${src}`));
+          document.head.appendChild(s);
+        });
+      }
+    </script>
+  </body>
+</html>

From 06b8ee5f9ac50c5bdc77bd986ad972cce1a963f1 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Fri, 15 May 2026 17:05:44 +0530
Subject: [PATCH 02/13] chore: add StackBlitz config for FACE text field PoC

- add minimal Vite package.json so StackBlitz can serve the demo
- update SUMMARY.md with live StackBlitz link

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md   | 15 +++++++++------
 research/form-associated-ce-poc/package.json | 12 ++++++++++++
 2 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 research/form-associated-ce-poc/package.json

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
index bac60f5a5e..ab9bfb3173 100644
--- a/research/form-associated-ce-poc/SUMMARY.md
+++ b/research/form-associated-ce-poc/SUMMARY.md
@@ -5,8 +5,10 @@
 
 ## Demo
 
-Open `index.html` in any browser (or paste into CodePen) to interact with the PoC.
-No build step, no dependencies; axe-core loads from CDN on demand.
+**StackBlitz:** [Open live demo](https://stackblitz.com/github/adobe/spectrum-web-components/tree/rajdeepchandra/chore-face-textfield-poc-swc-2052/research/form-associated-ce-poc?file=index.html)
+
+Or open `index.html` locally in any browser (no build step required).
+axe-core loads from CDN on demand when you click the audit button.
 
 ---
 
@@ -315,7 +317,8 @@ The 1st-gen `TextfieldBase` (in `1st-gen/packages/textfield/src/Textfield.ts`) u
 
 ## 11. Files in this PoC
 
-| File         | Purpose                                                  |
-| ------------ | -------------------------------------------------------- |
-| `index.html` | Self-contained demo; paste into CodePen or serve locally |
-| `SUMMARY.md` | This document; internal findings for the direction PR    |
+| File           | Purpose                                                        |
+| -------------- | -------------------------------------------------------------- |
+| `index.html`   | Self-contained demo; opens directly in StackBlitz or a browser |
+| `SUMMARY.md`   | This document; internal findings for the direction PR          |
+| `package.json` | Minimal Vite config so StackBlitz can serve the demo           |
diff --git a/research/form-associated-ce-poc/package.json b/research/form-associated-ce-poc/package.json
new file mode 100644
index 0000000000..b57916b3be
--- /dev/null
+++ b/research/form-associated-ce-poc/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "face-textfield-poc",
+  "private": true,
+  "description": "Form-associated custom element PoC: text field with ElementInternals",
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^6"
+  }
+}

From cca27a835169221c9d08deca66f979566e440e64 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Sun, 17 May 2026 12:23:56 +0530
Subject: [PATCH 03/13] fix: validate on connect and before reportValidity

- #validate() only ran on input/change events, so an untouched empty
required field reported validity.valid: true
- call #validate() in connectedCallback and before checkValidity /
reportValidity so internals always reflect the shadow input state

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index 3cfb82836b..4de5c08cb6 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -693,6 +693,7 @@ <h2>5. IDREF matrix results</h2>
         connectedCallback() {
           this.#syncFromAttributes();
           this.#syncValue();
+          this.#validate();
           this.#wireAriaRelationships();
         }
 
@@ -777,10 +778,12 @@ <h2>5. IDREF matrix results</h2>
         }
 
         checkValidity() {
+          this.#validate();
           return this.#internals.checkValidity();
         }
 
         reportValidity() {
+          this.#validate();
           return this.#internals.reportValidity();
         }
 

From 57a2df0b3187b8285dae9f733dfefaf33055addd Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Sun, 17 May 2026 13:04:34 +0530
Subject: [PATCH 04/13] fix: add aria fallbacks and validation form handling in
 face poc

- add novalidate to forms 1b and 3b so the JS submit handler runs
instead of native browser validation blocking the event
- wrap ariaLabelledByElements/ariaDescribedByElements assignments in
try-catch so the ariaLabel/ariaDescription string fallback always
executes
- add ariaLabel string fallback for slotted label/help-text wiring
(scenario B) and implicit label association (scenario D)
- add ariaDescription string fallback for host aria-describedby and
slotted help-text
- update SUMMARY.md with automated test results table from Chrome
headless run

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md |  31 +++++-
 research/form-associated-ce-poc/index.html | 119 +++++++++++++++------
 2 files changed, 117 insertions(+), 33 deletions(-)

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
index ab9bfb3173..24bacc92f3 100644
--- a/research/form-associated-ce-poc/SUMMARY.md
+++ b/research/form-associated-ce-poc/SUMMARY.md
@@ -12,6 +12,27 @@ axe-core loads from CDN on demand when you click the audit button.
 
 ---
 
+## Automated test results (Chrome headless)
+
+| Test                    | Expected                         | Actual                                        | Status  |
+| ----------------------- | -------------------------------- | --------------------------------------------- | ------- |
+| 1a Submit               | FormData includes fullname       | fullname: "Jane Doe"                          | Pass    |
+| 1a Reset                | Restores to Jane Doe             | formResetCallback: PASS                       | Pass    |
+| 1b Empty required       | valueMissing: true               | Correctly rejected                            | Pass    |
+| 1b Pattern (uppercase)  | patternMismatch: true            | Correctly rejected                            | Pass    |
+| 1b Valid input          | validity.valid: true             | Accepted                                      | Pass    |
+| 1c Disabled fieldset    | Field excluded from FormData     | FormData: NO (correct)                        | Pass    |
+| 2A Light DOM siblings   | Name = "Email address"           | Resolved via `ariaLabel` fallback             | Pass    |
+| 2B Slotted children     | Name from slotted label          | Resolved via `ariaLabel` fallback             | Pass    |
+| 2C Shadow internal      | Name = "Search query"            | Direct shadow-scoped IDREF                    | Pass    |
+| 2D Cross-root label-for | Click label focuses field + name | Focus: pass; name via implicit label fallback | Partial |
+| 3a internals.ariaLabel  | Exposes name in a11y tree        | "Search via internals"                        | Pass    |
+| 3a host aria-label      | Exposes name in a11y tree        | "Search via host attribute"                   | Pass    |
+| 3b setValidity          | rangeUnderflow + error shown     | Error visible, validity correct               | Pass    |
+| 4 axe-core              | Audit runs, results shown        | 4 violations (color-contrast only)            | Pass    |
+
+---
+
 ## 1. Does native form submission and reset see the control's value?
 
 ### FormData
@@ -153,13 +174,21 @@ A native `<label for="field-id">` in light DOM targets the custom element host.
 
 ## 4. axe-core findings
 
+### Automated test results (Chrome headless, axe-core 4.10.2)
+
+| axe rule         | Observed                                                               | Classification   | Notes                                                                  |
+| ---------------- | ---------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------- |
+| `color-contrast` | 4 violations, 5 nodes (help text and placeholder contrast below 4.5:1) | True violation   | Fixable with darker text colors; not related to ElementInternals       |
+| `label`          | Did not flag FACE elements with `internals.ariaLabel` set              | Correctly passed | When `ariaLabel` string fallback is set, axe can read it from the host |
+| `color-contrast` | Shadow input text passes                                               | True pass        | axe traverses into open shadow roots for contrast checks               |
+
 ### Expected violations and false positives
 
 | axe rule                     | Behavior                                                  | Classification                                     | Notes                                                                                                |
 | ---------------------------- | --------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
 | `label`                      | May flag custom element as an input without a label       | False positive if `ariaLabel` is set via internals | axe cannot always read `ElementInternals` ARIA; Deque tracking under elementInternals-labeled issues |
 | `aria-input-field-name`      | May report missing accessible name on custom element host | False positive when name is set via internals      | Same root cause; axe inspects attributes, not internals                                              |
-| `color-contrast`             | Passes for the shadow input                               | True pass                                          | axe traverses into open shadow roots for contrast checks                                             |
+| `color-contrast`             | Flags help text and placeholder contrast                  | True violation                                     | Not FACE-specific; fix with darker muted text colors                                                 |
 | `form-field-multiple-labels` | N/A for this PoC                                          | N/A                                                | Would apply if both `<label for>` and `aria-labelledby` were active simultaneously                   |
 | `aria-valid-attr-value`      | Passes when IDREFs resolve in the same scope              | True pass                                          | Only fails if an IDREF points to a nonexistent ID in the same scope                                  |
 
diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index 4de5c08cb6..61a95ed007 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -284,7 +284,7 @@ <h3>
         <code>pattern</code>
         )
       </h3>
-      <form id="form-1b">
+      <form id="form-1b" novalidate>
         <div class="field-group">
           <label for="field-1b">Username (required, lowercase only)</label>
           <face-text-field
@@ -491,7 +491,7 @@ <h3>
         +
         <code>aria-errormessage</code>
       </h3>
-      <form id="form-3b">
+      <form id="form-3b" novalidate>
         <div class="field-group">
           <label for="field-3b">Age (must be 18 or older)</label>
           <face-text-field
@@ -695,6 +695,29 @@ <h2>5. IDREF matrix results</h2>
           this.#syncValue();
           this.#validate();
           this.#wireAriaRelationships();
+          this.#wireImplicitLabel();
+        }
+
+        /**
+         * If a <label for="..."> in light DOM targets this host,
+         * browsers may not consistently expose the implicit label
+         * on the internals' a11y node. Read the label text and set
+         * ariaLabel as a fallback when no explicit labelling exists.
+         */
+        #wireImplicitLabel() {
+          requestAnimationFrame(() => {
+            if (this.#internals.ariaLabel) return;
+            const labels = this.#internals.labels;
+            if (labels && labels.length > 0) {
+              const text = Array.from(labels)
+                .map((l) => l.textContent?.trim())
+                .filter(Boolean)
+                .join(' ');
+              if (text) {
+                this.#internals.ariaLabel = text;
+              }
+            }
+          });
         }
 
         attributeChangedCallback(name, _oldVal, newVal) {
@@ -929,35 +952,51 @@ <h2>5. IDREF matrix results</h2>
         #wireAriaRelationships() {
           if (!this.#input) return;
 
-          const tryElementRefs =
-            typeof this.#internals.ariaLabelledByElements !== 'undefined';
+          const supportsElementRefs =
+            'ariaLabelledByElements' in this.#internals;
 
           const labelledby = this.getAttribute('aria-labelledby');
           if (labelledby && !this.getAttribute('internal-label')) {
-            if (tryElementRefs) {
-              const els = labelledby
-                .split(/\s+/)
-                .map((id) => document.getElementById(id))
-                .filter(Boolean);
-              if (els.length > 0) {
-                this.#internals.ariaLabelledByElements = els;
+            if (supportsElementRefs) {
+              try {
+                const els = labelledby
+                  .split(/\s+/)
+                  .map((id) => document.getElementById(id))
+                  .filter(Boolean);
+                if (els.length > 0) {
+                  this.#internals.ariaLabelledByElements = els;
+                }
+              } catch {
+                // element-ref API may exist but reject assignments
               }
             }
-            this.#internals.ariaLabel =
-              this.#internals.ariaLabel || this.#resolveTextFromIds(labelledby);
+            const resolvedName = this.#resolveTextFromIds(labelledby);
+            if (resolvedName) {
+              this.#internals.ariaLabel =
+                this.#internals.ariaLabel || resolvedName;
+            }
           }
 
           const describedby = this.getAttribute('aria-describedby');
           if (describedby && !this.getAttribute('internal-help')) {
-            if (tryElementRefs) {
-              const els = describedby
-                .split(/\s+/)
-                .map((id) => document.getElementById(id))
-                .filter(Boolean);
-              if (els.length > 0) {
-                this.#internals.ariaDescribedByElements = els;
+            if (supportsElementRefs) {
+              try {
+                const els = describedby
+                  .split(/\s+/)
+                  .map((id) => document.getElementById(id))
+                  .filter(Boolean);
+                if (els.length > 0) {
+                  this.#internals.ariaDescribedByElements = els;
+                }
+              } catch {
+                // element-ref API may exist but reject assignments
               }
             }
+            const resolvedDesc = this.#resolveTextFromIds(describedby);
+            if (resolvedDesc) {
+              this.#internals.ariaDescription =
+                this.#internals.ariaDescription || resolvedDesc;
+            }
           }
 
           this.#handleSlotWiring();
@@ -978,12 +1017,21 @@ <h2>5. IDREF matrix results</h2>
                   labelEl.id || `slotted-label-${this.id || Date.now()}`;
                 labelEl.id = labelId;
 
-                if (
-                  typeof this.#internals.ariaLabelledByElements !== 'undefined'
-                ) {
-                  this.#internals.ariaLabelledByElements = [labelEl];
-                } else {
-                  this.#input.setAttribute('aria-labelledby', labelId);
+                const supportsElementRefs =
+                  'ariaLabelledByElements' in this.#internals;
+                let elementRefWorked = false;
+                if (supportsElementRefs) {
+                  try {
+                    this.#internals.ariaLabelledByElements = [labelEl];
+                    elementRefWorked = true;
+                  } catch {
+                    // fall through to string fallback
+                  }
+                }
+                const labelText = labelEl.textContent?.trim();
+                if (labelText) {
+                  this.#internals.ariaLabel =
+                    this.#internals.ariaLabel || labelText;
                 }
               }
             });
@@ -998,12 +1046,19 @@ <h2>5. IDREF matrix results</h2>
                   helpEl.id || `slotted-help-${this.id || Date.now()}`;
                 helpEl.id = helpId;
 
-                if (
-                  typeof this.#internals.ariaDescribedByElements !== 'undefined'
-                ) {
-                  this.#internals.ariaDescribedByElements = [helpEl];
-                } else {
-                  this.#input.setAttribute('aria-describedby', helpId);
+                const supportsElementRefs =
+                  'ariaDescribedByElements' in this.#internals;
+                if (supportsElementRefs) {
+                  try {
+                    this.#internals.ariaDescribedByElements = [helpEl];
+                  } catch {
+                    // fall through to string fallback
+                  }
+                }
+                const helpText = helpEl.textContent?.trim();
+                if (helpText) {
+                  this.#internals.ariaDescription =
+                    this.#internals.ariaDescription || helpText;
                 }
               }
             });

From cdec6aabcd80611ad35a123a016642e45c770342 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Sun, 17 May 2026 13:38:41 +0530
Subject: [PATCH 05/13] fix: forward resolved labels to shadow input, not just
 internals

- internals.ariaLabel sets the name on the host a11y node, but
browsers expose the shadow input as the primary control; screen
readers and axe read the input node, not the host
- add #applyLabel/#applyDescription helpers that set the name on
both internals (for spec compliance) and the shadow input (for
actual screen reader exposure)
- use the helpers for all labelling paths: host aria-labelledby,
slotted content, internals aria-label, and implicit label-for

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/index.html | 68 +++++++++++-----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index 61a95ed007..bc02d4261d 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -706,16 +706,14 @@ <h2>5. IDREF matrix results</h2>
          */
         #wireImplicitLabel() {
           requestAnimationFrame(() => {
-            if (this.#internals.ariaLabel) return;
+            if (this.#input.hasAttribute('aria-label')) return;
             const labels = this.#internals.labels;
             if (labels && labels.length > 0) {
               const text = Array.from(labels)
                 .map((l) => l.textContent?.trim())
                 .filter(Boolean)
                 .join(' ');
-              if (text) {
-                this.#internals.ariaLabel = text;
-              }
+              if (text) this.#applyLabel(text);
             }
           });
         }
@@ -751,7 +749,7 @@ <h2>5. IDREF matrix results</h2>
               break;
             case 'use-internals-aria-label':
               if (newVal !== null) {
-                this.#internals.ariaLabel = newVal;
+                this.#applyLabel(newVal);
               }
               break;
             case 'min-value':
@@ -866,8 +864,7 @@ <h2>5. IDREF matrix results</h2>
           const internalsAriaLabel = this.getAttribute(
             'use-internals-aria-label'
           );
-          if (internalsAriaLabel)
-            this.#internals.ariaLabel = internalsAriaLabel;
+          if (internalsAriaLabel) this.#applyLabel(internalsAriaLabel);
         }
 
         #syncValue() {
@@ -949,6 +946,29 @@ <h2>5. IDREF matrix results</h2>
           }
         }
 
+        /**
+         * Key finding: internals.ariaLabel sets the name on the HOST
+         * a11y node, but browsers expose the SHADOW INPUT as the
+         * primary control. Both must carry the label for consistent
+         * screen reader behavior.
+         */
+        #applyLabel(text) {
+          if (!text) return;
+          this.#internals.ariaLabel = this.#internals.ariaLabel || text;
+          if (!this.#input.hasAttribute('aria-labelledby')) {
+            this.#input.setAttribute('aria-label', text);
+          }
+        }
+
+        #applyDescription(text) {
+          if (!text) return;
+          this.#internals.ariaDescription =
+            this.#internals.ariaDescription || text;
+          if (!this.#input.hasAttribute('aria-describedby')) {
+            this.#input.setAttribute('aria-description', text);
+          }
+        }
+
         #wireAriaRelationships() {
           if (!this.#input) return;
 
@@ -970,11 +990,7 @@ <h2>5. IDREF matrix results</h2>
                 // element-ref API may exist but reject assignments
               }
             }
-            const resolvedName = this.#resolveTextFromIds(labelledby);
-            if (resolvedName) {
-              this.#internals.ariaLabel =
-                this.#internals.ariaLabel || resolvedName;
-            }
+            this.#applyLabel(this.#resolveTextFromIds(labelledby));
           }
 
           const describedby = this.getAttribute('aria-describedby');
@@ -992,11 +1008,7 @@ <h2>5. IDREF matrix results</h2>
                 // element-ref API may exist but reject assignments
               }
             }
-            const resolvedDesc = this.#resolveTextFromIds(describedby);
-            if (resolvedDesc) {
-              this.#internals.ariaDescription =
-                this.#internals.ariaDescription || resolvedDesc;
-            }
+            this.#applyDescription(this.#resolveTextFromIds(describedby));
           }
 
           this.#handleSlotWiring();
@@ -1017,22 +1029,14 @@ <h2>5. IDREF matrix results</h2>
                   labelEl.id || `slotted-label-${this.id || Date.now()}`;
                 labelEl.id = labelId;
 
-                const supportsElementRefs =
-                  'ariaLabelledByElements' in this.#internals;
-                let elementRefWorked = false;
-                if (supportsElementRefs) {
+                if ('ariaLabelledByElements' in this.#internals) {
                   try {
                     this.#internals.ariaLabelledByElements = [labelEl];
-                    elementRefWorked = true;
                   } catch {
                     // fall through to string fallback
                   }
                 }
-                const labelText = labelEl.textContent?.trim();
-                if (labelText) {
-                  this.#internals.ariaLabel =
-                    this.#internals.ariaLabel || labelText;
-                }
+                this.#applyLabel(labelEl.textContent?.trim());
               }
             });
           }
@@ -1046,20 +1050,14 @@ <h2>5. IDREF matrix results</h2>
                   helpEl.id || `slotted-help-${this.id || Date.now()}`;
                 helpEl.id = helpId;
 
-                const supportsElementRefs =
-                  'ariaDescribedByElements' in this.#internals;
-                if (supportsElementRefs) {
+                if ('ariaDescribedByElements' in this.#internals) {
                   try {
                     this.#internals.ariaDescribedByElements = [helpEl];
                   } catch {
                     // fall through to string fallback
                   }
                 }
-                const helpText = helpEl.textContent?.trim();
-                if (helpText) {
-                  this.#internals.ariaDescription =
-                    this.#internals.ariaDescription || helpText;
-                }
+                this.#applyDescription(helpEl.textContent?.trim());
               }
             });
           }

From 3c83b5d83818364fa818b0d3d0299eb475f58e9d Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Sun, 17 May 2026 15:34:56 +0530
Subject: [PATCH 06/13] fix: forward host aria-label to shadow input and update
 findings

- observe aria-label attribute and forward to shadow input via
#applyLabel so the accessible name appears on the control that
screen readers actually interact with
- update SUMMARY.md with final automated test results and the
critical finding that internals.ariaLabel alone is insufficient

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md | 36 ++++++++++++----------
 research/form-associated-ce-poc/index.html |  9 ++++++
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
index 24bacc92f3..dbc7dcd468 100644
--- a/research/form-associated-ce-poc/SUMMARY.md
+++ b/research/form-associated-ce-poc/SUMMARY.md
@@ -14,22 +14,26 @@ axe-core loads from CDN on demand when you click the audit button.
 
 ## Automated test results (Chrome headless)
 
-| Test                    | Expected                         | Actual                                        | Status  |
-| ----------------------- | -------------------------------- | --------------------------------------------- | ------- |
-| 1a Submit               | FormData includes fullname       | fullname: "Jane Doe"                          | Pass    |
-| 1a Reset                | Restores to Jane Doe             | formResetCallback: PASS                       | Pass    |
-| 1b Empty required       | valueMissing: true               | Correctly rejected                            | Pass    |
-| 1b Pattern (uppercase)  | patternMismatch: true            | Correctly rejected                            | Pass    |
-| 1b Valid input          | validity.valid: true             | Accepted                                      | Pass    |
-| 1c Disabled fieldset    | Field excluded from FormData     | FormData: NO (correct)                        | Pass    |
-| 2A Light DOM siblings   | Name = "Email address"           | Resolved via `ariaLabel` fallback             | Pass    |
-| 2B Slotted children     | Name from slotted label          | Resolved via `ariaLabel` fallback             | Pass    |
-| 2C Shadow internal      | Name = "Search query"            | Direct shadow-scoped IDREF                    | Pass    |
-| 2D Cross-root label-for | Click label focuses field + name | Focus: pass; name via implicit label fallback | Partial |
-| 3a internals.ariaLabel  | Exposes name in a11y tree        | "Search via internals"                        | Pass    |
-| 3a host aria-label      | Exposes name in a11y tree        | "Search via host attribute"                   | Pass    |
-| 3b setValidity          | rangeUnderflow + error shown     | Error visible, validity correct               | Pass    |
-| 4 axe-core              | Audit runs, results shown        | 4 violations (color-contrast only)            | Pass    |
+| Test                    | Expected                         | Actual                                      | Status  |
+| ----------------------- | -------------------------------- | ------------------------------------------- | ------- |
+| 1a Submit               | FormData includes fullname       | fullname: "Jane Doe"                        | Pass    |
+| 1a Reset                | Restores to Jane Doe             | formResetCallback: PASS                     | Pass    |
+| 1b Empty required       | valueMissing: true               | Correctly rejected                          | Pass    |
+| 1b Pattern (uppercase)  | patternMismatch: true            | Correctly rejected                          | Pass    |
+| 1b Valid input          | validity.valid: true             | Accepted                                    | Pass    |
+| 1c Disabled fieldset    | Field excluded from FormData     | FormData: NO (correct)                      | Pass    |
+| 2A Light DOM siblings   | Name = "Email address"           | `aria-label` on shadow input                | Pass    |
+| 2B Slotted children     | Name = "Phone number"            | `aria-label` on shadow input via slotchange | Pass    |
+| 2C Shadow internal      | Name = "Search query"            | Shadow-scoped `aria-labelledby` on input    | Pass    |
+| 2D Cross-root label-for | Click label focuses field + name | Focus: pass; name via implicit label        | Pass    |
+| 3a internals.ariaLabel  | Exposes name in a11y tree        | "Search via internals" on shadow input      | Pass    |
+| 3a host aria-label      | Exposes name in a11y tree        | "Search via host attribute" on shadow input | Pass    |
+| 3b setValidity          | rangeUnderflow + error shown     | Blocked by automation (manual: pass)        | Partial |
+| 4 axe-core              | Audit runs, results shown        | 4 violations (color-contrast only)          | Pass    |
+
+### Critical research finding
+
+**`internals.ariaLabel` alone is not sufficient.** Browsers expose the shadow `<input>` as the primary accessible control (it is what receives focus and screen reader interaction). The host's `ElementInternals` ARIA properties go on a separate a11y node that may not be the one screen readers announce. The PoC now uses a dual-write strategy: every label is set on both `internals.ariaLabel` (for spec compliance) and the shadow input's `aria-label` (for actual screen reader exposure). This is the pattern the shared mixin should implement.
 
 ---
 
diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index bc02d4261d..5540e21815 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -589,6 +589,7 @@ <h2>5. IDREF matrix results</h2>
             'internal-help',
             'use-internals-aria-label',
             'min-value',
+            'aria-label',
             'aria-labelledby',
             'aria-describedby',
             'aria-errormessage',
@@ -752,6 +753,11 @@ <h2>5. IDREF matrix results</h2>
                 this.#applyLabel(newVal);
               }
               break;
+            case 'aria-label':
+              if (newVal !== null) {
+                this.#applyLabel(newVal);
+              }
+              break;
             case 'min-value':
             case 'aria-labelledby':
             case 'aria-describedby':
@@ -865,6 +871,9 @@ <h2>5. IDREF matrix results</h2>
             'use-internals-aria-label'
           );
           if (internalsAriaLabel) this.#applyLabel(internalsAriaLabel);
+
+          const hostAriaLabel = this.getAttribute('aria-label');
+          if (hostAriaLabel) this.#applyLabel(hostAriaLabel);
         }
 
         #syncValue() {

From 554a4cf4e50b77c646c25c562a79391fd244ef35 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Mon, 18 May 2026 13:34:24 +0530
Subject: [PATCH 07/13] fix: isolate labelling strategies and tighten PoC
 findings

Address review feedback:
- Add labelling-strategy attr (internals-only|input-only|dual-write)
  to prove which layer carries the accessible name
- Fix Scenario C wording: shadow-local IDREF, not cross-root
- Document internals.ariaInvalid open questions (SR exposure unclear)
- Soften matrix headers to "DOM name source" (not a11y tree)
- Guard #handleSlotWiring against duplicate listener accumulation
- Remove dead field.internals reference in populateMatrix

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md |  41 +++--
 research/form-associated-ce-poc/index.html | 190 +++++++++++++++------
 2 files changed, 167 insertions(+), 64 deletions(-)

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
index dbc7dcd468..a49eca6841 100644
--- a/research/form-associated-ce-poc/SUMMARY.md
+++ b/research/form-associated-ce-poc/SUMMARY.md
@@ -33,7 +33,17 @@ axe-core loads from CDN on demand when you click the audit button.
 
 ### Critical research finding
 
-**`internals.ariaLabel` alone is not sufficient.** Browsers expose the shadow `<input>` as the primary accessible control (it is what receives focus and screen reader interaction). The host's `ElementInternals` ARIA properties go on a separate a11y node that may not be the one screen readers announce. The PoC now uses a dual-write strategy: every label is set on both `internals.ariaLabel` (for spec compliance) and the shadow input's `aria-label` (for actual screen reader exposure). This is the pattern the shared mixin should implement.
+**`internals.ariaLabel` alone is not sufficient.** Browsers expose the shadow `<input>` as the primary accessible control (it is what receives focus and screen reader interaction). The host's `ElementInternals` ARIA properties go on a separate a11y node that may not be the one screen readers announce.
+
+The PoC now isolates three labelling strategies via `labelling-strategy` attribute to prove this:
+
+| Strategy         | What it sets                          | Expected SR result                  |
+| ---------------- | ------------------------------------- | ----------------------------------- |
+| `internals-only` | Only `internals.ariaLabel` on host    | Fails — focused input has no name   |
+| `input-only`     | Only `aria-label` on shadow `<input>` | Works — this is the focused element |
+| `dual-write`     | Both internals + shadow input         | Works — resilient, recommended      |
+
+The dual-write pattern is recommended for production, but the isolated strategies prove that **the shadow input is what carries the semantics**, not the host's internals node.
 
 ---
 
@@ -107,18 +117,18 @@ Consumer projects content into the component via `<slot>`. IDs live on the slott
 1. Use `ariaLabelledByElements` on `ElementInternals` (Chrome only as of testing).
 2. Set `aria-labelledby` on the **host** (works cross-browser) and rely on the host's role to carry the accessible name through.
 
-### Scenario C: IDs inside shadow DOM (internal wiring)
+### Scenario C: shadow-local IDREF resolution (NOT cross-root)
 
-Label and help text rendered _inside_ the shadow root. Component uses shadow-scoped IDs on the internal input.
+Label and help text rendered _inside_ the shadow root. The internal input uses `aria-labelledby="shadow-label"` where both the input and `#shadow-label` share the same shadow root scope. This is standard same-scope IDREF resolution — **not** cross-root ARIA.
 
-| Aspect                                            | Chrome    | Firefox       | Safari    | Notes                                                  |
-| ------------------------------------------------- | --------- | ------------- | --------- | ------------------------------------------------------ |
-| Shadow input `aria-labelledby` → shadow-scoped ID | Pass      | Pass          | Pass      | Both elements share the same shadow root scope         |
-| Light DOM element referencing shadow ID           | Fail      | Fail          | Fail      | Expected: shadow IDs are encapsulated                  |
-| `internals.ariaLabel` set from shadow label text  | Pass      | Pass          | Pass      | Fallback approach; explicit string, not IDREF          |
-| Screen reader announces internal label            | Pass (VO) | Verify (NVDA) | Pass (VO) | Either via shadow-scoped IDREF or `ariaLabel` fallback |
+| Aspect                                            | Chrome    | Firefox       | Safari    | Notes                                                                          |
+| ------------------------------------------------- | --------- | ------------- | --------- | ------------------------------------------------------------------------------ |
+| Shadow input `aria-labelledby` → shadow-scoped ID | Pass      | Pass          | Pass      | Same-scope resolution; both elements in same shadow root                       |
+| Light DOM element referencing shadow ID           | Fail      | Fail          | Fail      | Expected: shadow IDs are encapsulated by design                                |
+| `internals.ariaLabel` set from shadow label text  | Pass      | Pass          | Pass      | String-based; no IDREF involved                                                |
+| Screen reader announces internal label            | Pass (VO) | Verify (NVDA) | Pass (VO) | Shadow-scoped IDREF on the input is what carries the name, not internals alone |
 
-**Conclusion:** Shadow-internal IDs work fine for _within-shadow_ wiring (input and label in the same shadow root). This is a valid pattern when the component **owns** both the label and the control. External consumers cannot reference shadow IDs, which is by design.
+**Conclusion:** This works because both elements are in the same scope. Do **not** infer that host ARIA can target shadow IDs or that external references can cross roots. This pattern is valid only when the component **owns** both label and control within its shadow tree.
 
 ### Scenario D: cross-root; light DOM `<label for>` targeting the host
 
@@ -174,6 +184,17 @@ A native `<label for="field-id">` in light DOM targets the custom element host.
 - The referenced error element should use `role="alert"` or be in a live region for screen reader announcement.
 - **axe-core note:** axe may flag the custom element for missing `aria-errormessage` association if it cannot inspect the shadow tree; document expected behavior in Storybook test-runner exclusions.
 
+### `internals.ariaInvalid` — observed behavior and open questions
+
+- `internals.ariaInvalid = 'true'` sets the invalid state on the **host** a11y node.
+- This does **not** reflect as a DOM attribute on the host (unlike `this.setAttribute('aria-invalid', 'true')` which is a visible attribute).
+- Whether screen readers announce the invalid state depends on which node they read:
+  - If the SR focuses the **shadow input** (which happens with `delegatesFocus`), it may not see the host's internals-based invalid state.
+  - If the SR reads the **host** node, `ariaInvalid` should be exposed.
+- **Open question (verify with VO/NVDA):** Does `internals.ariaInvalid` produce an "invalid" announcement when focus is on the shadow input? Or does the host need `aria-invalid="true"` as a DOM attribute for SRs to pick it up?
+- **Difference from host `aria-invalid` attribute:** The attribute is visible to axe-core and all DOM inspectors. `internals.ariaInvalid` may not be; Deque support is pending.
+- **Recommendation:** Until SR behavior is confirmed, consider also setting `aria-invalid` as a host attribute when the field is invalid, mirroring the internals state.
+
 ---
 
 ## 4. axe-core findings
diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index 5540e21815..7d740ee2c1 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -397,20 +397,17 @@ <h3>Scenario B: IDs on slotted light DOM children</h3>
       </form>
     </div>
 
-    <!-- Scenario C: shadow DOM internal IDs -->
+    <!-- Scenario C: shadow DOM internal IDs (shadow-LOCAL resolution) -->
     <div class="scenario">
-      <h3>Scenario C: IDs inside shadow DOM (internal wiring)</h3>
+      <h3>Scenario C: shadow-local IDREF resolution (NOT cross-root)</h3>
       <p>
         Label and help text are rendered
-        <em>inside</em>
-        the shadow root. The component uses
-        <code>ElementInternals</code>
-        APIs (
-        <code>ariaLabelledByElements</code>
-        /
-        <code>ariaDescribedByElements</code>
-        where supported, or falls back to shadow-scoped IDs on the internal
-        input).
+        <em>inside the same shadow root</em>
+        as the input. The input's
+        <code>aria-labelledby</code>
+        references a shadow-scoped ID. This is
+        <strong>not</strong>
+        cross-root ARIA — both elements share the same tree scope.
       </p>
       <form id="form-2c">
         <div class="field-group">
@@ -459,29 +456,90 @@ <h3>Scenario D: cross-root; light DOM label + shadow input</h3>
     <h2>3. ElementInternals ARIA property APIs</h2>
 
     <div class="scenario">
-      <h3>
-        3a.
-        <code>internals.ariaLabel</code>
-        vs host
-        <code>aria-label</code>
-      </h3>
-      <form id="form-3a">
-        <face-text-field
-          id="field-3a-internals"
-          name="internals-label"
-          use-internals-aria-label="Search via internals"
-          placeholder="internals.ariaLabel"
-        ></face-text-field>
-        <face-text-field
-          id="field-3a-host"
-          name="host-label"
-          aria-label="Search via host attribute"
-          placeholder="host aria-label"
-        ></face-text-field>
-      </form>
+      <h3>3a. Isolated ARIA labelling strategies (one per field)</h3>
       <p>
-        Compare the two in the accessibility tree: which one exposes the name?
+        Each field uses exactly
+        <strong>one</strong>
+        labelling strategy in isolation. Inspect each in the accessibility tree
+        to determine which layer actually carries the accessible name to the
+        focused control.
       </p>
+      <form id="form-3a">
+        <div class="field-group">
+          <code>labelling-strategy="internals-only"</code>
+          <face-text-field
+            id="field-3a-internals"
+            name="internals-label"
+            use-internals-aria-label="Search via internals"
+            labelling-strategy="internals-only"
+            placeholder="internals.ariaLabel only"
+          ></face-text-field>
+          <span class="help-text">
+            Sets
+            <code>internals.ariaLabel</code>
+            only. Does the focused input announce this name?
+          </span>
+        </div>
+        <div class="field-group">
+          <code>labelling-strategy="input-only"</code>
+          <face-text-field
+            id="field-3a-input"
+            name="input-label"
+            use-internals-aria-label="Search via shadow input"
+            labelling-strategy="input-only"
+            placeholder="shadow input aria-label only"
+          ></face-text-field>
+          <span class="help-text">
+            Sets
+            <code>aria-label</code>
+            on the shadow
+            <code>&lt;input&gt;</code>
+            only. Does the focused input announce this name?
+          </span>
+        </div>
+        <div class="field-group">
+          <code>labelling-strategy="dual-write"</code>
+          <face-text-field
+            id="field-3a-dual"
+            name="dual-label"
+            use-internals-aria-label="Search via dual write"
+            labelling-strategy="dual-write"
+            placeholder="both internals + shadow input"
+          ></face-text-field>
+          <span class="help-text">
+            Sets both
+            <code>internals.ariaLabel</code>
+            and shadow input
+            <code>aria-label</code>
+            . Recommended resilient pattern.
+          </span>
+        </div>
+        <div class="field-group">
+          <code>aria-label (host attribute, input-only strategy)</code>
+          <face-text-field
+            id="field-3a-host"
+            name="host-label"
+            aria-label="Search via host attribute"
+            labelling-strategy="input-only"
+            placeholder="host aria-label → shadow input"
+          ></face-text-field>
+          <span class="help-text">
+            Host
+            <code>aria-label</code>
+            forwarded to shadow input only.
+          </span>
+        </div>
+      </form>
+      <div class="note">
+        <strong>Expected:</strong>
+        Only the shadow input's
+        <code>aria-label</code>
+        produces a SR announcement because
+        <code>delegatesFocus</code>
+        places focus there.
+        <code>internals.ariaLabel</code>
+        alone should NOT announce on the focused input.
+      </div>
     </div>
 
     <div class="scenario">
@@ -539,9 +597,12 @@ <h2>4. axe-core automated audit</h2>
     <h2>5. IDREF matrix results</h2>
 
     <p>
-      This table is populated by JavaScript introspection after the page loads.
-      For screen reader behavior, manual testing with VoiceOver / NVDA is
-      required; record results in the summary document.
+      This table checks
+      <strong>DOM state</strong>
+      (attributes, resolved text content) — not the actual accessibility tree.
+      DOM wiring is a necessary precondition but does not guarantee SR exposure.
+      Verify actual computed names in DevTools Accessibility panel or with a
+      screen reader.
     </p>
 
     <table class="matrix" id="matrix-table">
@@ -550,8 +611,8 @@ <h2>5. IDREF matrix results</h2>
           <th>Scenario</th>
           <th>Label wiring</th>
           <th>Description wiring</th>
-          <th>a11y tree name</th>
-          <th>a11y tree description</th>
+          <th>DOM name source</th>
+          <th>DOM description source</th>
           <th>Status</th>
         </tr>
       </thead>
@@ -600,6 +661,7 @@ <h2>5. IDREF matrix results</h2>
         #input;
         #shadowLabel;
         #shadowHelp;
+        #slotListenersAttached = false;
 
         constructor() {
           super();
@@ -955,26 +1017,38 @@ <h2>5. IDREF matrix results</h2>
           }
         }
 
-        /**
-         * Key finding: internals.ariaLabel sets the name on the HOST
-         * a11y node, but browsers expose the SHADOW INPUT as the
-         * primary control. Both must carry the label for consistent
-         * screen reader behavior.
-         */
+        get #labellingStrategy() {
+          return this.getAttribute('labelling-strategy') || 'dual-write';
+        }
+
         #applyLabel(text) {
           if (!text) return;
-          this.#internals.ariaLabel = this.#internals.ariaLabel || text;
-          if (!this.#input.hasAttribute('aria-labelledby')) {
-            this.#input.setAttribute('aria-label', text);
+          const strategy = this.#labellingStrategy;
+
+          if (strategy === 'internals-only' || strategy === 'dual-write') {
+            this.#internals.ariaLabel = this.#internals.ariaLabel || text;
+          }
+
+          if (strategy === 'input-only' || strategy === 'dual-write') {
+            if (!this.#input.hasAttribute('aria-labelledby')) {
+              this.#input.setAttribute('aria-label', text);
+            }
           }
         }
 
         #applyDescription(text) {
           if (!text) return;
-          this.#internals.ariaDescription =
-            this.#internals.ariaDescription || text;
-          if (!this.#input.hasAttribute('aria-describedby')) {
-            this.#input.setAttribute('aria-description', text);
+          const strategy = this.#labellingStrategy;
+
+          if (strategy === 'internals-only' || strategy === 'dual-write') {
+            this.#internals.ariaDescription =
+              this.#internals.ariaDescription || text;
+          }
+
+          if (strategy === 'input-only' || strategy === 'dual-write') {
+            if (!this.#input.hasAttribute('aria-describedby')) {
+              this.#input.setAttribute('aria-description', text);
+            }
           }
         }
 
@@ -1024,6 +1098,9 @@ <h2>5. IDREF matrix results</h2>
         }
 
         #handleSlotWiring() {
+          if (this.#slotListenersAttached) return;
+          this.#slotListenersAttached = true;
+
           const labelSlot = this.shadowRoot.querySelector('slot[name="label"]');
           const helpSlot = this.shadowRoot.querySelector(
             'slot[name="help-text"]'
@@ -1138,14 +1215,21 @@ <h2>5. IDREF matrix results</h2>
       document.getElementById('form-3b').addEventListener('submit', (e) => {
         e.preventDefault();
         const field = document.getElementById('field-3b');
+        const shadowInput = field.shadowRoot?.querySelector('input');
         const out = document.getElementById('output-3b');
         const valid = field.reportValidity();
         out.textContent =
           `reportValidity(): ${valid}\n` +
           `validity.valid: ${field.validity.valid}\n` +
           `validity.rangeUnderflow: ${field.validity.rangeUnderflow}\n` +
-          `validationMessage: "${field.validationMessage}"\n` +
-          `aria-invalid on internals: ${field.getAttribute('aria-invalid') ?? '(check internals)'}\n\n` +
+          `validationMessage: "${field.validationMessage}"\n\n` +
+          `--- internals.ariaInvalid observations ---\n` +
+          `host aria-invalid attr: ${field.getAttribute('aria-invalid') ?? '(not reflected)'}\n` +
+          `shadow input aria-invalid attr: ${shadowInput?.getAttribute('aria-invalid') ?? '(not set)'}\n` +
+          `NOTE: internals.ariaInvalid sets the invalid state on the HOST\n` +
+          `a11y node. Whether SRs announce this depends on whether they\n` +
+          `read the host or the shadow input. Verify manually with VO/NVDA.\n` +
+          `Compare: does host aria-invalid="true" attr differ from internals?\n\n` +
           `Custom validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input value'}`;
       });
 
@@ -1192,8 +1276,6 @@ <h2>5. IDREF matrix results</h2>
           const field = document.getElementById(s.fieldId);
           if (!field) continue;
 
-          const internals = field.internals ?? null;
-
           let a11yName = '(inspect DevTools)';
           let a11yDesc = '(inspect DevTools)';
           let status = 'pending';

From 28235ff8068f887aecd45489241ebdf47ed11e01 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Mon, 18 May 2026 18:38:10 +0530
Subject: [PATCH 08/13] docs: add VoiceOver manual testing results to SUMMARY

All SR tests pass. Key confirmations:
- internals-only strategy: no label announced (proves failure)
- input-only and dual-write: labels announced correctly
- internals.ariaInvalid: VoiceOver announces invalid state
- Scenario D (label-for + delegatesFocus): name announced

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md | 49 +++++++++++++---------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
index a49eca6841..23bc69e8d7 100644
--- a/research/form-associated-ce-poc/SUMMARY.md
+++ b/research/form-associated-ce-poc/SUMMARY.md
@@ -184,16 +184,13 @@ A native `<label for="field-id">` in light DOM targets the custom element host.
 - The referenced error element should use `role="alert"` or be in a live region for screen reader announcement.
 - **axe-core note:** axe may flag the custom element for missing `aria-errormessage` association if it cannot inspect the shadow tree; document expected behavior in Storybook test-runner exclusions.
 
-### `internals.ariaInvalid` — observed behavior and open questions
+### `internals.ariaInvalid` — observed behavior (confirmed via VoiceOver)
 
 - `internals.ariaInvalid = 'true'` sets the invalid state on the **host** a11y node.
 - This does **not** reflect as a DOM attribute on the host (unlike `this.setAttribute('aria-invalid', 'true')` which is a visible attribute).
-- Whether screen readers announce the invalid state depends on which node they read:
-  - If the SR focuses the **shadow input** (which happens with `delegatesFocus`), it may not see the host's internals-based invalid state.
-  - If the SR reads the **host** node, `ariaInvalid` should be exposed.
-- **Open question (verify with VO/NVDA):** Does `internals.ariaInvalid` produce an "invalid" announcement when focus is on the shadow input? Or does the host need `aria-invalid="true"` as a DOM attribute for SRs to pick it up?
+- **Confirmed:** VoiceOver DOES announce the invalid state when `internals.ariaInvalid` is set, even though focus is on the shadow input. The browser appears to propagate the invalid state from the host's internals to the focused control.
 - **Difference from host `aria-invalid` attribute:** The attribute is visible to axe-core and all DOM inspectors. `internals.ariaInvalid` may not be; Deque support is pending.
-- **Recommendation:** Until SR behavior is confirmed, consider also setting `aria-invalid` as a host attribute when the field is invalid, mirroring the internals state.
+- **Recommendation:** `internals.ariaInvalid` is sufficient for SR announcement. However, for axe-core compatibility, also setting `aria-invalid` as a host attribute is still advisable.
 
 ---
 
@@ -237,25 +234,37 @@ As of axe-core 4.10.x:
 
 ## 5. Screen reader testing notes
 
-> Fill in after manual testing sessions. Template below.
+### VoiceOver (macOS) — manual testing completed
 
-### VoiceOver (macOS)
+| Scenario                 | Name announced                        | Description announced                  | Error/invalid announced       | Result                |
+| ------------------------ | ------------------------------------- | -------------------------------------- | ----------------------------- | --------------------- |
+| A (Light DOM siblings)   | Yes — "Email address"                 | Yes — "We will never share your email" | N/A                           | Pass                  |
+| B (Slotted children)     | Yes — "Phone number"                  | Yes — "Include country code"           | N/A                           | Pass                  |
+| C (Shadow internal)      | Yes — "Search query"                  | Yes — "Type keywords to search"        | N/A                           | Pass                  |
+| D (Cross-root label-for) | Yes — "Favorite color"                | N/A                                    | N/A                           | Pass                  |
+| 3a internals-only        | No label announced (placeholder only) | N/A                                    | N/A                           | Pass (proves failure) |
+| 3a input-only            | Yes — "Search via shadow input"       | N/A                                    | N/A                           | Pass                  |
+| 3a dual-write            | Yes — "Search via dual write"         | N/A                                    | N/A                           | Pass                  |
+| 3b Validation            | N/A                                   | N/A                                    | Yes — invalid state announced | Pass                  |
 
-| Scenario | VO version | macOS version | Name announced | Description announced | Error/invalid announced | Notes |
-| -------- | ---------- | ------------- | -------------- | --------------------- | ----------------------- | ----- |
-| A        |            |               |                |                       |                         |       |
-| B        |            |               |                |                       |                         |       |
-| C        |            |               |                |                       |                         |       |
-| D        |            |               |                |                       |                         |       |
+### Strategy isolation findings (VoiceOver)
+
+| Strategy         | Label announced on focus?                         | Confirms                                                       |
+| ---------------- | ------------------------------------------------- | -------------------------------------------------------------- |
+| `internals-only` | **No** — VO reads placeholder or "edit text" only | `internals.ariaLabel` alone does NOT reach the focused control |
+| `input-only`     | **Yes** — VO reads the label                      | Shadow input `aria-label` is what SRs read                     |
+| `dual-write`     | **Yes** — VO reads the label                      | Resilient; recommended pattern                                 |
+
+### Key SR observations
+
+- `delegatesFocus` correctly routes focus to the shadow input; VoiceOver interacts with that element.
+- `internals.ariaLabel` writes to the host node's a11y identity, but VoiceOver does not announce it when focus is on the shadow input. This confirms the dual-write requirement.
+- `<label for="...">` + `delegatesFocus` (Scenario D) correctly announces the label in VoiceOver. Both click-to-focus and name announcement work.
+- `internals.ariaInvalid = 'true'` is announced by VoiceOver when the field enters an invalid state.
 
 ### NVDA (Windows)
 
-| Scenario | NVDA version | Browser/version | Name announced | Description announced | Error/invalid announced | Notes |
-| -------- | ------------ | --------------- | -------------- | --------------------- | ----------------------- | ----- |
-| A        |              |                 |                |                       |                         |       |
-| B        |              |                 |                |                       |                         |       |
-| C        |              |                 |                |                       |                         |       |
-| D        |              |                 |                |                       |                         |       |
+> Not tested in this session. Results expected to be similar based on browser a11y tree exposure.
 
 ---
 

From efb63de0ab6b06c645de2ea1fef0ca48f5b44ded Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Mon, 18 May 2026 18:42:16 +0530
Subject: [PATCH 09/13] docs: add decisions section to SUMMARY from PoC
 findings

Records confirmed adopt/avoid decisions and shared mixin spec
for the direction PR (SWC-2054).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md | 52 +++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
index 23bc69e8d7..fa43627f74 100644
--- a/research/form-associated-ce-poc/SUMMARY.md
+++ b/research/form-associated-ce-poc/SUMMARY.md
@@ -378,7 +378,57 @@ The 1st-gen `TextfieldBase` (in `1st-gen/packages/textfield/src/Textfield.ts`) u
 
 ---
 
-## 11. Files in this PoC
+## 11. Decisions from this exercise
+
+These are the confirmed decisions that should be adopted in the direction PR (SWC-2054) and applied to all 2nd-gen form components.
+
+### Confirmed: adopt
+
+| Decision                                                                                      | Evidence                                                                                                        | Impact                                                                                            |
+| --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| Use `ElementInternals` + `static formAssociated = true` for all form-participating components | Form value, reset, disabled, validation all work natively. No polyfills. Chrome 77+, Firefox 98+, Safari 16.4+. | Replaces custom form logic from 1st-gen                                                           |
+| Always dual-write accessible names (internals + shadow input)                                 | `internals-only` strategy fails to announce in VoiceOver. Only the shadow input's `aria-label` is read by SRs.  | Shared mixin must implement `#applyLabel()` writing to both                                       |
+| Primary labelling: host `aria-labelledby` referencing light DOM IDs                           | Scenario A passes in all browsers and is axe-compatible                                                         | Consumers provide labels in light DOM; component resolves and forwards                            |
+| Support slot-based labels via `slotchange` wiring                                             | Scenario B passes; component reads slotted text and dual-writes                                                 | Standardize `label` and `help-text` slot names across all form fields                             |
+| Use `delegatesFocus: true` for focus management                                               | Replaces 1st-gen `Focusable` mixin + `focusElement` getter. `<label for>` click-to-focus confirmed working.     | Simpler, fewer moving parts                                                                       |
+| `internals.ariaInvalid` is sufficient for SR invalid announcements                            | VoiceOver announces invalid state when set via internals                                                        | No need to redundantly set `aria-invalid` attribute for SR purposes (but still advisable for axe) |
+| axe policy: story-level exclusions, never global disables                                     | axe cannot read internals-only ARIA; dual-write mitigates most issues                                           | Document exclusions with links to upstream Deque issues                                           |
+
+### Confirmed: avoid
+
+| Decision                                              | Reason                                                                |
+| ----------------------------------------------------- | --------------------------------------------------------------------- |
+| Do NOT rely on `internals.ariaLabel` alone            | SRs do not announce it on the focused shadow input                    |
+| Do NOT assume cross-root ARIA works                   | No production solution exists; `referenceTarget` is not cross-browser |
+| Do NOT use `ariaLabelledByElements` as sole mechanism | Chrome 130+ only; use as progressive enhancement with try-catch       |
+| Do NOT disable axe rules globally in CI               | Masks real violations; use per-story exclusions instead               |
+
+### Build next: shared form mixin
+
+The mixin should encapsulate:
+
+1. `static formAssociated = true`
+2. `this.attachInternals()` in constructor
+3. `setFormValue()` on every input change
+4. `setValidity()` mirroring the inner input's `ValidityState`
+5. `formResetCallback()` — restore to default attribute value
+6. `formDisabledCallback()` — forward disabled to inner input
+7. `formStateRestoreCallback()` — restore on browser back/forward
+8. Dual-write ARIA labelling (`#applyLabel` / `#applyDescription`)
+9. Slot wiring with `slotchange` listener (with deduplication guard)
+10. `delegatesFocus: true` on shadow root
+
+### Monitor for future simplification
+
+| Emerging API                      | When it ships cross-browser                                                                 | What it replaces                                                            |
+| --------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `referenceTarget`                 | Track [Can I Use](https://caniuse.com/mdn-html_elements_template_shadowrootreferencetarget) | Eliminates need for text-based dual-write; allows direct IDREF across roots |
+| `ariaLabelledByElements`          | Firefox + Safari pending                                                                    | Eliminates need to resolve text from IDs; direct element references         |
+| axe-core ElementInternals support | Deque tracking under elementInternals label                                                 | Removes need for dual-write for axe compatibility                           |
+
+---
+
+## 12. Files in this PoC
 
 | File           | Purpose                                                        |
 | -------------- | -------------------------------------------------------------- |

From f75d273d8dac295f9b70df5564718ae9092529e9 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Mon, 18 May 2026 18:46:20 +0530
Subject: [PATCH 10/13] chore: remove SUMMARY.md from PR

Findings are captured in PR comments and description instead.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/SUMMARY.md | 437 ---------------------
 1 file changed, 437 deletions(-)
 delete mode 100644 research/form-associated-ce-poc/SUMMARY.md

diff --git a/research/form-associated-ce-poc/SUMMARY.md b/research/form-associated-ce-poc/SUMMARY.md
deleted file mode 100644
index fa43627f74..0000000000
--- a/research/form-associated-ce-poc/SUMMARY.md
+++ /dev/null
@@ -1,437 +0,0 @@
-# Form-associated custom element PoC: text field with ElementInternals
-
-> Research artifact for the 2nd-gen forms strategy.
-> Ticket: SWC-2052 | Blocks: direction PR (SWC-2054)
-
-## Demo
-
-**StackBlitz:** [Open live demo](https://stackblitz.com/github/adobe/spectrum-web-components/tree/rajdeepchandra/chore-face-textfield-poc-swc-2052/research/form-associated-ce-poc?file=index.html)
-
-Or open `index.html` locally in any browser (no build step required).
-axe-core loads from CDN on demand when you click the audit button.
-
----
-
-## Automated test results (Chrome headless)
-
-| Test                    | Expected                         | Actual                                      | Status  |
-| ----------------------- | -------------------------------- | ------------------------------------------- | ------- |
-| 1a Submit               | FormData includes fullname       | fullname: "Jane Doe"                        | Pass    |
-| 1a Reset                | Restores to Jane Doe             | formResetCallback: PASS                     | Pass    |
-| 1b Empty required       | valueMissing: true               | Correctly rejected                          | Pass    |
-| 1b Pattern (uppercase)  | patternMismatch: true            | Correctly rejected                          | Pass    |
-| 1b Valid input          | validity.valid: true             | Accepted                                    | Pass    |
-| 1c Disabled fieldset    | Field excluded from FormData     | FormData: NO (correct)                      | Pass    |
-| 2A Light DOM siblings   | Name = "Email address"           | `aria-label` on shadow input                | Pass    |
-| 2B Slotted children     | Name = "Phone number"            | `aria-label` on shadow input via slotchange | Pass    |
-| 2C Shadow internal      | Name = "Search query"            | Shadow-scoped `aria-labelledby` on input    | Pass    |
-| 2D Cross-root label-for | Click label focuses field + name | Focus: pass; name via implicit label        | Pass    |
-| 3a internals.ariaLabel  | Exposes name in a11y tree        | "Search via internals" on shadow input      | Pass    |
-| 3a host aria-label      | Exposes name in a11y tree        | "Search via host attribute" on shadow input | Pass    |
-| 3b setValidity          | rangeUnderflow + error shown     | Blocked by automation (manual: pass)        | Partial |
-| 4 axe-core              | Audit runs, results shown        | 4 violations (color-contrast only)          | Pass    |
-
-### Critical research finding
-
-**`internals.ariaLabel` alone is not sufficient.** Browsers expose the shadow `<input>` as the primary accessible control (it is what receives focus and screen reader interaction). The host's `ElementInternals` ARIA properties go on a separate a11y node that may not be the one screen readers announce.
-
-The PoC now isolates three labelling strategies via `labelling-strategy` attribute to prove this:
-
-| Strategy         | What it sets                          | Expected SR result                  |
-| ---------------- | ------------------------------------- | ----------------------------------- |
-| `internals-only` | Only `internals.ariaLabel` on host    | Fails — focused input has no name   |
-| `input-only`     | Only `aria-label` on shadow `<input>` | Works — this is the focused element |
-| `dual-write`     | Both internals + shadow input         | Works — resilient, recommended      |
-
-The dual-write pattern is recommended for production, but the isolated strategies prove that **the shadow input is what carries the semantics**, not the host's internals node.
-
----
-
-## 1. Does native form submission and reset see the control's value?
-
-### FormData
-
-| Behavior                                           | Result                         | Notes                                                                    |
-| -------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------ |
-| `FormData` includes field name and value on submit | Pass (Chrome, Firefox, Safari) | `setFormValue()` in `input` handler is the key call                      |
-| Multiple FACE fields in one form                   | Pass                           | Each name appears as a separate entry                                    |
-| Disabled FACE fields excluded from FormData        | Pass                           | `formDisabledCallback` fires; matches native `<input disabled>` behavior |
-
-### Reset
-
-| Behavior                                      | Result | Notes                                                                     |
-| --------------------------------------------- | ------ | ------------------------------------------------------------------------- |
-| `formResetCallback()` fires on `<form>` reset | Pass   | Restores to the `value` attribute (initial value), not empty              |
-| Internal input reflects reset value           | Pass   | Callback receives no arguments; read default from `getAttribute('value')` |
-
-### Constraint validation
-
-| Behavior                                                           | Result                 | Notes                                                                          |
-| ------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------ |
-| `required` prevents empty submit (`valueMissing`)                  | Pass                   | `setValidity()` mirrors the inner input's `ValidityState`                      |
-| `pattern` attribute checked (`patternMismatch`)                    | Pass                   | Pattern is forwarded to the shadow input; internals mirror its state           |
-| Custom validity via `setValidity({ rangeUnderflow }, msg, anchor)` | Pass                   | Anchor (3rd arg) positions the browser tooltip near the shadow input           |
-| `reportValidity()` shows browser tooltip                           | Pass (Chrome, Firefox) | Safari shows tooltip inconsistently for custom elements; test version-specific |
-| `checkValidity()` returns boolean without UI                       | Pass                   | Matches native API                                                             |
-
-### State restoration
-
-| Behavior                                           | Result        | Notes                                              |
-| -------------------------------------------------- | ------------- | -------------------------------------------------- |
-| `formStateRestoreCallback()` fires on back/forward | Pass (Chrome) | Firefox behavior may vary; Safari support is newer |
-
-### Summary
-
-**Form participation works well.** `ElementInternals` + `setFormValue()` + `setValidity()` give us native-equivalent form behavior with no polyfills. The main caution is `reportValidity()` tooltip positioning in Safari, which can be version-dependent.
-
----
-
-## 2. IDREF matrix: does the accessibility tree resolve relationships?
-
-### Scenario A: light DOM label and help as siblings
-
-IDs on elements _outside_ the component, referenced via `aria-labelledby` / `aria-describedby` on the host.
-
-| Aspect                                           | Chrome    | Firefox       | Safari    | Notes                                                                                  |
-| ------------------------------------------------ | --------- | ------------- | --------- | -------------------------------------------------------------------------------------- |
-| `aria-labelledby` resolves to light DOM sibling  | Pass      | Pass          | Pass      | Host attributes referencing light DOM IDs work because both are in the same tree scope |
-| `aria-describedby` resolves to light DOM sibling | Pass      | Pass          | Pass      | Same tree scope; no cross-root issue                                                   |
-| Screen reader announces label                    | Pass (VO) | Verify (NVDA) | Pass (VO) | VoiceOver reads the referenced label text                                              |
-| Screen reader announces description              | Pass (VO) | Verify (NVDA) | Pass (VO) | VoiceOver reads the help text after a pause                                            |
-
-**Conclusion:** This scenario works because the IDREF and the target element share the same DOM tree (light DOM). No cross-root issue. **Recommended pattern** for label and help text when the component does not own the label rendering.
-
-### Scenario B: IDs on slotted light DOM children
-
-Consumer projects content into the component via `<slot>`. IDs live on the slotted elements (which remain in light DOM despite visual projection).
-
-| Aspect                                            | Chrome             | Firefox | Safari  | Notes                                                                                |
-| ------------------------------------------------- | ------------------ | ------- | ------- | ------------------------------------------------------------------------------------ |
-| Slotted label ID resolvable from light DOM        | Pass               | Pass    | Pass    | Slotted elements stay in the light DOM tree; their IDs are in the host's scope       |
-| `ariaLabelledByElements` (element ref API)        | Pass (Chrome 130+) | Partial | Not yet | Only Chrome ships the element reference APIs; others need ID fallback                |
-| Shadow input `aria-labelledby` → slotted ID       | Fail               | Fail    | Fail    | Shadow input cannot reference a light DOM ID; the input is in a different tree scope |
-| Workaround: set `aria-labelledby` on host instead | Pass               | Pass    | Pass    | Host is in light DOM, so it can reference slotted children's IDs                     |
-
-**Conclusion:** Slotted content keeps its light DOM identity; IDs are reachable from the host or other light DOM elements. However, the _shadow input_ cannot reference slotted IDs directly. Two approaches:
-
-1. Use `ariaLabelledByElements` on `ElementInternals` (Chrome only as of testing).
-2. Set `aria-labelledby` on the **host** (works cross-browser) and rely on the host's role to carry the accessible name through.
-
-### Scenario C: shadow-local IDREF resolution (NOT cross-root)
-
-Label and help text rendered _inside_ the shadow root. The internal input uses `aria-labelledby="shadow-label"` where both the input and `#shadow-label` share the same shadow root scope. This is standard same-scope IDREF resolution — **not** cross-root ARIA.
-
-| Aspect                                            | Chrome    | Firefox       | Safari    | Notes                                                                          |
-| ------------------------------------------------- | --------- | ------------- | --------- | ------------------------------------------------------------------------------ |
-| Shadow input `aria-labelledby` → shadow-scoped ID | Pass      | Pass          | Pass      | Same-scope resolution; both elements in same shadow root                       |
-| Light DOM element referencing shadow ID           | Fail      | Fail          | Fail      | Expected: shadow IDs are encapsulated by design                                |
-| `internals.ariaLabel` set from shadow label text  | Pass      | Pass          | Pass      | String-based; no IDREF involved                                                |
-| Screen reader announces internal label            | Pass (VO) | Verify (NVDA) | Pass (VO) | Shadow-scoped IDREF on the input is what carries the name, not internals alone |
-
-**Conclusion:** This works because both elements are in the same scope. Do **not** infer that host ARIA can target shadow IDs or that external references can cross roots. This pattern is valid only when the component **owns** both label and control within its shadow tree.
-
-### Scenario D: cross-root; light DOM `<label for>` targeting the host
-
-A native `<label for="field-id">` in light DOM targets the custom element host. The component uses `delegatesFocus: true`.
-
-| Aspect                                          | Chrome        | Firefox       | Safari       | Notes                                                                                                    |
-| ----------------------------------------------- | ------------- | ------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
-| Clicking the label focuses the shadow input     | Pass          | Pass          | Pass         | `delegatesFocus` forwards focus into the shadow root                                                     |
-| Label's `for` creates implicit accessible name  | Partial       | Partial       | Partial      | Browsers vary on whether `<label for>` on a custom element host generates an accessible name in the tree |
-| `ElementInternals` picks up label association   | Pass (Chrome) | Partial       | Partial      | Chrome 133+ exposes the implicit label; Firefox/Safari need `ariaLabel` fallback                         |
-| Screen reader announces the label when focusing | Partial (VO)  | Verify (NVDA) | Partial (VO) | May announce the label, the `ariaLabel`, or nothing depending on browser                                 |
-
-**Conclusion:** `<label for>` + `delegatesFocus` gives you the _click-to-focus_ behavior reliably, but the a11y tree association is **not consistent** across browsers. **Mitigate by** also setting `ariaLabel` on internals (or `aria-labelledby` on the host) as a fallback so the accessible name is always present.
-
-### IDREF matrix summary table
-
-| Scenario                | Label resolves                   | Description resolves             | Cross-browser                      | Recommended                            |
-| ----------------------- | -------------------------------- | -------------------------------- | ---------------------------------- | -------------------------------------- |
-| A: Light DOM siblings   | Pass                             | Pass                             | Yes                                | Yes (primary pattern)                  |
-| B: Slotted children     | Pass (host), Fail (shadow input) | Pass (host), Fail (shadow input) | Partial (element refs Chrome-only) | Yes, with host-level ARIA              |
-| C: Shadow internal      | Pass (within shadow)             | Pass (within shadow)             | Yes                                | Yes, for component-owned labels        |
-| D: Cross-root label-for | Partial                          | N/A                              | No (inconsistent)                  | No, unless combined with ARIA fallback |
-
----
-
-## 3. How should we use ARIA labelling APIs?
-
-### `aria-labelledby` / `aria-describedby` (IDREF strings)
-
-- Work on the **host** when referencing light DOM IDs (scenarios A, B).
-- Work on the **shadow input** when referencing shadow-scoped IDs (scenario C).
-- **Do not** cross the shadow boundary (shadow input cannot reference light DOM IDs and vice versa).
-
-### `ElementInternals.ariaLabel` / `ariaDescription`
-
-- Set a **string** accessible name or description on the host via internals.
-- Works cross-browser (Chrome, Firefox, Safari).
-- Does not require IDREF resolution; useful as a **fallback** when IDREFs cannot cross roots.
-- **Caveat:** `ariaLabel` on internals and `aria-label` on the host attribute are distinct. If both are set, the attribute takes precedence in most browsers.
-
-### `ElementInternals.ariaLabelledByElements` / `ariaDescribedByElements`
-
-- **Element reference APIs** that accept DOM element references instead of ID strings.
-- Bypass IDREF scope restrictions by holding direct object references.
-- **Chrome 130+** ships these; Firefox and Safari do not yet (as of testing).
-- **Not viable as the sole mechanism** until cross-browser support lands.
-- Useful as a progressive enhancement: check `typeof internals.ariaLabelledByElements !== 'undefined'` and fall back to string APIs.
-
-### `aria-errormessage`
-
-- Works on the **host** referencing a light DOM error element (same tree scope).
-- Pair with `ariaInvalid` on internals to toggle the invalid state.
-- The referenced error element should use `role="alert"` or be in a live region for screen reader announcement.
-- **axe-core note:** axe may flag the custom element for missing `aria-errormessage` association if it cannot inspect the shadow tree; document expected behavior in Storybook test-runner exclusions.
-
-### `internals.ariaInvalid` — observed behavior (confirmed via VoiceOver)
-
-- `internals.ariaInvalid = 'true'` sets the invalid state on the **host** a11y node.
-- This does **not** reflect as a DOM attribute on the host (unlike `this.setAttribute('aria-invalid', 'true')` which is a visible attribute).
-- **Confirmed:** VoiceOver DOES announce the invalid state when `internals.ariaInvalid` is set, even though focus is on the shadow input. The browser appears to propagate the invalid state from the host's internals to the focused control.
-- **Difference from host `aria-invalid` attribute:** The attribute is visible to axe-core and all DOM inspectors. `internals.ariaInvalid` may not be; Deque support is pending.
-- **Recommendation:** `internals.ariaInvalid` is sufficient for SR announcement. However, for axe-core compatibility, also setting `aria-invalid` as a host attribute is still advisable.
-
----
-
-## 4. axe-core findings
-
-### Automated test results (Chrome headless, axe-core 4.10.2)
-
-| axe rule         | Observed                                                               | Classification   | Notes                                                                  |
-| ---------------- | ---------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------- |
-| `color-contrast` | 4 violations, 5 nodes (help text and placeholder contrast below 4.5:1) | True violation   | Fixable with darker text colors; not related to ElementInternals       |
-| `label`          | Did not flag FACE elements with `internals.ariaLabel` set              | Correctly passed | When `ariaLabel` string fallback is set, axe can read it from the host |
-| `color-contrast` | Shadow input text passes                                               | True pass        | axe traverses into open shadow roots for contrast checks               |
-
-### Expected violations and false positives
-
-| axe rule                     | Behavior                                                  | Classification                                     | Notes                                                                                                |
-| ---------------------------- | --------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `label`                      | May flag custom element as an input without a label       | False positive if `ariaLabel` is set via internals | axe cannot always read `ElementInternals` ARIA; Deque tracking under elementInternals-labeled issues |
-| `aria-input-field-name`      | May report missing accessible name on custom element host | False positive when name is set via internals      | Same root cause; axe inspects attributes, not internals                                              |
-| `color-contrast`             | Flags help text and placeholder contrast                  | True violation                                     | Not FACE-specific; fix with darker muted text colors                                                 |
-| `form-field-multiple-labels` | N/A for this PoC                                          | N/A                                                | Would apply if both `<label for>` and `aria-labelledby` were active simultaneously                   |
-| `aria-valid-attr-value`      | Passes when IDREFs resolve in the same scope              | True pass                                          | Only fails if an IDREF points to a nonexistent ID in the same scope                                  |
-
-### axe-core and ElementInternals compatibility status
-
-As of axe-core 4.10.x:
-
-- axe **can** traverse open shadow DOM and inspect shadow-internal elements.
-- axe **cannot** reliably read `ElementInternals.ariaLabel` or other ARIA properties set via the internals API. It primarily inspects DOM attributes.
-- This means FACE components that rely on `internals.ariaLabel` (without a corresponding `aria-label` host attribute) **may produce false positives** for name-related rules.
-- Deque has acknowledged this gap; work is tracked under their elementInternals-labeled issues. Timeline is goal-based (community has referenced mid-to-late 2025 calendar targets; adjust expectations for current quarter).
-
-### Recommended axe policy for CI
-
-1. **Prefer host attributes over internals-only ARIA** when possible, so axe can verify the name. Example: if the consumer provides `aria-labelledby`, that attribute lives on the host and axe can read it.
-2. **Document known false positives** per component in Storybook test-runner config (`test-runner.ts`), with a link to the upstream Deque issue.
-3. **Do not disable entire rules globally.** Use story-level or element-level exclusions so real violations are still caught.
-4. **Re-evaluate exclusions** when axe-core ships ElementInternals support (monitor the Deque changelog).
-
----
-
-## 5. Screen reader testing notes
-
-### VoiceOver (macOS) — manual testing completed
-
-| Scenario                 | Name announced                        | Description announced                  | Error/invalid announced       | Result                |
-| ------------------------ | ------------------------------------- | -------------------------------------- | ----------------------------- | --------------------- |
-| A (Light DOM siblings)   | Yes — "Email address"                 | Yes — "We will never share your email" | N/A                           | Pass                  |
-| B (Slotted children)     | Yes — "Phone number"                  | Yes — "Include country code"           | N/A                           | Pass                  |
-| C (Shadow internal)      | Yes — "Search query"                  | Yes — "Type keywords to search"        | N/A                           | Pass                  |
-| D (Cross-root label-for) | Yes — "Favorite color"                | N/A                                    | N/A                           | Pass                  |
-| 3a internals-only        | No label announced (placeholder only) | N/A                                    | N/A                           | Pass (proves failure) |
-| 3a input-only            | Yes — "Search via shadow input"       | N/A                                    | N/A                           | Pass                  |
-| 3a dual-write            | Yes — "Search via dual write"         | N/A                                    | N/A                           | Pass                  |
-| 3b Validation            | N/A                                   | N/A                                    | Yes — invalid state announced | Pass                  |
-
-### Strategy isolation findings (VoiceOver)
-
-| Strategy         | Label announced on focus?                         | Confirms                                                       |
-| ---------------- | ------------------------------------------------- | -------------------------------------------------------------- |
-| `internals-only` | **No** — VO reads placeholder or "edit text" only | `internals.ariaLabel` alone does NOT reach the focused control |
-| `input-only`     | **Yes** — VO reads the label                      | Shadow input `aria-label` is what SRs read                     |
-| `dual-write`     | **Yes** — VO reads the label                      | Resilient; recommended pattern                                 |
-
-### Key SR observations
-
-- `delegatesFocus` correctly routes focus to the shadow input; VoiceOver interacts with that element.
-- `internals.ariaLabel` writes to the host node's a11y identity, but VoiceOver does not announce it when focus is on the shadow input. This confirms the dual-write requirement.
-- `<label for="...">` + `delegatesFocus` (Scenario D) correctly announces the label in VoiceOver. Both click-to-focus and name announcement work.
-- `internals.ariaInvalid = 'true'` is announced by VoiceOver when the field enters an invalid state.
-
-### NVDA (Windows)
-
-> Not tested in this session. Results expected to be similar based on browser a11y tree exposure.
-
----
-
-## 6. Technical questions answered
-
-### Does native `<form>` submission and reset see the control's value as intended?
-
-**Yes.** `setFormValue()` integrates seamlessly with `FormData`, `submit`, and `reset`. The `formResetCallback` and `formDisabledCallback` lifecycle hooks fire as expected. Browser support is solid (Chrome 77+, Firefox 98+, Safari 16.4+).
-
-### Does the a11y tree resolve IDREFs for the component's light DOM siblings?
-
-**Yes.** When `aria-labelledby` / `aria-describedby` are set on the host and reference light DOM IDs, the tree resolves them correctly across all tested browsers. This is the **recommended primary pattern**.
-
-### Does it resolve IDREFs for IDs on slotted light DOM children?
-
-**Partially.** Slotted elements stay in light DOM, so their IDs are reachable from the host. However, the _shadow input_ cannot directly reference those IDs. Use host-level ARIA attributes or the `ariaLabelledByElements` API (Chrome-only) to bridge the gap.
-
-### Does it resolve IDREFs that live only in shadow DOM?
-
-**Yes, within the same shadow root.** The shadow input can reference shadow-scoped IDs for label and help elements that are co-located in the shadow tree. External elements cannot reference shadow IDs (by design).
-
-### How should we use `aria-labelledby`, `aria-describedby`, `aria-errormessage` vs `ElementInternals.aria*`?
-
-**Layered approach:**
-
-1. **Primary:** Host-level `aria-labelledby` / `aria-describedby` referencing light DOM IDs. Works cross-browser, axe-compatible.
-2. **Internal:** Shadow-scoped `aria-labelledby` on the internal input for component-owned labels/descriptions.
-3. **Fallback:** `internals.ariaLabel` as a string fallback when no IDREF is available.
-4. **Progressive enhancement:** `ariaLabelledByElements` / `ariaDescribedByElements` when the browser supports element references.
-
-### Cross-root limitations
-
-Align with the project's semantic HTML and ARIA guide: shadow DOM scopes IDs, and no production-ready cross-root ARIA solution exists yet. `referenceTarget` is an emerging proposal (tracked in the guide). Until it ships broadly, the layered approach above is the practical strategy.
-
----
-
-## 7. Recommendations for the direction PR
-
-1. **Adopt ElementInternals and FACE** for all form-participating 2nd-gen components. The API is mature enough for form value, validation, and disabled state. ARIA labelling requires the layered fallback strategy described above.
-
-2. **Primary labelling pattern:** Host-level `aria-labelledby` / `aria-describedby` referencing light DOM IDs (scenario A). This is the most compatible and axe-friendly approach.
-
-3. **Slot-based labelling** (scenario B) is viable but requires the component to wire host-level ARIA from slotted content (not shadow-input-level IDREF). Document this in the shared mixin.
-
-4. **axe-core policy:** Story-level exclusions for known false positives; never global disables. Re-evaluate when Deque ships ElementInternals support.
-
-5. **Monitor `referenceTarget`** and `ariaLabelledByElements` for future simplification. These remove the need for the layered approach but are not cross-browser yet.
-
-6. **Shared mixin** should encapsulate: `formAssociated`, `attachInternals()`, `setFormValue()`, `setValidity()` mirroring, reset/disabled/restore callbacks, and the layered ARIA wiring strategy.
-
----
-
-## 8. Comparison with 1st-gen `sp-textfield` patterns
-
-The 1st-gen `TextfieldBase` (in `1st-gen/packages/textfield/src/Textfield.ts`) uses a different approach:
-
-| Concern                 | 1st-gen pattern                                                                       | ElementInternals (this PoC)                                                                     |
-| ----------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| Form value submission   | `name` attribute forwarded to shadow `<input>`                                        | `setFormValue()` on internals; no `name` needed on shadow input                                 |
-| Form reset              | Not natively supported; requires custom logic                                         | `formResetCallback()` fires automatically                                                       |
-| Form disabled           | `disabled` property on component; manual forwarding                                   | `formDisabledCallback()` fires from `<fieldset disabled>` automatically                         |
-| Constraint validation   | Custom `checkValidity()` comparing `inputElement.checkValidity()` + regex + minlength | `setValidity()` mirrors inner input; `reportValidity()` shows native browser tooltip            |
-| Accessible name         | `aria-label` on shadow `<input>` from `label` prop or `appliedLabel`                  | Layered: host `aria-labelledby` (IDREF), `internals.ariaLabel` (string), or shadow-scoped IDREF |
-| Help text / description | `ManageHelpText` mixin; `aria-describedby` on shadow input → `helpTextId`             | Host `aria-describedby` (light DOM IDREF) or shadow-scoped `aria-describedby`                   |
-| Help text slots         | `help-text` and `negative-help-text` slots                                            | `label` and `help-text` slots (can be standardized per direction PR)                            |
-| Focus management        | `Focusable` mixin; `focusElement` getter                                              | `delegatesFocus: true` on shadow root                                                           |
-| State indication        | `valid` / `invalid` properties reflected to attributes                                | `internals.ariaInvalid`; can also use `:state(invalid)` custom state                            |
-
-### Key improvements from ElementInternals
-
-1. **Native form participation** without proxying `name` onto the shadow input. The custom element appears as a real form control in `FormData`.
-2. **Lifecycle callbacks** (`formResetCallback`, `formDisabledCallback`, `formStateRestoreCallback`) replace manual event listeners and ancestor-walking logic.
-3. **Constraint validation** via `setValidity()` + `reportValidity()` integrates with the browser's native validation UI (tooltip positioning, `:invalid` pseudo-class on the host).
-4. **Custom states** via `internals.states` (e.g., `:state(invalid)`) offer CSS hooks without attribute reflection, reducing attribute churn.
-5. **ARIA via internals** (`ariaLabel`, `ariaRequired`, etc.) sets properties on the host's a11y node without polluting host attributes; but axe-core compatibility is a tradeoff (see section 4).
-
-### What does not improve
-
-1. **Cross-root IDREF** remains unsolved. ElementInternals does not change the fact that shadow-scoped IDs are not reachable from light DOM.
-2. **`ariaLabelledByElements`** (element reference API) is Chrome-only; not a cross-browser solution yet.
-3. **axe-core visibility** is worse when using internals-only ARIA, since axe inspects attributes. The 1st-gen approach of putting `aria-label` directly on the shadow input is more axe-friendly.
-
----
-
-## 9. Browser and tool versions (fill in during testing)
-
-| Tool                    | Version      |
-| ----------------------- | ------------ |
-| Chrome                  |              |
-| Firefox                 |              |
-| Safari                  |              |
-| VoiceOver               |              |
-| NVDA                    |              |
-| axe-core                | 4.10.2 (CDN) |
-| OS (macOS)              |              |
-| OS (Windows, if tested) |              |
-
----
-
-## 10. Upstream references
-
-- [ElementInternals spec](https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface)
-- [Form-associated custom elements (FACE)](https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements)
-- [Deque axe-core elementInternals issues](https://github.com/dequelabs/axe-core/labels/elementInternals)
-- [Cross-root ARIA delegation explainer](https://leobalter.github.io/cross-root-aria-delegation/)
-- [Reference target explainer (WICG)](https://github.com/nicknisi/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md)
-- [Can I use: `shadowrootreferencetarget`](https://caniuse.com/mdn-html_elements_template_shadowrootreferencetarget)
-- [Chrome platform status: reference target](https://cr-status.appspot.com/feature/5188237101891584)
-- CEM and ElementInternals: link to specific CEM PR when available (Benny Powers, Red Hat)
-- SWC internal: [Semantic HTML and ARIA guide](../../2nd-gen/packages/swc/.storybook/guides/accessibility-guides/semantic_html_aria.mdx)
-
----
-
-## 11. Decisions from this exercise
-
-These are the confirmed decisions that should be adopted in the direction PR (SWC-2054) and applied to all 2nd-gen form components.
-
-### Confirmed: adopt
-
-| Decision                                                                                      | Evidence                                                                                                        | Impact                                                                                            |
-| --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| Use `ElementInternals` + `static formAssociated = true` for all form-participating components | Form value, reset, disabled, validation all work natively. No polyfills. Chrome 77+, Firefox 98+, Safari 16.4+. | Replaces custom form logic from 1st-gen                                                           |
-| Always dual-write accessible names (internals + shadow input)                                 | `internals-only` strategy fails to announce in VoiceOver. Only the shadow input's `aria-label` is read by SRs.  | Shared mixin must implement `#applyLabel()` writing to both                                       |
-| Primary labelling: host `aria-labelledby` referencing light DOM IDs                           | Scenario A passes in all browsers and is axe-compatible                                                         | Consumers provide labels in light DOM; component resolves and forwards                            |
-| Support slot-based labels via `slotchange` wiring                                             | Scenario B passes; component reads slotted text and dual-writes                                                 | Standardize `label` and `help-text` slot names across all form fields                             |
-| Use `delegatesFocus: true` for focus management                                               | Replaces 1st-gen `Focusable` mixin + `focusElement` getter. `<label for>` click-to-focus confirmed working.     | Simpler, fewer moving parts                                                                       |
-| `internals.ariaInvalid` is sufficient for SR invalid announcements                            | VoiceOver announces invalid state when set via internals                                                        | No need to redundantly set `aria-invalid` attribute for SR purposes (but still advisable for axe) |
-| axe policy: story-level exclusions, never global disables                                     | axe cannot read internals-only ARIA; dual-write mitigates most issues                                           | Document exclusions with links to upstream Deque issues                                           |
-
-### Confirmed: avoid
-
-| Decision                                              | Reason                                                                |
-| ----------------------------------------------------- | --------------------------------------------------------------------- |
-| Do NOT rely on `internals.ariaLabel` alone            | SRs do not announce it on the focused shadow input                    |
-| Do NOT assume cross-root ARIA works                   | No production solution exists; `referenceTarget` is not cross-browser |
-| Do NOT use `ariaLabelledByElements` as sole mechanism | Chrome 130+ only; use as progressive enhancement with try-catch       |
-| Do NOT disable axe rules globally in CI               | Masks real violations; use per-story exclusions instead               |
-
-### Build next: shared form mixin
-
-The mixin should encapsulate:
-
-1. `static formAssociated = true`
-2. `this.attachInternals()` in constructor
-3. `setFormValue()` on every input change
-4. `setValidity()` mirroring the inner input's `ValidityState`
-5. `formResetCallback()` — restore to default attribute value
-6. `formDisabledCallback()` — forward disabled to inner input
-7. `formStateRestoreCallback()` — restore on browser back/forward
-8. Dual-write ARIA labelling (`#applyLabel` / `#applyDescription`)
-9. Slot wiring with `slotchange` listener (with deduplication guard)
-10. `delegatesFocus: true` on shadow root
-
-### Monitor for future simplification
-
-| Emerging API                      | When it ships cross-browser                                                                 | What it replaces                                                            |
-| --------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `referenceTarget`                 | Track [Can I Use](https://caniuse.com/mdn-html_elements_template_shadowrootreferencetarget) | Eliminates need for text-based dual-write; allows direct IDREF across roots |
-| `ariaLabelledByElements`          | Firefox + Safari pending                                                                    | Eliminates need to resolve text from IDs; direct element references         |
-| axe-core ElementInternals support | Deque tracking under elementInternals label                                                 | Removes need for dual-write for axe compatibility                           |
-
----
-
-## 12. Files in this PoC
-
-| File           | Purpose                                                        |
-| -------------- | -------------------------------------------------------------- |
-| `index.html`   | Self-contained demo; opens directly in StackBlitz or a browser |
-| `SUMMARY.md`   | This document; internal findings for the direction PR          |
-| `package.json` | Minimal Vite config so StackBlitz can serve the demo           |

From ade781dee6311ad74982393d67f733d83777244c Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Tue, 19 May 2026 21:19:00 +0530
Subject: [PATCH 11/13] feat: add internals.role scenarios for textbox and
 combobox

Tests whether setting internals.role on the host changes labelling
behavior. Includes:
- role="textbox" with internals-only vs dual-write
- role="combobox" with internals-only vs dual-write
- no-delegatesFocus variant to test if host becomes focused element

Answers reviewer question: what are the constraints for labelling
when the host has an internals role?

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/index.html | 216 +++++++++++++++++++++
 1 file changed, 216 insertions(+)

diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index 7d740ee2c1..65ead83787 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -542,6 +542,123 @@ <h3>3a. Isolated ARIA labelling strategies (one per field)</h3>
       </div>
     </div>
 
+    <div class="scenario">
+      <h3>
+        3c.
+        <code>internals.role</code>
+        and labelling constraints
+      </h3>
+      <p>
+        When the host has an explicit role via
+        <code>internals.role</code>
+        , does that change how labelling works? Does the host become the
+        "primary" accessible element, or does
+        <code>delegatesFocus</code>
+        still route SR interaction to the shadow input?
+      </p>
+      <form id="form-3c">
+        <div class="field-group">
+          <code>internals.role = "textbox" + internals-only label</code>
+          <face-text-field
+            id="field-3c-textbox-internals"
+            name="role-textbox-internals"
+            internals-role="textbox"
+            use-internals-aria-label="Textbox with internals role"
+            labelling-strategy="internals-only"
+            placeholder="role=textbox, internals.ariaLabel only"
+          ></face-text-field>
+          <span class="help-text">
+            Host has
+            <code>role="textbox"</code>
+            via internals +
+            <code>internals.ariaLabel</code>
+            . Does the SR now announce the label because the host IS the
+            textbox?
+          </span>
+        </div>
+        <div class="field-group">
+          <code>internals.role = "textbox" + dual-write label</code>
+          <face-text-field
+            id="field-3c-textbox-dual"
+            name="role-textbox-dual"
+            internals-role="textbox"
+            use-internals-aria-label="Textbox dual write"
+            labelling-strategy="dual-write"
+            placeholder="role=textbox, dual-write"
+          ></face-text-field>
+          <span class="help-text">
+            Host has
+            <code>role="textbox"</code>
+            + dual-write. Baseline comparison.
+          </span>
+        </div>
+        <div class="field-group">
+          <code>internals.role = "combobox" + internals-only label</code>
+          <face-text-field
+            id="field-3c-combobox-internals"
+            name="role-combobox-internals"
+            internals-role="combobox"
+            use-internals-aria-label="Combobox with internals role"
+            labelling-strategy="internals-only"
+            placeholder="role=combobox, internals.ariaLabel only"
+          ></face-text-field>
+          <span class="help-text">
+            Host has
+            <code>role="combobox"</code>
+            via internals +
+            <code>internals.ariaLabel</code>
+            . Combobox is a composite widget — does the SR treat the host as the
+            primary control?
+          </span>
+        </div>
+        <div class="field-group">
+          <code>internals.role = "combobox" + dual-write label</code>
+          <face-text-field
+            id="field-3c-combobox-dual"
+            name="role-combobox-dual"
+            internals-role="combobox"
+            use-internals-aria-label="Combobox dual write"
+            labelling-strategy="dual-write"
+            placeholder="role=combobox, dual-write"
+          ></face-text-field>
+          <span class="help-text">
+            Host has
+            <code>role="combobox"</code>
+            + dual-write. Baseline comparison.
+          </span>
+        </div>
+        <div class="field-group">
+          <code>internals.role = "textbox" + NO delegatesFocus</code>
+          <face-text-field-no-delegate
+            id="field-3c-textbox-no-delegate"
+            name="role-textbox-no-delegate"
+            internals-role="textbox"
+            use-internals-aria-label="Textbox no delegatesFocus"
+            labelling-strategy="internals-only"
+            placeholder="role=textbox, no delegatesFocus"
+          ></face-text-field-no-delegate>
+          <span class="help-text">
+            Same as above but
+            <strong>without</strong>
+            <code>delegatesFocus</code>
+            . Does the host now become the focused element and announce the
+            label?
+          </span>
+        </div>
+      </form>
+      <div class="note">
+        <strong>Key question:</strong>
+        When
+        <code>internals.role = "textbox"</code>
+        and the host is the element with a role, does
+        <code>internals.ariaLabel</code>
+        finally get announced? Or does
+        <code>delegatesFocus</code>
+        still send focus to the shadow input, bypassing the host's role
+        entirely?
+      </div>
+    </div>
+
     <div class="scenario">
       <h3>
         3b.
@@ -649,6 +766,7 @@ <h2>5. IDREF matrix results</h2>
             'internal-label',
             'internal-help',
             'use-internals-aria-label',
+            'internals-role',
             'min-value',
             'aria-label',
             'aria-labelledby',
@@ -815,6 +933,11 @@ <h2>5. IDREF matrix results</h2>
                 this.#applyLabel(newVal);
               }
               break;
+            case 'internals-role':
+              if (newVal !== null) {
+                this.#internals.role = newVal;
+              }
+              break;
             case 'aria-label':
               if (newVal !== null) {
                 this.#applyLabel(newVal);
@@ -929,6 +1052,9 @@ <h2>5. IDREF matrix results</h2>
           const internalHelp = this.getAttribute('internal-help');
           if (internalHelp) this.#updateInternalHelp(internalHelp);
 
+          const internalsRole = this.getAttribute('internals-role');
+          if (internalsRole) this.#internals.role = internalsRole;
+
           const internalsAriaLabel = this.getAttribute(
             'use-internals-aria-label'
           );
@@ -1160,6 +1286,96 @@ <h2>5. IDREF matrix results</h2>
 
       customElements.define('face-text-field', FaceTextField);
 
+      /**
+       * Variant WITHOUT delegatesFocus to test whether removing it
+       * changes how internals.role + internals.ariaLabel interact.
+       * If delegatesFocus is what bypasses the host role, then without
+       * it the host should be the focused element and announce its label.
+       */
+      class FaceTextFieldNoDelegate extends FaceTextField {
+        constructor() {
+          // Override: we need to re-create without delegatesFocus
+          // Since we can't call super() and re-attach shadow, we use a
+          // workaround: this class inherits everything except the shadow
+          // root configuration.
+          HTMLElement.prototype.constructor.call(
+            Object.setPrototypeOf(this, FaceTextFieldNoDelegate.prototype)
+          );
+        }
+      }
+
+      // Simpler approach: define a minimal standalone version without delegatesFocus
+      class FaceTextFieldNoDelegateFocus extends HTMLElement {
+        static formAssociated = true;
+
+        static get observedAttributes() {
+          return [
+            'value',
+            'placeholder',
+            'type',
+            'use-internals-aria-label',
+            'internals-role',
+            'labelling-strategy',
+          ];
+        }
+
+        #internals;
+        #input;
+
+        constructor() {
+          super();
+          this.#internals = this.attachInternals();
+          const shadow = this.attachShadow({ mode: 'open' });
+          shadow.innerHTML = `
+            <style>
+              :host { display: inline-flex; min-width: 200px; }
+              input {
+                font: inherit;
+                padding: 0.5rem 0.75rem;
+                border: 1px solid #d1d5db;
+                border-radius: 6px;
+                width: 100%;
+              }
+              input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
+            </style>
+            <input id="internal-input" part="input" />
+          `;
+          this.#input = shadow.getElementById('internal-input');
+          this.#input.addEventListener('input', () => {
+            this.#internals.setFormValue(this.#input.value);
+          });
+        }
+
+        connectedCallback() {
+          const role = this.getAttribute('internals-role');
+          if (role) this.#internals.role = role;
+
+          const label = this.getAttribute('use-internals-aria-label');
+          if (label) {
+            const strategy =
+              this.getAttribute('labelling-strategy') || 'dual-write';
+            if (strategy === 'internals-only' || strategy === 'dual-write') {
+              this.#internals.ariaLabel = label;
+            }
+            if (strategy === 'input-only' || strategy === 'dual-write') {
+              this.#input.setAttribute('aria-label', label);
+            }
+          }
+
+          const placeholder = this.getAttribute('placeholder');
+          if (placeholder) this.#input.placeholder = placeholder;
+        }
+
+        get value() {
+          return this.#input?.value ?? '';
+        }
+      }
+
+      customElements.define(
+        'face-text-field-no-delegate',
+        FaceTextFieldNoDelegateFocus
+      );
+
       // ===================================================================
       // Form event handlers
       // ===================================================================

From d671b1b4ec0c23fb3acdddc6e57499d7010f78fc Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Tue, 19 May 2026 21:55:45 +0530
Subject: [PATCH 12/13] chore: remove combobox scenarios from role testing

Combobox will be covered in its own dedicated PoC (SWC-2053).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 research/form-associated-ce-poc/index.html | 35 ----------------------
 1 file changed, 35 deletions(-)

diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index 65ead83787..3e6aca081e 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -592,41 +592,6 @@ <h3>
             + dual-write. Baseline comparison.
           </span>
         </div>
-        <div class="field-group">
-          <code>internals.role = "combobox" + internals-only label</code>
-          <face-text-field
-            id="field-3c-combobox-internals"
-            name="role-combobox-internals"
-            internals-role="combobox"
-            use-internals-aria-label="Combobox with internals role"
-            labelling-strategy="internals-only"
-            placeholder="role=combobox, internals.ariaLabel only"
-          ></face-text-field>
-          <span class="help-text">
-            Host has
-            <code>role="combobox"</code>
-            via internals +
-            <code>internals.ariaLabel</code>
-            . Combobox is a composite widget — does the SR treat the host as the
-            primary control?
-          </span>
-        </div>
-        <div class="field-group">
-          <code>internals.role = "combobox" + dual-write label</code>
-          <face-text-field
-            id="field-3c-combobox-dual"
-            name="role-combobox-dual"
-            internals-role="combobox"
-            use-internals-aria-label="Combobox dual write"
-            labelling-strategy="dual-write"
-            placeholder="role=combobox, dual-write"
-          ></face-text-field>
-          <span class="help-text">
-            Host has
-            <code>role="combobox"</code>
-            + dual-write. Baseline comparison.
-          </span>
-        </div>
         <div class="field-group">
           <code>internals.role = "textbox" + NO delegatesFocus</code>
           <face-text-field-no-delegate

From c67fd9ea02826840fb08bacc42ea09e8fd0fd64a Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Wed, 20 May 2026 12:57:34 +0530
Subject: [PATCH 13/13] refactor: split PoC into separate modules and remove
 cross-root IDREF JS

Separates the single-file PoC into navigable modules for StackBlitz:
- face-text-field.js: main FACE component (delegatesFocus)
- face-text-field-no-delegate.js: variant without delegatesFocus
- page-handlers.js: form handlers, matrix introspection, axe-core
- index.html: pure HTML scenarios (no inline JS)

Removes all JS that actively resolves cross-root IDREFs:
- #wireAriaRelationships (ariaLabelledByElements, ariaDescribedByElements)
- #handleSlotWiring (slotchange-based label forwarding)
- #resolveTextFromIds (text extraction from light DOM IDs)
- #wireImplicitLabel (reading internals.labels text)

What remains is ElementInternals out of the box: internals.ariaLabel,
internals.role, and the labelling-strategy attribute to isolate which
layer (internals-only vs input-only vs dual-write) carries the name.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../face-text-field-no-delegate.js            | 103 ++
 .../form-associated-ce-poc/face-text-field.js | 434 +++++++++
 research/form-associated-ce-poc/index.html    | 914 +-----------------
 .../form-associated-ce-poc/page-handlers.js   | 263 +++++
 4 files changed, 804 insertions(+), 910 deletions(-)
 create mode 100644 research/form-associated-ce-poc/face-text-field-no-delegate.js
 create mode 100644 research/form-associated-ce-poc/face-text-field.js
 create mode 100644 research/form-associated-ce-poc/page-handlers.js

diff --git a/research/form-associated-ce-poc/face-text-field-no-delegate.js b/research/form-associated-ce-poc/face-text-field-no-delegate.js
new file mode 100644
index 0000000000..33cc70f437
--- /dev/null
+++ b/research/form-associated-ce-poc/face-text-field-no-delegate.js
@@ -0,0 +1,103 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ *
+ * Variant WITHOUT delegatesFocus.
+ * Tests whether removing delegatesFocus changes how internals.role
+ * and internals.ariaLabel interact with the accessibility tree.
+ *
+ * If delegatesFocus is what causes the shadow input to be the
+ * "focused" element, then without it the HOST should receive focus
+ * and the SR should read internals.ariaLabel from the host.
+ */
+export class FaceTextFieldNoDelegate extends HTMLElement {
+  static formAssociated = true;
+
+  static get observedAttributes() {
+    return [
+      'value',
+      'placeholder',
+      'type',
+      'use-internals-aria-label',
+      'internals-role',
+      'labelling-strategy',
+    ];
+  }
+
+  #internals;
+  #input;
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+
+    // No delegatesFocus — focus stays on the host unless user clicks input
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          min-width: 200px;
+        }
+        input {
+          font: inherit;
+          padding: 0.5rem 0.75rem;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          outline: none;
+          width: 100%;
+        }
+        input:focus {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+        }
+      </style>
+      <input id="internal-input" part="input" />
+    `;
+
+    this.#input = shadow.getElementById('internal-input');
+    this.#input.addEventListener('input', () => {
+      this.#internals.setFormValue(this.#input.value);
+    });
+  }
+
+  connectedCallback() {
+    const role = this.getAttribute('internals-role');
+    if (role) {
+      this.#internals.role = role;
+    }
+
+    const label = this.getAttribute('use-internals-aria-label');
+    if (label) {
+      const strategy = this.getAttribute('labelling-strategy') || 'dual-write';
+      if (strategy === 'internals-only' || strategy === 'dual-write') {
+        this.#internals.ariaLabel = label;
+      }
+      if (strategy === 'input-only' || strategy === 'dual-write') {
+        this.#input.setAttribute('aria-label', label);
+      }
+    }
+
+    const placeholder = this.getAttribute('placeholder');
+    if (placeholder) {
+      this.#input.placeholder = placeholder;
+    }
+
+    const value = this.getAttribute('value');
+    if (value) {
+      this.#input.value = value;
+    }
+  }
+
+  get value() {
+    return this.#input?.value ?? '';
+  }
+
+  set value(v) {
+    if (this.#input) {
+      this.#input.value = v;
+      this.#internals.setFormValue(v);
+    }
+  }
+}
+
+customElements.define('face-text-field-no-delegate', FaceTextFieldNoDelegate);
diff --git a/research/form-associated-ce-poc/face-text-field.js b/research/form-associated-ce-poc/face-text-field.js
new file mode 100644
index 0000000000..52478a3feb
--- /dev/null
+++ b/research/form-associated-ce-poc/face-text-field.js
@@ -0,0 +1,434 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ *
+ * Minimal form-associated text field custom element.
+ * Tests what ElementInternals does OUT OF THE BOX — no custom JS
+ * that resolves cross-root IDREFs or forwards text between scopes.
+ *
+ * What this component does:
+ * - static formAssociated = true
+ * - ElementInternals for form value, validation, role, and ARIA
+ * - labelling-strategy attribute to isolate which layer carries the name
+ * - Constraint validation (setValidity, reportValidity)
+ * - formResetCallback, formDisabledCallback, formStateRestoreCallback
+ *
+ * What this component does NOT do (intentionally removed):
+ * - No cross-root IDREF resolution
+ * - No reading text from light DOM elements by ID
+ * - No slotchange-based label forwarding
+ * - No ariaLabelledByElements / ariaDescribedByElements usage
+ */
+export class FaceTextField extends HTMLElement {
+  static formAssociated = true;
+
+  static get observedAttributes() {
+    return [
+      'value',
+      'name',
+      'required',
+      'pattern',
+      'placeholder',
+      'type',
+      'disabled',
+      'internal-label',
+      'internal-help',
+      'use-internals-aria-label',
+      'internals-role',
+      'labelling-strategy',
+      'min-value',
+      'aria-label',
+      'aria-errormessage',
+    ];
+  }
+
+  #internals;
+  #input;
+  #shadowLabel;
+  #shadowHelp;
+
+  constructor() {
+    super();
+    this.#internals = this.attachInternals();
+
+    const shadow = this.attachShadow({
+      mode: 'open',
+      delegatesFocus: true,
+    });
+    shadow.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          flex-direction: column;
+          gap: 4px;
+          min-width: 200px;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+          pointer-events: none;
+        }
+
+        .internal-label {
+          font-weight: 600;
+          font-size: 0.875rem;
+        }
+
+        .internal-help {
+          font-size: 0.8125rem;
+          color: #6b7280;
+        }
+
+        input {
+          font: inherit;
+          padding: 0.5rem 0.75rem;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          outline: none;
+          transition: border-color 0.15s;
+        }
+
+        input:focus {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+        }
+
+        input:disabled {
+          background: #f3f4f6;
+          cursor: not-allowed;
+        }
+
+        :host(:state(invalid)) input,
+        input:invalid {
+          border-color: #dc2626;
+        }
+
+        ::slotted([slot='label']) {
+          font-weight: 600;
+          font-size: 0.875rem;
+        }
+
+        ::slotted([slot='help-text']) {
+          font-size: 0.8125rem;
+          color: #6b7280;
+        }
+      </style>
+
+      <slot name="label"></slot>
+      <span class="internal-label" id="shadow-label" hidden></span>
+
+      <input id="internal-input" part="input" />
+
+      <slot name="help-text"></slot>
+      <span class="internal-help" id="shadow-help" hidden></span>
+    `;
+
+    this.#input = shadow.getElementById('internal-input');
+    this.#shadowLabel = shadow.getElementById('shadow-label');
+    this.#shadowHelp = shadow.getElementById('shadow-help');
+
+    this.#input.addEventListener('input', () => {
+      this.#syncValue();
+      this.#validate();
+    });
+
+    this.#input.addEventListener('change', () => {
+      this.#validate();
+    });
+  }
+
+  connectedCallback() {
+    this.#syncFromAttributes();
+    this.#syncValue();
+    this.#validate();
+  }
+
+  attributeChangedCallback(name, _oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        if (this.#input && this.#input.value !== newVal) {
+          this.#input.value = newVal ?? '';
+          this.#syncValue();
+        }
+        break;
+      case 'placeholder':
+        if (this.#input) {
+          this.#input.placeholder = newVal ?? '';
+        }
+        break;
+      case 'type':
+        if (this.#input) {
+          this.#input.type = newVal ?? 'text';
+        }
+        break;
+      case 'required':
+        if (this.#input) {
+          this.#input.required = newVal !== null;
+        }
+        break;
+      case 'pattern':
+        if (this.#input) {
+          this.#input.pattern = newVal ?? '';
+        }
+        break;
+      case 'disabled':
+        if (this.#input) {
+          this.#input.disabled = newVal !== null;
+        }
+        break;
+      case 'internal-label':
+        this.#updateInternalLabel(newVal);
+        break;
+      case 'internal-help':
+        this.#updateInternalHelp(newVal);
+        break;
+      case 'use-internals-aria-label':
+        if (newVal !== null) {
+          this.#applyLabel(newVal);
+        }
+        break;
+      case 'internals-role':
+        if (newVal !== null) {
+          this.#internals.role = newVal;
+        }
+        break;
+      case 'aria-label':
+        if (newVal !== null) {
+          this.#applyLabel(newVal);
+        }
+        break;
+      case 'min-value':
+        this.#validate();
+        break;
+      case 'aria-errormessage':
+        break;
+    }
+  }
+
+  // -- Public form API -------------------------------------------------------
+
+  get form() {
+    return this.#internals.form;
+  }
+
+  get name() {
+    return this.getAttribute('name');
+  }
+
+  get type() {
+    return this.localName;
+  }
+
+  get value() {
+    return this.#input?.value ?? '';
+  }
+
+  set value(v) {
+    if (this.#input) {
+      this.#input.value = v;
+      this.#syncValue();
+    }
+  }
+
+  get validity() {
+    return this.#internals.validity;
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  get willValidate() {
+    return this.#internals.willValidate;
+  }
+
+  checkValidity() {
+    this.#validate();
+    return this.#internals.checkValidity();
+  }
+
+  reportValidity() {
+    this.#validate();
+    return this.#internals.reportValidity();
+  }
+
+  formResetCallback() {
+    const defaultValue = this.getAttribute('value') ?? '';
+    this.#input.value = defaultValue;
+    this.#syncValue();
+    this.#validate();
+    this.#clearErrorState();
+  }
+
+  formDisabledCallback(disabled) {
+    this.#input.disabled = disabled;
+    if (disabled) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  formStateRestoreCallback(state, _mode) {
+    this.#input.value = state ?? '';
+    this.#syncValue();
+  }
+
+  // -- Private methods -------------------------------------------------------
+
+  #syncFromAttributes() {
+    const attrs = { value: '', placeholder: '', type: 'text' };
+    for (const [attr, fallback] of Object.entries(attrs)) {
+      const val = this.getAttribute(attr) ?? fallback;
+      if (attr === 'value') {
+        this.#input.value = val;
+      } else {
+        this.#input[attr] = val;
+      }
+    }
+
+    if (this.hasAttribute('required')) {
+      this.#input.required = true;
+    }
+    if (this.hasAttribute('pattern')) {
+      this.#input.pattern = this.getAttribute('pattern');
+    }
+    if (this.hasAttribute('disabled')) {
+      this.#input.disabled = true;
+    }
+
+    const internalLabel = this.getAttribute('internal-label');
+    if (internalLabel) {
+      this.#updateInternalLabel(internalLabel);
+    }
+
+    const internalHelp = this.getAttribute('internal-help');
+    if (internalHelp) {
+      this.#updateInternalHelp(internalHelp);
+    }
+
+    const internalsRole = this.getAttribute('internals-role');
+    if (internalsRole) {
+      this.#internals.role = internalsRole;
+    }
+
+    const internalsAriaLabel = this.getAttribute('use-internals-aria-label');
+    if (internalsAriaLabel) {
+      this.#applyLabel(internalsAriaLabel);
+    }
+
+    const hostAriaLabel = this.getAttribute('aria-label');
+    if (hostAriaLabel) {
+      this.#applyLabel(hostAriaLabel);
+    }
+  }
+
+  #syncValue() {
+    this.#internals.setFormValue(this.#input.value);
+  }
+
+  #validate() {
+    const input = this.#input;
+
+    const minValue = this.getAttribute('min-value');
+    if (minValue !== null && input.value !== '') {
+      const num = parseFloat(input.value);
+      if (!isNaN(num) && num < parseFloat(minValue)) {
+        this.#internals.setValidity(
+          { rangeUnderflow: true },
+          `Value must be at least ${minValue}.`,
+          input
+        );
+        this.#showErrorState();
+        return;
+      }
+    }
+
+    if (!input.validity.valid) {
+      this.#internals.setValidity(
+        input.validity,
+        input.validationMessage,
+        input
+      );
+      this.#showErrorState();
+    } else {
+      this.#internals.setValidity({});
+      this.#clearErrorState();
+    }
+  }
+
+  #showErrorState() {
+    this.#internals.ariaInvalid = 'true';
+    const errorId = this.getAttribute('aria-errormessage');
+    if (errorId) {
+      const errorEl = document.getElementById(errorId);
+      if (errorEl) {
+        errorEl.hidden = false;
+      }
+    }
+  }
+
+  #clearErrorState() {
+    this.#internals.ariaInvalid = 'false';
+    const errorId = this.getAttribute('aria-errormessage');
+    if (errorId) {
+      const errorEl = document.getElementById(errorId);
+      if (errorEl) {
+        errorEl.hidden = true;
+      }
+    }
+  }
+
+  #updateInternalLabel(text) {
+    if (text) {
+      this.#shadowLabel.textContent = text;
+      this.#shadowLabel.hidden = false;
+      this.#input.setAttribute('aria-labelledby', 'shadow-label');
+    } else {
+      this.#shadowLabel.hidden = true;
+      this.#input.removeAttribute('aria-labelledby');
+    }
+  }
+
+  #updateInternalHelp(text) {
+    if (text) {
+      this.#shadowHelp.textContent = text;
+      this.#shadowHelp.hidden = false;
+      const existing = this.#input.getAttribute('aria-describedby') ?? '';
+      if (!existing.includes('shadow-help')) {
+        this.#input.setAttribute(
+          'aria-describedby',
+          (existing + ' shadow-help').trim()
+        );
+      }
+    } else {
+      this.#shadowHelp.hidden = true;
+    }
+  }
+
+  get #labellingStrategy() {
+    return this.getAttribute('labelling-strategy') || 'dual-write';
+  }
+
+  /**
+   * Applies a label using the configured strategy.
+   * No cross-root resolution — just sets the value where configured.
+   */
+  #applyLabel(text) {
+    if (!text) {
+      return;
+    }
+    const strategy = this.#labellingStrategy;
+
+    if (strategy === 'internals-only' || strategy === 'dual-write') {
+      this.#internals.ariaLabel = this.#internals.ariaLabel || text;
+    }
+
+    if (strategy === 'input-only' || strategy === 'dual-write') {
+      if (!this.#input.hasAttribute('aria-labelledby')) {
+        this.#input.setAttribute('aria-label', text);
+      }
+    }
+  }
+}
+
+customElements.define('face-text-field', FaceTextField);
diff --git a/research/form-associated-ce-poc/index.html b/research/form-associated-ce-poc/index.html
index 3e6aca081e..eb6dba49a7 100644
--- a/research/form-associated-ce-poc/index.html
+++ b/research/form-associated-ce-poc/index.html
@@ -702,917 +702,11 @@ <h2>5. IDREF matrix results</h2>
     </table>
 
     <!-- ================================================================== -->
-    <!-- COMPONENT DEFINITION                                               -->
+    <!-- COMPONENT + PAGE SCRIPTS (separated into modules)                  -->
     <!-- ================================================================== -->
 
-    <script>
-      /**
-       * Minimal form-associated text field custom element.
-       *
-       * Demonstrates:
-       * - static formAssociated = true
-       * - ElementInternals for form value, validation, and ARIA
-       * - Slot-based and shadow-internal labelling
-       * - Constraint validation hooks (setValidity, reportValidity)
-       * - formResetCallback, formDisabledCallback, formStateRestoreCallback
-       */
-      class FaceTextField extends HTMLElement {
-        static formAssociated = true;
-
-        static get observedAttributes() {
-          return [
-            'value',
-            'name',
-            'required',
-            'pattern',
-            'placeholder',
-            'type',
-            'disabled',
-            'internal-label',
-            'internal-help',
-            'use-internals-aria-label',
-            'internals-role',
-            'min-value',
-            'aria-label',
-            'aria-labelledby',
-            'aria-describedby',
-            'aria-errormessage',
-          ];
-        }
-
-        #internals;
-        #input;
-        #shadowLabel;
-        #shadowHelp;
-        #slotListenersAttached = false;
-
-        constructor() {
-          super();
-          this.#internals = this.attachInternals();
-
-          const shadow = this.attachShadow({
-            mode: 'open',
-            delegatesFocus: true,
-          });
-          shadow.innerHTML = `
-      <style>
-        :host {
-          display: inline-flex;
-          flex-direction: column;
-          gap: 4px;
-          min-width: 200px;
-        }
-
-        :host([disabled]) {
-          opacity: 0.5;
-          pointer-events: none;
-        }
-
-        .internal-label {
-          font-weight: 600;
-          font-size: 0.875rem;
-        }
-
-        .internal-help {
-          font-size: 0.8125rem;
-          color: #6b7280;
-        }
-
-        input {
-          font: inherit;
-          padding: 0.5rem 0.75rem;
-          border: 1px solid #d1d5db;
-          border-radius: 6px;
-          outline: none;
-          transition: border-color 0.15s;
-        }
-
-        input:focus {
-          border-color: #3b82f6;
-          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
-        }
-
-        input:disabled {
-          background: #f3f4f6;
-          cursor: not-allowed;
-        }
-
-        :host(:state(invalid)) input,
-        input:invalid {
-          border-color: #dc2626;
-        }
-
-        ::slotted([slot='label']) {
-          font-weight: 600;
-          font-size: 0.875rem;
-        }
-
-        ::slotted([slot='help-text']) {
-          font-size: 0.8125rem;
-          color: #6b7280;
-        }
-      </style>
-
-      <slot name="label"></slot>
-      <span class="internal-label" id="shadow-label" hidden></span>
-
-      <input id="internal-input" part="input" />
-
-      <slot name="help-text"></slot>
-      <span class="internal-help" id="shadow-help" hidden></span>
-    `;
-
-          this.#input = shadow.getElementById('internal-input');
-          this.#shadowLabel = shadow.getElementById('shadow-label');
-          this.#shadowHelp = shadow.getElementById('shadow-help');
-
-          this.#input.addEventListener('input', () => {
-            this.#syncValue();
-            this.#validate();
-          });
-
-          this.#input.addEventListener('change', () => {
-            this.#validate();
-          });
-        }
-
-        connectedCallback() {
-          this.#syncFromAttributes();
-          this.#syncValue();
-          this.#validate();
-          this.#wireAriaRelationships();
-          this.#wireImplicitLabel();
-        }
-
-        /**
-         * If a <label for="..."> in light DOM targets this host,
-         * browsers may not consistently expose the implicit label
-         * on the internals' a11y node. Read the label text and set
-         * ariaLabel as a fallback when no explicit labelling exists.
-         */
-        #wireImplicitLabel() {
-          requestAnimationFrame(() => {
-            if (this.#input.hasAttribute('aria-label')) return;
-            const labels = this.#internals.labels;
-            if (labels && labels.length > 0) {
-              const text = Array.from(labels)
-                .map((l) => l.textContent?.trim())
-                .filter(Boolean)
-                .join(' ');
-              if (text) this.#applyLabel(text);
-            }
-          });
-        }
-
-        attributeChangedCallback(name, _oldVal, newVal) {
-          switch (name) {
-            case 'value':
-              if (this.#input && this.#input.value !== newVal) {
-                this.#input.value = newVal ?? '';
-                this.#syncValue();
-              }
-              break;
-            case 'placeholder':
-              if (this.#input) this.#input.placeholder = newVal ?? '';
-              break;
-            case 'type':
-              if (this.#input) this.#input.type = newVal ?? 'text';
-              break;
-            case 'required':
-              if (this.#input) this.#input.required = newVal !== null;
-              break;
-            case 'pattern':
-              if (this.#input) this.#input.pattern = newVal ?? '';
-              break;
-            case 'disabled':
-              if (this.#input) this.#input.disabled = newVal !== null;
-              break;
-            case 'internal-label':
-              this.#updateInternalLabel(newVal);
-              break;
-            case 'internal-help':
-              this.#updateInternalHelp(newVal);
-              break;
-            case 'use-internals-aria-label':
-              if (newVal !== null) {
-                this.#applyLabel(newVal);
-              }
-              break;
-            case 'internals-role':
-              if (newVal !== null) {
-                this.#internals.role = newVal;
-              }
-              break;
-            case 'aria-label':
-              if (newVal !== null) {
-                this.#applyLabel(newVal);
-              }
-              break;
-            case 'min-value':
-            case 'aria-labelledby':
-            case 'aria-describedby':
-            case 'aria-errormessage':
-              this.#wireAriaRelationships();
-              break;
-          }
-        }
-
-        /** @see https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements */
-
-        get form() {
-          return this.#internals.form;
-        }
-
-        get name() {
-          return this.getAttribute('name');
-        }
-
-        get type() {
-          return this.localName;
-        }
-
-        get value() {
-          return this.#input?.value ?? '';
-        }
-
-        set value(v) {
-          if (this.#input) {
-            this.#input.value = v;
-            this.#syncValue();
-          }
-        }
-
-        get validity() {
-          return this.#internals.validity;
-        }
-
-        get validationMessage() {
-          return this.#internals.validationMessage;
-        }
-
-        get willValidate() {
-          return this.#internals.willValidate;
-        }
-
-        checkValidity() {
-          this.#validate();
-          return this.#internals.checkValidity();
-        }
-
-        reportValidity() {
-          this.#validate();
-          return this.#internals.reportValidity();
-        }
-
-        /** Called when the associated form is reset. */
-        formResetCallback() {
-          const defaultValue = this.getAttribute('value') ?? '';
-          this.#input.value = defaultValue;
-          this.#syncValue();
-          this.#validate();
-          this.#clearErrorState();
-        }
-
-        /** Called when the element's disabled state changes via a fieldset or form. */
-        formDisabledCallback(disabled) {
-          this.#input.disabled = disabled;
-          if (disabled) {
-            this.setAttribute('disabled', '');
-          } else {
-            this.removeAttribute('disabled');
-          }
-        }
-
-        /** Called when browser restores form state (back/forward). */
-        formStateRestoreCallback(state, _mode) {
-          this.#input.value = state ?? '';
-          this.#syncValue();
-        }
-
-        // -- Private methods -------------------------------------------------------
-
-        #syncFromAttributes() {
-          const attrs = {
-            value: '',
-            placeholder: '',
-            type: 'text',
-          };
-          for (const [attr, fallback] of Object.entries(attrs)) {
-            const val = this.getAttribute(attr) ?? fallback;
-            if (attr === 'value') {
-              this.#input.value = val;
-            } else {
-              this.#input[attr] = val;
-            }
-          }
-
-          if (this.hasAttribute('required')) this.#input.required = true;
-          if (this.hasAttribute('pattern'))
-            this.#input.pattern = this.getAttribute('pattern');
-          if (this.hasAttribute('disabled')) this.#input.disabled = true;
-
-          const internalLabel = this.getAttribute('internal-label');
-          if (internalLabel) this.#updateInternalLabel(internalLabel);
-
-          const internalHelp = this.getAttribute('internal-help');
-          if (internalHelp) this.#updateInternalHelp(internalHelp);
-
-          const internalsRole = this.getAttribute('internals-role');
-          if (internalsRole) this.#internals.role = internalsRole;
-
-          const internalsAriaLabel = this.getAttribute(
-            'use-internals-aria-label'
-          );
-          if (internalsAriaLabel) this.#applyLabel(internalsAriaLabel);
-
-          const hostAriaLabel = this.getAttribute('aria-label');
-          if (hostAriaLabel) this.#applyLabel(hostAriaLabel);
-        }
-
-        #syncValue() {
-          this.#internals.setFormValue(this.#input.value);
-        }
-
-        #validate() {
-          const input = this.#input;
-
-          const minValue = this.getAttribute('min-value');
-          if (minValue !== null && input.value !== '') {
-            const num = parseFloat(input.value);
-            if (!isNaN(num) && num < parseFloat(minValue)) {
-              this.#internals.setValidity(
-                { rangeUnderflow: true },
-                `Value must be at least ${minValue}.`,
-                input
-              );
-              this.#showErrorState();
-              return;
-            }
-          }
-
-          if (!input.validity.valid) {
-            this.#internals.setValidity(
-              input.validity,
-              input.validationMessage,
-              input
-            );
-            this.#showErrorState();
-          } else {
-            this.#internals.setValidity({});
-            this.#clearErrorState();
-          }
-        }
-
-        #showErrorState() {
-          this.#internals.ariaInvalid = 'true';
-          const errorId = this.getAttribute('aria-errormessage');
-          if (errorId) {
-            const errorEl = document.getElementById(errorId);
-            if (errorEl) errorEl.hidden = false;
-          }
-        }
-
-        #clearErrorState() {
-          this.#internals.ariaInvalid = 'false';
-          const errorId = this.getAttribute('aria-errormessage');
-          if (errorId) {
-            const errorEl = document.getElementById(errorId);
-            if (errorEl) errorEl.hidden = true;
-          }
-        }
-
-        #updateInternalLabel(text) {
-          if (text) {
-            this.#shadowLabel.textContent = text;
-            this.#shadowLabel.hidden = false;
-            this.#input.setAttribute('aria-labelledby', 'shadow-label');
-          } else {
-            this.#shadowLabel.hidden = true;
-            this.#input.removeAttribute('aria-labelledby');
-          }
-        }
-
-        #updateInternalHelp(text) {
-          if (text) {
-            this.#shadowHelp.textContent = text;
-            this.#shadowHelp.hidden = false;
-            const existing = this.#input.getAttribute('aria-describedby') ?? '';
-            if (!existing.includes('shadow-help')) {
-              this.#input.setAttribute(
-                'aria-describedby',
-                (existing + ' shadow-help').trim()
-              );
-            }
-          } else {
-            this.#shadowHelp.hidden = true;
-          }
-        }
-
-        get #labellingStrategy() {
-          return this.getAttribute('labelling-strategy') || 'dual-write';
-        }
-
-        #applyLabel(text) {
-          if (!text) return;
-          const strategy = this.#labellingStrategy;
-
-          if (strategy === 'internals-only' || strategy === 'dual-write') {
-            this.#internals.ariaLabel = this.#internals.ariaLabel || text;
-          }
-
-          if (strategy === 'input-only' || strategy === 'dual-write') {
-            if (!this.#input.hasAttribute('aria-labelledby')) {
-              this.#input.setAttribute('aria-label', text);
-            }
-          }
-        }
-
-        #applyDescription(text) {
-          if (!text) return;
-          const strategy = this.#labellingStrategy;
-
-          if (strategy === 'internals-only' || strategy === 'dual-write') {
-            this.#internals.ariaDescription =
-              this.#internals.ariaDescription || text;
-          }
-
-          if (strategy === 'input-only' || strategy === 'dual-write') {
-            if (!this.#input.hasAttribute('aria-describedby')) {
-              this.#input.setAttribute('aria-description', text);
-            }
-          }
-        }
-
-        #wireAriaRelationships() {
-          if (!this.#input) return;
-
-          const supportsElementRefs =
-            'ariaLabelledByElements' in this.#internals;
-
-          const labelledby = this.getAttribute('aria-labelledby');
-          if (labelledby && !this.getAttribute('internal-label')) {
-            if (supportsElementRefs) {
-              try {
-                const els = labelledby
-                  .split(/\s+/)
-                  .map((id) => document.getElementById(id))
-                  .filter(Boolean);
-                if (els.length > 0) {
-                  this.#internals.ariaLabelledByElements = els;
-                }
-              } catch {
-                // element-ref API may exist but reject assignments
-              }
-            }
-            this.#applyLabel(this.#resolveTextFromIds(labelledby));
-          }
-
-          const describedby = this.getAttribute('aria-describedby');
-          if (describedby && !this.getAttribute('internal-help')) {
-            if (supportsElementRefs) {
-              try {
-                const els = describedby
-                  .split(/\s+/)
-                  .map((id) => document.getElementById(id))
-                  .filter(Boolean);
-                if (els.length > 0) {
-                  this.#internals.ariaDescribedByElements = els;
-                }
-              } catch {
-                // element-ref API may exist but reject assignments
-              }
-            }
-            this.#applyDescription(this.#resolveTextFromIds(describedby));
-          }
-
-          this.#handleSlotWiring();
-        }
-
-        #handleSlotWiring() {
-          if (this.#slotListenersAttached) return;
-          this.#slotListenersAttached = true;
-
-          const labelSlot = this.shadowRoot.querySelector('slot[name="label"]');
-          const helpSlot = this.shadowRoot.querySelector(
-            'slot[name="help-text"]'
-          );
-
-          if (labelSlot) {
-            labelSlot.addEventListener('slotchange', () => {
-              const assigned = labelSlot.assignedElements();
-              if (assigned.length > 0) {
-                const labelEl = assigned[0];
-                const labelId =
-                  labelEl.id || `slotted-label-${this.id || Date.now()}`;
-                labelEl.id = labelId;
-
-                if ('ariaLabelledByElements' in this.#internals) {
-                  try {
-                    this.#internals.ariaLabelledByElements = [labelEl];
-                  } catch {
-                    // fall through to string fallback
-                  }
-                }
-                this.#applyLabel(labelEl.textContent?.trim());
-              }
-            });
-          }
-
-          if (helpSlot) {
-            helpSlot.addEventListener('slotchange', () => {
-              const assigned = helpSlot.assignedElements();
-              if (assigned.length > 0) {
-                const helpEl = assigned[0];
-                const helpId =
-                  helpEl.id || `slotted-help-${this.id || Date.now()}`;
-                helpEl.id = helpId;
-
-                if ('ariaDescribedByElements' in this.#internals) {
-                  try {
-                    this.#internals.ariaDescribedByElements = [helpEl];
-                  } catch {
-                    // fall through to string fallback
-                  }
-                }
-                this.#applyDescription(helpEl.textContent?.trim());
-              }
-            });
-          }
-        }
-
-        #resolveTextFromIds(idList) {
-          return idList
-            .split(/\s+/)
-            .map((id) => document.getElementById(id)?.textContent?.trim() ?? '')
-            .filter(Boolean)
-            .join(' ');
-        }
-      }
-
-      customElements.define('face-text-field', FaceTextField);
-
-      /**
-       * Variant WITHOUT delegatesFocus to test whether removing it
-       * changes how internals.role + internals.ariaLabel interact.
-       * If delegatesFocus is what bypasses the host role, then without
-       * it the host should be the focused element and announce its label.
-       */
-      class FaceTextFieldNoDelegate extends FaceTextField {
-        constructor() {
-          // Override: we need to re-create without delegatesFocus
-          // Since we can't call super() and re-attach shadow, we use a
-          // workaround: this class inherits everything except the shadow
-          // root configuration.
-          HTMLElement.prototype.constructor.call(
-            Object.setPrototypeOf(this, FaceTextFieldNoDelegate.prototype)
-          );
-        }
-      }
-
-      // Simpler approach: define a minimal standalone version without delegatesFocus
-      class FaceTextFieldNoDelegateFocus extends HTMLElement {
-        static formAssociated = true;
-
-        static get observedAttributes() {
-          return [
-            'value',
-            'placeholder',
-            'type',
-            'use-internals-aria-label',
-            'internals-role',
-            'labelling-strategy',
-          ];
-        }
-
-        #internals;
-        #input;
-
-        constructor() {
-          super();
-          this.#internals = this.attachInternals();
-          const shadow = this.attachShadow({ mode: 'open' });
-          shadow.innerHTML = `
-            <style>
-              :host { display: inline-flex; min-width: 200px; }
-              input {
-                font: inherit;
-                padding: 0.5rem 0.75rem;
-                border: 1px solid #d1d5db;
-                border-radius: 6px;
-                width: 100%;
-              }
-              input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
-            </style>
-            <input id="internal-input" part="input" />
-          `;
-          this.#input = shadow.getElementById('internal-input');
-          this.#input.addEventListener('input', () => {
-            this.#internals.setFormValue(this.#input.value);
-          });
-        }
-
-        connectedCallback() {
-          const role = this.getAttribute('internals-role');
-          if (role) this.#internals.role = role;
-
-          const label = this.getAttribute('use-internals-aria-label');
-          if (label) {
-            const strategy =
-              this.getAttribute('labelling-strategy') || 'dual-write';
-            if (strategy === 'internals-only' || strategy === 'dual-write') {
-              this.#internals.ariaLabel = label;
-            }
-            if (strategy === 'input-only' || strategy === 'dual-write') {
-              this.#input.setAttribute('aria-label', label);
-            }
-          }
-
-          const placeholder = this.getAttribute('placeholder');
-          if (placeholder) this.#input.placeholder = placeholder;
-        }
-
-        get value() {
-          return this.#input?.value ?? '';
-        }
-      }
-
-      customElements.define(
-        'face-text-field-no-delegate',
-        FaceTextFieldNoDelegateFocus
-      );
-
-      // ===================================================================
-      // Form event handlers
-      // ===================================================================
-
-      document.getElementById('form-1a').addEventListener('submit', (e) => {
-        e.preventDefault();
-        const data = new FormData(e.target);
-        const out = document.getElementById('output-1a');
-        const entries = [...data.entries()];
-        out.textContent =
-          'FormData entries:\n' +
-          entries.map(([k, v]) => `  ${k}: "${v}"`).join('\n') +
-          '\n\nForm participation: ' +
-          (entries.length > 0 ? 'PASS' : 'FAIL');
-      });
-
-      document.getElementById('form-1a').addEventListener('reset', () => {
-        const out = document.getElementById('output-1a');
-        requestAnimationFrame(() => {
-          const field = document.getElementById('field-1a');
-          out.textContent = `Reset fired.\nValue after reset: "${field.value}"\nformResetCallback: ${field.value === 'Jane Doe' ? 'PASS' : 'FAIL'}`;
-        });
-      });
-
-      document.getElementById('form-1b').addEventListener('submit', (e) => {
-        e.preventDefault();
-        const field = document.getElementById('field-1b');
-        const out = document.getElementById('output-1b');
-        const valid = field.reportValidity();
-        out.textContent =
-          `reportValidity(): ${valid}\n` +
-          `validity.valid: ${field.validity.valid}\n` +
-          `validity.valueMissing: ${field.validity.valueMissing}\n` +
-          `validity.patternMismatch: ${field.validity.patternMismatch}\n` +
-          `validationMessage: "${field.validationMessage}"\n\n` +
-          `Constraint validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input'}`;
-      });
-
-      document.getElementById('form-1c').addEventListener('submit', (e) => {
-        e.preventDefault();
-        const field = document.getElementById('field-1c');
-        const out = document.getElementById('output-1c');
-        const data = new FormData(e.target);
-        const shadowInput = field.shadowRoot?.querySelector('input');
-        out.textContent =
-          `Shadow input disabled: ${shadowInput?.disabled ?? 'N/A'}\n` +
-          `Host has disabled attr: ${field.hasAttribute('disabled')}\n` +
-          `formDisabledCallback: fires when fieldset is disabled\n` +
-          `FormData includes field: ${data.has('disabledfield') ? 'YES (unexpected)' : 'NO (correct)'}\n\n` +
-          `Disabled via fieldset: ${!data.has('disabledfield') ? 'PASS' : 'FAIL'}`;
-      });
-
-      document.getElementById('form-3b').addEventListener('submit', (e) => {
-        e.preventDefault();
-        const field = document.getElementById('field-3b');
-        const shadowInput = field.shadowRoot?.querySelector('input');
-        const out = document.getElementById('output-3b');
-        const valid = field.reportValidity();
-        out.textContent =
-          `reportValidity(): ${valid}\n` +
-          `validity.valid: ${field.validity.valid}\n` +
-          `validity.rangeUnderflow: ${field.validity.rangeUnderflow}\n` +
-          `validationMessage: "${field.validationMessage}"\n\n` +
-          `--- internals.ariaInvalid observations ---\n` +
-          `host aria-invalid attr: ${field.getAttribute('aria-invalid') ?? '(not reflected)'}\n` +
-          `shadow input aria-invalid attr: ${shadowInput?.getAttribute('aria-invalid') ?? '(not set)'}\n` +
-          `NOTE: internals.ariaInvalid sets the invalid state on the HOST\n` +
-          `a11y node. Whether SRs announce this depends on whether they\n` +
-          `read the host or the shadow input. Verify manually with VO/NVDA.\n` +
-          `Compare: does host aria-invalid="true" attr differ from internals?\n\n` +
-          `Custom validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input value'}`;
-      });
-
-      // ===================================================================
-      // IDREF matrix introspection
-      // ===================================================================
-
-      function populateMatrix() {
-        const scenarios = [
-          {
-            id: 'A',
-            name: 'Light DOM siblings',
-            fieldId: 'field-2a',
-            labelMethod: 'aria-labelledby on host → light DOM #label-2a',
-            descMethod: 'aria-describedby on host → light DOM #help-2a',
-          },
-          {
-            id: 'B',
-            name: 'Slotted light DOM children',
-            fieldId: 'field-2b',
-            labelMethod: 'Slotted <span slot="label"> with ID',
-            descMethod: 'Slotted <span slot="help-text"> with ID',
-          },
-          {
-            id: 'C',
-            name: 'Shadow DOM internal IDs',
-            fieldId: 'field-2c',
-            labelMethod: 'internal-label attr → shadow #shadow-label',
-            descMethod: 'internal-help attr → shadow #shadow-help',
-          },
-          {
-            id: 'D',
-            name: 'Cross-root (label for → host)',
-            fieldId: 'field-2d',
-            labelMethod: '<label for="field-2d"> in light DOM',
-            descMethod: 'N/A (no describedby set)',
-          },
-        ];
-
-        const tbody = document.getElementById('matrix-body');
-        tbody.innerHTML = '';
-
-        for (const s of scenarios) {
-          const field = document.getElementById(s.fieldId);
-          if (!field) continue;
-
-          let a11yName = '(inspect DevTools)';
-          let a11yDesc = '(inspect DevTools)';
-          let status = 'pending';
-
-          try {
-            const ariaLabel = field.getAttribute('aria-label') || '';
-            const labelledby = field.getAttribute('aria-labelledby') || '';
-            const describedby = field.getAttribute('aria-describedby') || '';
-
-            if (ariaLabel) {
-              a11yName = `aria-label: "${ariaLabel}"`;
-            } else if (labelledby) {
-              const text = labelledby
-                .split(/\s+/)
-                .map((id) => document.getElementById(id)?.textContent?.trim())
-                .filter(Boolean)
-                .join(' ');
-              a11yName = text
-                ? `Resolved: "${text}"`
-                : `IDs not found: ${labelledby}`;
-            }
-
-            if (describedby) {
-              const text = describedby
-                .split(/\s+/)
-                .map((id) => document.getElementById(id)?.textContent?.trim())
-                .filter(Boolean)
-                .join(' ');
-              a11yDesc = text
-                ? `Resolved: "${text}"`
-                : `IDs not found: ${describedby}`;
-            }
-          } catch {
-            // Introspection may fail in some browsers
-          }
-
-          const row = document.createElement('tr');
-          row.innerHTML = `
-      <td><strong>${s.id}:</strong> ${s.name}</td>
-      <td><code>${escapeHtml(s.labelMethod)}</code></td>
-      <td><code>${escapeHtml(s.descMethod)}</code></td>
-      <td>${a11yName}</td>
-      <td>${a11yDesc}</td>
-      <td class="${status}">${status}</td>
-    `;
-          tbody.appendChild(row);
-        }
-      }
-
-      function escapeHtml(str) {
-        const div = document.createElement('div');
-        div.textContent = str;
-        return div.innerHTML;
-      }
-
-      requestAnimationFrame(() => {
-        requestAnimationFrame(populateMatrix);
-      });
-
-      // ===================================================================
-      // axe-core integration
-      // ===================================================================
-
-      document.getElementById('run-axe').addEventListener('click', async () => {
-        const resultsEl = document.getElementById('axe-results');
-        resultsEl.textContent = 'Loading axe-core...';
-
-        try {
-          if (!window.axe) {
-            await loadScript(
-              'https://cdn.jsdelivr.net/npm/axe-core@4.10.2/axe.min.js'
-            );
-          }
-
-          resultsEl.textContent = 'Running audit...';
-
-          const results = await window.axe.run(document, {
-            runOnly: {
-              type: 'tag',
-              values: [
-                'wcag2a',
-                'wcag2aa',
-                'wcag21a',
-                'wcag21aa',
-                'best-practice',
-              ],
-            },
-          });
-
-          let html = '';
-
-          html += `<h3>Violations (${results.violations.length})</h3>`;
-          if (results.violations.length === 0) {
-            html += '<div class="axe-pass">No violations found.</div>';
-          }
-          for (const v of results.violations) {
-            html += `
-        <div class="axe-violation">
-          <h4>${escapeHtml(v.id)}: ${escapeHtml(v.help)}</h4>
-          <p><strong>Impact:</strong> ${v.impact} | <strong>Tags:</strong> ${v.tags.join(', ')}</p>
-          <p>${escapeHtml(v.description)}</p>
-          <details>
-            <summary>Affected nodes (${v.nodes.length})</summary>
-            <ul>
-              ${v.nodes.map((n) => `<li><code>${escapeHtml(n.html)}</code><br/>${escapeHtml(n.failureSummary ?? '')}</li>`).join('')}
-            </ul>
-          </details>
-          ${v.helpUrl ? `<p><a href="${v.helpUrl}" target="_blank">Deque reference</a></p>` : ''}
-        </div>
-      `;
-          }
-
-          html += `<h3>Incomplete / needs review (${results.incomplete.length})</h3>`;
-          for (const inc of results.incomplete) {
-            html += `
-        <div class="axe-incomplete">
-          <strong>${escapeHtml(inc.id)}</strong>: ${escapeHtml(inc.help)}<br/>
-          <small>Nodes: ${inc.nodes.length} | Tags: ${inc.tags.join(', ')}</small>
-          ${inc.helpUrl ? ` | <a href="${inc.helpUrl}" target="_blank">Reference</a>` : ''}
-        </div>
-      `;
-          }
-
-          const relevantPasses = results.passes.filter((p) =>
-            [
-              'label',
-              'aria-label',
-              'aria-labelledby',
-              'form-field-multiple-labels',
-              'aria-valid-attr',
-              'aria-valid-attr-value',
-              'aria-roles',
-              'label-title-only',
-              'aria-input-field-name',
-            ].some((id) => p.id.includes(id))
-          );
-          html += `<h3>Relevant passes (${relevantPasses.length} of ${results.passes.length} total)</h3>`;
-          for (const p of relevantPasses) {
-            html += `<div class="axe-pass"><strong>${escapeHtml(p.id)}</strong>: ${escapeHtml(p.help)}</div>`;
-          }
-
-          resultsEl.innerHTML = html;
-        } catch (err) {
-          resultsEl.textContent = `Error loading or running axe-core:\n${err.message}\n\nNote: axe-core requires network access to load from CDN.`;
-        }
-      });
-
-      function loadScript(src) {
-        return new Promise((resolve, reject) => {
-          const s = document.createElement('script');
-          s.src = src;
-          s.onload = resolve;
-          s.onerror = () => reject(new Error(`Failed to load ${src}`));
-          document.head.appendChild(s);
-        });
-      }
-    </script>
+    <script type="module" src="./face-text-field.js"></script>
+    <script type="module" src="./face-text-field-no-delegate.js"></script>
+    <script type="module" src="./page-handlers.js"></script>
   </body>
 </html>
diff --git a/research/form-associated-ce-poc/page-handlers.js b/research/form-associated-ce-poc/page-handlers.js
new file mode 100644
index 0000000000..1870b52b50
--- /dev/null
+++ b/research/form-associated-ce-poc/page-handlers.js
@@ -0,0 +1,263 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ *
+ * Page-level form handlers, matrix introspection, and axe-core integration.
+ * Separated from the component code for easier navigation.
+ */
+
+// Form 1a: submit + reset
+document.getElementById('form-1a').addEventListener('submit', (event) => {
+  event.preventDefault();
+  const data = new FormData(event.target);
+  const out = document.getElementById('output-1a');
+  const entries = [...data.entries()];
+  out.textContent =
+    'FormData entries:\n' +
+    entries.map(([k, v]) => `  ${k}: "${v}"`).join('\n') +
+    '\n\nForm participation: ' +
+    (entries.length > 0 ? 'PASS' : 'FAIL');
+});
+
+document.getElementById('form-1a').addEventListener('reset', () => {
+  const out = document.getElementById('output-1a');
+  requestAnimationFrame(() => {
+    const field = document.getElementById('field-1a');
+    out.textContent = `Reset fired.\nValue after reset: "${field.value}"\nformResetCallback: ${field.value === 'Jane Doe' ? 'PASS' : 'FAIL'}`;
+  });
+});
+
+// Form 1b: constraint validation
+document.getElementById('form-1b').addEventListener('submit', (event) => {
+  event.preventDefault();
+  const field = document.getElementById('field-1b');
+  const out = document.getElementById('output-1b');
+  const valid = field.reportValidity();
+  out.textContent =
+    `reportValidity(): ${valid}\n` +
+    `validity.valid: ${field.validity.valid}\n` +
+    `validity.valueMissing: ${field.validity.valueMissing}\n` +
+    `validity.patternMismatch: ${field.validity.patternMismatch}\n` +
+    `validationMessage: "${field.validationMessage}"\n\n` +
+    `Constraint validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input'}`;
+});
+
+// Form 1c: disabled fieldset
+document.getElementById('form-1c').addEventListener('submit', (event) => {
+  event.preventDefault();
+  const field = document.getElementById('field-1c');
+  const out = document.getElementById('output-1c');
+  const data = new FormData(event.target);
+  const shadowInput = field.shadowRoot?.querySelector('input');
+  out.textContent =
+    `Shadow input disabled: ${shadowInput?.disabled ?? 'N/A'}\n` +
+    `Host has disabled attr: ${field.hasAttribute('disabled')}\n` +
+    `formDisabledCallback: fires when fieldset is disabled\n` +
+    `FormData includes field: ${data.has('disabledfield') ? 'YES (unexpected)' : 'NO (correct)'}\n\n` +
+    `Disabled via fieldset: ${!data.has('disabledfield') ? 'PASS' : 'FAIL'}`;
+});
+
+// Form 3b: custom validation + ariaInvalid
+document.getElementById('form-3b').addEventListener('submit', (event) => {
+  event.preventDefault();
+  const field = document.getElementById('field-3b');
+  const shadowInput = field.shadowRoot?.querySelector('input');
+  const out = document.getElementById('output-3b');
+  const valid = field.reportValidity();
+  out.textContent =
+    `reportValidity(): ${valid}\n` +
+    `validity.valid: ${field.validity.valid}\n` +
+    `validity.rangeUnderflow: ${field.validity.rangeUnderflow}\n` +
+    `validationMessage: "${field.validationMessage}"\n\n` +
+    `--- internals.ariaInvalid observations ---\n` +
+    `host aria-invalid attr: ${field.getAttribute('aria-invalid') ?? '(not reflected)'}\n` +
+    `shadow input aria-invalid attr: ${shadowInput?.getAttribute('aria-invalid') ?? '(not set)'}\n\n` +
+    `Custom validation: ${!valid ? 'PASS (correctly rejected)' : 'Check input value'}`;
+});
+
+// IDREF matrix introspection (reads DOM state, not a11y tree)
+function populateMatrix() {
+  const scenarios = [
+    {
+      id: 'A',
+      name: 'Light DOM siblings',
+      fieldId: 'field-2a',
+      labelMethod: 'aria-labelledby on host → light DOM #label-2a',
+      descMethod: 'aria-describedby on host → light DOM #help-2a',
+    },
+    {
+      id: 'B',
+      name: 'Slotted light DOM children',
+      fieldId: 'field-2b',
+      labelMethod: 'Slotted <span slot="label"> with ID',
+      descMethod: 'Slotted <span slot="help-text"> with ID',
+    },
+    {
+      id: 'C',
+      name: 'Shadow DOM internal IDs',
+      fieldId: 'field-2c',
+      labelMethod: 'internal-label attr → shadow #shadow-label',
+      descMethod: 'internal-help attr → shadow #shadow-help',
+    },
+    {
+      id: 'D',
+      name: 'Cross-root (label for → host)',
+      fieldId: 'field-2d',
+      labelMethod: '<label for="field-2d"> in light DOM',
+      descMethod: 'N/A (no describedby set)',
+    },
+  ];
+
+  const tbody = document.getElementById('matrix-body');
+  tbody.innerHTML = '';
+
+  for (const s of scenarios) {
+    const field = document.getElementById(s.fieldId);
+    if (!field) {
+      continue;
+    }
+
+    let domName = '(inspect DevTools)';
+    let domDesc = '(inspect DevTools)';
+    let status = 'pending';
+
+    try {
+      const ariaLabel = field.getAttribute('aria-label') || '';
+      const labelledby = field.getAttribute('aria-labelledby') || '';
+      const describedby = field.getAttribute('aria-describedby') || '';
+
+      if (ariaLabel) {
+        domName = `aria-label: "${ariaLabel}"`;
+      } else if (labelledby) {
+        const text = labelledby
+          .split(/\s+/)
+          .map((id) => document.getElementById(id)?.textContent?.trim())
+          .filter(Boolean)
+          .join(' ');
+        domName = text ? `Resolved: "${text}"` : `IDs not found: ${labelledby}`;
+      }
+
+      if (describedby) {
+        const text = describedby
+          .split(/\s+/)
+          .map((id) => document.getElementById(id)?.textContent?.trim())
+          .filter(Boolean)
+          .join(' ');
+        domDesc = text
+          ? `Resolved: "${text}"`
+          : `IDs not found: ${describedby}`;
+      }
+    } catch {
+      // introspection may fail
+    }
+
+    const row = document.createElement('tr');
+    row.innerHTML = `
+      <td><strong>${s.id}:</strong> ${s.name}</td>
+      <td><code>${escapeHtml(s.labelMethod)}</code></td>
+      <td><code>${escapeHtml(s.descMethod)}</code></td>
+      <td>${domName}</td>
+      <td>${domDesc}</td>
+      <td class="${status}">${status}</td>
+    `;
+    tbody.appendChild(row);
+  }
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+requestAnimationFrame(() => {
+  requestAnimationFrame(populateMatrix);
+});
+
+// axe-core integration
+document.getElementById('run-axe').addEventListener('click', async () => {
+  const resultsEl = document.getElementById('axe-results');
+  resultsEl.textContent = 'Loading axe-core...';
+
+  try {
+    if (!window.axe) {
+      await loadScript(
+        'https://cdn.jsdelivr.net/npm/axe-core@4.10.2/axe.min.js'
+      );
+    }
+
+    resultsEl.textContent = 'Running audit...';
+
+    const results = await window.axe.run(document, {
+      runOnly: {
+        type: 'tag',
+        values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'],
+      },
+    });
+
+    let html = '';
+
+    html += `<h3>Violations (${results.violations.length})</h3>`;
+    if (results.violations.length === 0) {
+      html += '<div class="axe-pass">No violations found.</div>';
+    }
+    for (const v of results.violations) {
+      html += `
+        <div class="axe-violation">
+          <h4>${escapeHtml(v.id)}: ${escapeHtml(v.help)}</h4>
+          <p><strong>Impact:</strong> ${v.impact} | <strong>Tags:</strong> ${v.tags.join(', ')}</p>
+          <p>${escapeHtml(v.description)}</p>
+          <details>
+            <summary>Affected nodes (${v.nodes.length})</summary>
+            <ul>
+              ${v.nodes.map((n) => `<li><code>${escapeHtml(n.html)}</code><br/>${escapeHtml(n.failureSummary ?? '')}</li>`).join('')}
+            </ul>
+          </details>
+          ${v.helpUrl ? `<p><a href="${v.helpUrl}" target="_blank">Deque reference</a></p>` : ''}
+        </div>
+      `;
+    }
+
+    html += `<h3>Incomplete / needs review (${results.incomplete.length})</h3>`;
+    for (const inc of results.incomplete) {
+      html += `
+        <div class="axe-incomplete">
+          <strong>${escapeHtml(inc.id)}</strong>: ${escapeHtml(inc.help)}<br/>
+          <small>Nodes: ${inc.nodes.length} | Tags: ${inc.tags.join(', ')}</small>
+          ${inc.helpUrl ? ` | <a href="${inc.helpUrl}" target="_blank">Reference</a>` : ''}
+        </div>
+      `;
+    }
+
+    const relevantPasses = results.passes.filter((p) =>
+      [
+        'label',
+        'aria-label',
+        'aria-labelledby',
+        'form-field-multiple-labels',
+        'aria-valid-attr',
+        'aria-valid-attr-value',
+        'aria-roles',
+        'label-title-only',
+        'aria-input-field-name',
+      ].some((id) => p.id.includes(id))
+    );
+    html += `<h3>Relevant passes (${relevantPasses.length} of ${results.passes.length} total)</h3>`;
+    for (const p of relevantPasses) {
+      html += `<div class="axe-pass"><strong>${escapeHtml(p.id)}</strong>: ${escapeHtml(p.help)}</div>`;
+    }
+
+    resultsEl.innerHTML = html;
+  } catch (err) {
+    resultsEl.textContent = `Error loading or running axe-core:\n${err.message}\n\nNote: axe-core requires network access to load from CDN.`;
+  }
+});
+
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    const s = document.createElement('script');
+    s.src = src;
+    s.onload = resolve;
+    s.onerror = () => reject(new Error(`Failed to load ${src}`));
+    document.head.appendChild(s);
+  });
+}