From 580600615b97366962ae4338c2f0db2dfe9cebf3 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Wed, 2 Oct 2024 10:37:10 -0400
Subject: [PATCH 1/3] Support for `ElementInternals` and Constraint Validations

Integrate with `<form>` elements directly through built-in support for
[ElementInternals][].

This is achieved with graceful degradation in two ways:

* automatically check for browser support
* support globally disabling through `Trix.config.editor.formAssociated = false`

According to the [Form-associated custom elements][] section of [More
capable form controls][], various behaviors that the `<trix-editor>`
element was recreating are provided out of the box.

For example, the `<label>` element support can be achieved through
[ElementInternals.labels][]. Similarly, a `formResetCallback()` will
fire whenever the associated `<form>` element resets.

Add support for integrating with [Constraint validation][] through the
support for the `[required]` attribute and the
`setCustomValidity(message)` method.

[Constraint validation]: https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
[#1023]: https://github.com/basecamp/trix/issues/1023
[ElementInternals]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
[Form-associated custom elements]: https://web.dev/articles/more-capable-form-controls#form-associated_custom_elements
[More capable form controls]: https://web.dev/articles/more-capable-form-controls
[ElementInternals.setFormValue]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
[ElementInternals.labels]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels
---
 .github/workflows/ci.yml                      |   7 +-
 README.md                                     | 132 ++++++++++++++-
 assets/index.html                             |   4 +
 karma.conf.js                                 |  10 +-
 src/test/system/custom_element_test.js        | 160 +++++++++++++++++-
 .../fixtures/editor_with_labels.js            |   8 +-
 .../fixtures/editors_with_forms.js            |   5 +-
 .../fixtures/form_associated_false.js         |   1 +
 src/trix/config/editor.js                     |   3 +
 src/trix/config/index.js                      |   1 +
 src/trix/controllers/editor_controller.js     |   2 +-
 src/trix/elements/trix_editor_element.js      | 157 ++++++++++++++++-
 12 files changed, 473 insertions(+), 17 deletions(-)
 create mode 100644 src/test/test_helpers/fixtures/form_associated_false.js
 create mode 100644 src/trix/config/editor.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8ab86c134..7dd3d3971 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,7 +8,12 @@ on:
 
 jobs:
   build:
-    name: Browser tests
+    name: "Browser tests (Trix.config.editor.formAssociated = ${{ matrix.formAssociated }})"
+    strategy:
+      matrix:
+        formAssociated: [true, false]
+    env:
+      FORM_ASSOCIATED: "${{ matrix.formAssociated }}"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
diff --git a/README.md b/README.md
index 2645b79cd..e6f404922 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ This is the approach that all modern, production ready, WYSIWYG editors now take
 
 <details><summary>Trix supports all evergreen, self-updating desktop and mobile browsers.</summary><img src="https://app.saucelabs.com/browser-matrix/basecamp_trix.svg"></details>
 
-Trix is built with established web standards, notably [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), [Mutation Observer](https://dom.spec.whatwg.org/#mutation-observers), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+Trix is built with established web standards, notably [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), [Element Internals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), [Mutation Observer](https://dom.spec.whatwg.org/#mutation-observers), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
 
 # Getting Started
 
@@ -88,6 +88,16 @@ If the attribute is defined in `Trix.config.blockAttributes`, Trix will apply th
 
 Clicking the quote button toggles whether the block should be rendered with `<blockquote>`.
 
+## Integrating with Element Internals
+
+Trix will integrate `<trix-editor>` elements with forms depending on the browser's support for [Element Internals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals). By default, Trix will enable support for `ElementInternals` when the feature is enabled in the browser. If there is a need to disable support for `ElementInternals`, set `Trix.config.editor.formAssociated = false`:
+
+```js
+import Trix from "trix"
+
+Trix.config.editor.formAssociated = false
+```
+
 ## Invoking Internal Trix Actions
 
 Internal actions are defined in `controllers/editor_controller.js` and consist of:
@@ -148,6 +158,126 @@ To populate a `<trix-editor>` with stored content, include that content in the a
 
 Always use an associated input element to safely populate an editor. Trix won’t load any HTML content inside a `<trix-editor>…</trix-editor>` tag.
 
+## Validating the Editor
+
+Out of the box, `<trix-editor>` elements support browsers' built-in [Constraint
+validation][]. When rendered with the [required][] attribute, editors will be
+invalid when they're completely empty. For example, consider the following HTML:
+
+```html
+<input id="x" value="" type="hidden" name="content">
+<trix-editor input="x" required></trix-editor>
+```
+
+Since the `<trix-editor>` element is `[required]`, it is invalid when its value
+is empty:
+
+```js
+const editor = document.querySelector("trix-editor")
+
+editor.validity.valid        // => false
+editor.validity.valueMissing // => true
+editor.matches(":valid")     // => false
+editor.matches(":invalid")   // => true
+
+editor.value = "A value that isn't empty"
+
+editor.validity.valid         // => true
+editor.validity.valueMissing  // => false
+editor.matches(":valid")      // => true
+editor.matches(":invalid")    // => false
+```
+
+In addition to the built-in `[required]` attribute, `<trix-editor>`
+elements support custom validation through their [setCustomValidity][] method.
+For example, consider the following HTML:
+
+```js
+<input id="x" value="" type="hidden" name="content">
+<trix-editor input="x"></trix-editor>
+```
+
+Custom validation can occur at any time. For example, validation can occur after
+a `trix-change` event fired after the editor's contents change:
+
+```js
+addEventListener("trix-change", (event) => {
+  const editorElement = event.target
+  const trixDocument = editorElement.editor.getDocument()
+  const isValid = (trixDocument) => {
+    // determine the validity based on your custom criteria
+    return true
+  }
+
+  if (isValid(trixDocument)) {
+    editorElement.setCustomValidity("")
+  } else {
+    editorElement.setCustomValidity("The document is not valid.")
+  }
+}
+```
+
+[Constraint validation]: https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
+[required]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+[setCustomValidity]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
+
+## Disabling the Editor
+
+To disable the `<trix-editor>`, render it with the `[disabled]` attribute:
+
+```html
+<trix-editor disabled></trix-editor>
+```
+
+Disabled editors are not editable, cannot receive focus, and their values will
+be ignored when their related `<form>` element is submitted.
+
+To change whether or not an editor is disabled, either toggle the `[disabled]`
+attribute or assign a boolean to the `.disabled` property:
+
+```html
+<trix-editor id="editor" disabled></trix-editor>
+
+<script>
+  const editor = document.getElementById("editor")
+
+  editor.toggleAttribute("disabled", false)
+  editor.disabled = true
+</script>
+```
+
+When disabled, the editor will match the [:disabled CSS
+pseudo-class][:disabled].
+
+[:disabled]: https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
+
+## Providing an Accessible Name
+
+Like other form controls, `<trix-editor>` elements should have an accessible name. The `<trix-editor>` element integrates with `<label>` elements and The `<trix-editor>` supports two styles of integrating with `<label>` elements:
+
+1. render the `<trix-editor>` element with an `[id]` attribute that the `<label>` element references through its `[for]` attribute:
+
+```html
+<label for="editor">Editor</label>
+<trix-editor id="editor"></trix-editor>
+```
+
+2. render the `<trix-editor>` element as a child of the `<label>` element:
+
+```html
+<trix-toolbar id="editor-toolbar"></trix-toolbar>
+<label>
+  Editor
+
+  <trix-editor toolbar="editor-toolbar"></trix-editor>
+</label>
+```
+
+> [!WARNING]
+> When rendering the `<trix-editor>` element as a child of the `<label>` element, [explicitly render](#creating-an-editor) the corresponding `<trix-toolbar>` element outside of the `<label>` element.
+
+In addition to integrating with `<label>` elements, `<trix-editor>` elements support `[aria-label]` and `[aria-labelledby]` attributes.
+
 ## Styling Formatted Content
 
 To ensure what you see when you edit is what you see when you save, use a CSS class name to scope styles for Trix formatted content. Apply this class name to your `<trix-editor>` element, and to a containing element when you render stored Trix content for display in your application.
diff --git a/assets/index.html b/assets/index.html
index e4cf73b85..65e97b39b 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -17,6 +17,10 @@
         max-width: 700px;
       }
 
+      trix-editor:invalid {
+        border: solid 1px red;
+      }
+
       #output {
         margin: 1rem 0 0;
       }
diff --git a/karma.conf.js b/karma.conf.js
index 9fe317624..fc5c6ad82 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -3,7 +3,7 @@ const config = {
   frameworks: [ "qunit" ],
   files: [
     { pattern: "dist/test.js", watched: false },
-    { pattern: "src/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
+    { pattern: "src/test/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
   ],
   proxies: {
     "/test_helpers/fixtures/": "/base/src/test_helpers/fixtures/"
@@ -29,6 +29,14 @@ const config = {
 
 /* eslint camelcase: "off",  */
 
+if (process.env.FORM_ASSOCIATED === "false") {
+  config.files.push({
+    pattern: "src/test/test_helpers/fixtures/form_associated_false.js",
+    watched: false,
+    included: true
+  })
+}
+
 if (process.env.SAUCE_ACCESS_KEY) {
   config.customLaunchers = {
     sl_chrome_latest: {
diff --git a/src/test/system/custom_element_test.js b/src/test/system/custom_element_test.js
index 00b2f2250..5af7d6043 100644
--- a/src/test/system/custom_element_test.js
+++ b/src/test/system/custom_element_test.js
@@ -1,3 +1,4 @@
+import * as config from "trix/config"
 import { rangesAreEqual } from "trix/core/helpers"
 
 import {
@@ -500,7 +501,7 @@ testGroup("Custom element API", { template: "editor_empty" }, () => {
 testGroup("<label> support", { template: "editor_with_labels" }, () => {
   test("associates all label elements", () => {
     const labels = [ document.getElementById("label-1"), document.getElementById("label-3") ]
-    assert.deepEqual(getEditorElement().labels, labels)
+    assert.deepEqual(Array.from(getEditorElement().labels), labels)
   })
 
   test("focuses when <label> clicked", () => {
@@ -538,4 +539,161 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     const editor = document.getElementById("editor-with-no-form")
     assert.equal(editor.form, null)
   })
+
+  test("editor resets to its original value on element reset", async () => {
+    const element = getEditorElement()
+
+    await typeCharacters("hello")
+    element.reset()
+    expectDocument("\n")
+  })
+
+  test("element returns empty string when value is missing", () => {
+    const element = getEditorElement()
+
+    assert.equal(element.value, "")
+  })
+
+  test("editor returns its type", () => {
+    const element = getEditorElement()
+
+    assert.equal("trix-editor", element.type)
+  })
+
+  testIfFormAssociated("adds [disabled] attribute based on .disabled property", () => {
+    const editor = document.getElementById("editor-with-ancestor-form")
+
+    editor.disabled = true
+
+    assert.equal(editor.hasAttribute("disabled"), true, "adds [disabled] attribute")
+
+    editor.disabled = false
+
+    assert.equal(editor.hasAttribute("disabled"), false, "removes [disabled] attribute")
+  })
+
+  testIfFormAssociated("removes [contenteditable] and disables input when editor element has [disabled]", () => {
+    const editor = document.getElementById("editor-with-no-form")
+
+    editor.setAttribute("disabled", "")
+
+    assert.equal(editor.matches(":disabled"), true, "sets :disabled CSS pseudostate")
+    assert.equal(editor.inputElement.disabled, true, "disables input")
+    assert.equal(editor.disabled, true, "exposes [disabled] attribute as .disabled property")
+    assert.equal(editor.hasAttribute("contenteditable"), false, "removes [contenteditable] attribute")
+
+    editor.removeAttribute("disabled")
+
+    assert.equal(editor.matches(":disabled"), false, "removes sets :disabled pseudostate")
+    assert.equal(editor.inputElement.disabled, false, "enabled input")
+    assert.equal(editor.disabled, false, "updates .disabled property")
+    assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
+  })
+
+  testIfFormAssociated("removes [contenteditable] and disables input when editor element is :disabled", () => {
+    const editor = document.getElementById("editor-within-fieldset")
+    const fieldset = document.getElementById("fieldset")
+
+    fieldset.disabled = true
+
+    assert.equal(editor.matches(":disabled"), true, "sets :disabled CSS pseudostate")
+    assert.equal(editor.inputElement.disabled, true, "disables input")
+    assert.equal(editor.disabled, true, "infers disabled state from ancestor")
+    assert.equal(editor.hasAttribute("disabled"), false, "does not set [disabled] attribute")
+    assert.equal(editor.hasAttribute("contenteditable"), false, "removes [contenteditable] attribute")
+
+    fieldset.disabled = false
+
+    assert.equal(editor.matches(":disabled"), false, "removes sets :disabled pseudostate")
+    assert.equal(editor.inputElement.disabled, false, "enabled input")
+    assert.equal(editor.disabled, false, "updates .disabled property")
+    assert.equal(editor.hasAttribute("disabled"), false, "does not set [disabled] attribute")
+    assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
+  })
+
+  testIfFormAssociated("does not receive focus when :disabled", () => {
+    const activeEditor = document.getElementById("editor-with-input-form")
+    const editor = document.getElementById("editor-within-fieldset")
+
+    activeEditor.focus()
+    editor.disabled = true
+    editor.focus()
+
+    assert.equal(activeEditor, document.activeElement, "disabled editor does not receive focus")
+  })
+
+  testIfFormAssociated("disabled editor does not encode its value when the form is submitted", () => {
+    const editor = document.getElementById("editor-with-ancestor-form")
+    const form = editor.form
+
+    editor.inputElement.value = "Hello world"
+    editor.disabled = true
+
+    assert.deepEqual({}, Object.fromEntries(new FormData(form).entries()), "does not write to FormData")
+  })
+
+  testIfFormAssociated("validates with [required] attribute as invalid", () => {
+    const editor = document.getElementById("editor-with-ancestor-form")
+    const form = editor.form
+    let invalidEvent, submitEvent = null
+
+    editor.addEventListener("invalid", event => invalidEvent = event, { once: true })
+    form.addEventListener("submit", event => submitEvent = event, { once: true })
+
+    editor.required = true
+    form.requestSubmit()
+
+    // assert.equal(document.activeElement, editor, "editor receives focus")
+    assert.equal(editor.required, true, ".required property retrurns true")
+    assert.equal(editor.validity.valid, false, "validity.valid is false")
+    assert.equal(editor.validationMessage, "Please fill out this field.", "sets .validationMessage")
+    assert.equal(invalidEvent.target, editor, "dispatches 'invalid' event on editor")
+    assert.equal(submitEvent, null, "does not dispatch a 'submit' event")
+  })
+
+  testIfFormAssociated("does not validate with [disabled] attribute", () => {
+    const editor = document.getElementById("editor-with-ancestor-form")
+    let invalidEvent = null
+
+    editor.disabled = true
+    editor.required = true
+    editor.addEventListener("invalid", event => invalidEvent = event, { once: true })
+    editor.reportValidity()
+
+    assert.equal(invalidEvent, null, "does not dispatch an 'invalid' event")
+  })
+
+  testIfFormAssociated("re-validates when the value changes", async () => {
+    const editor = document.getElementById("editor-with-ancestor-form")
+    editor.required = true
+    editor.focus()
+
+    assert.equal(editor.validity.valid, false, "validity.valid is initially false")
+
+    await typeCharacters("a")
+
+    assert.equal(editor.validity.valid, true, "validity.valid is true after re-validating")
+    assert.equal(editor.validity.valueMissing, false, "validity.valueMissing is false")
+    assert.equal(editor.validationMessage, "", "clears the validationMessage")
+  })
+
+  testIfFormAssociated("accepts a customError validation message", () => {
+    const editor = document.getElementById("editor-with-ancestor-form")
+
+    editor.setCustomValidity("A custom validation message")
+
+    assert.equal(editor.validity.valid, false)
+    assert.equal(editor.validity.customError, true)
+    assert.equal(editor.validationMessage, "A custom validation message")
+  })
 })
+
+function testIfFormAssociated(name, callback) {
+  test(name, async () => {
+    if (config.editor.formAssociated) {
+      await callback()
+    } else {
+      assert.equal(config.editor.formAssociated, false, "skipping test that requires ElementInternals")
+    }
+  })
+}
diff --git a/src/test/test_helpers/fixtures/editor_with_labels.js b/src/test/test_helpers/fixtures/editor_with_labels.js
index e1a1fa0a0..8d174e124 100644
--- a/src/test/test_helpers/fixtures/editor_with_labels.js
+++ b/src/test/test_helpers/fixtures/editor_with_labels.js
@@ -1,7 +1,5 @@
 export default () =>
   `<label id="label-1" for="editor"><span>Label 1</span></label>
-  <label id="label-2">
-    Label 2
-    <trix-editor id="editor"></trix-editor>
-  </label>
-  <label id="label-3" for="editor">Label 3</label>`
+   <label id="label-2">Label 2</label>
+   <trix-editor id="editor"></trix-editor>
+   <label id="label-3" for="editor">Label 3</label>`
diff --git a/src/test/test_helpers/fixtures/editors_with_forms.js b/src/test/test_helpers/fixtures/editors_with_forms.js
index 56ed494ac..292d0e315 100644
--- a/src/test/test_helpers/fixtures/editors_with_forms.js
+++ b/src/test/test_helpers/fixtures/editors_with_forms.js
@@ -1,6 +1,6 @@
 export default () =>
   `<form id="ancestor-form">
-    <trix-editor id="editor-with-ancestor-form"></trix-editor>
+    <trix-editor id="editor-with-ancestor-form" name="editor-with-ancestor-form"></trix-editor>
   </form>
 
   <form id="input-form">
@@ -8,4 +8,5 @@ export default () =>
   </form>
   <trix-editor id="editor-with-input-form" input="hidden-input"></trix-editor>
 
-  <trix-editor id="editor-with-no-form"></trix-editor>`
+  <trix-editor id="editor-with-no-form"></trix-editor>
+  <fieldset id="fieldset"><trix-editor id="editor-within-fieldset"></fieldset>`
diff --git a/src/test/test_helpers/fixtures/form_associated_false.js b/src/test/test_helpers/fixtures/form_associated_false.js
new file mode 100644
index 000000000..2b95f2bc5
--- /dev/null
+++ b/src/test/test_helpers/fixtures/form_associated_false.js
@@ -0,0 +1 @@
+window.Trix.config.editor.formAssociated = false
diff --git a/src/trix/config/editor.js b/src/trix/config/editor.js
new file mode 100644
index 000000000..cc11f166f
--- /dev/null
+++ b/src/trix/config/editor.js
@@ -0,0 +1,3 @@
+export default {
+  formAssociated: "ElementInternals" in window
+}
diff --git a/src/trix/config/index.js b/src/trix/config/index.js
index 27f7abc2f..64684bc1e 100644
--- a/src/trix/config/index.js
+++ b/src/trix/config/index.js
@@ -2,6 +2,7 @@ export { default as attachments } from "./attachments"
 export { default as blockAttributes } from "./block_attributes"
 export { default as browser } from "./browser"
 export { default as css } from "./css"
+export { default as editor } from "./editor"
 export { default as fileSize } from "./file_size_formatting"
 export { default as input } from "./input"
 export { default as keyNames } from "./key_names"
diff --git a/src/trix/controllers/editor_controller.js b/src/trix/controllers/editor_controller.js
index 6f469db5a..04c2e921d 100644
--- a/src/trix/controllers/editor_controller.js
+++ b/src/trix/controllers/editor_controller.js
@@ -503,7 +503,7 @@ export default class EditorController extends Controller {
   updateInputElement() {
     const element = this.compositionController.getSerializableElement()
     const value = serializeToContentType(element, "text/html")
-    return this.editorElement.setInputElementValue(value)
+    return this.editorElement.setFormValue(value)
   }
 
   notifyEditorElement(message, data) {
diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js
index 44626100b..e99a898e5 100644
--- a/src/trix/elements/trix_editor_element.js
+++ b/src/trix/elements/trix_editor_element.js
@@ -161,6 +161,19 @@ installDefaultCSSForTagName("trix-editor", `\
 }`)
 
 export default class TrixEditorElement extends HTMLElement {
+  static get formAssociated() {
+    return config.editor.formAssociated
+  }
+
+  #customValidationMessage
+  #internals
+
+  constructor() {
+    super()
+    this.#internals = this.constructor.formAssociated ?
+      this.attachInternals() :
+      null
+  }
 
   // Properties
 
@@ -174,6 +187,8 @@ export default class TrixEditorElement extends HTMLElement {
   }
 
   get labels() {
+    if (this.#internals) return this.#internals.labels
+
     const labels = []
     if (this.id && this.ownerDocument) {
       labels.push(...Array.from(this.ownerDocument.querySelectorAll(`label[for='${this.id}']`) || []))
@@ -238,6 +253,76 @@ export default class TrixEditorElement extends HTMLElement {
     this.editor?.loadHTML(this.defaultValue)
   }
 
+  get type() {
+    return this.localName
+  }
+
+  get disabled() {
+    if (this.#internals) {
+      return this.inputElement.disabled
+    } else {
+      console.warn("Trix is not configured to support the [disabled] attribute. Set Trix.config.editor.formAssociated = true")
+
+      return false
+    }
+  }
+
+  set disabled(value) {
+    if (this.#internals) {
+      this.toggleAttribute("disabled", value)
+    } else {
+      console.warn("Trix is not configured to support the [disabled] attribute. Set Trix.config.editor.formAssociated = true")
+    }
+  }
+
+  get required() {
+    if (this.#internals) {
+      return this.hasAttribute("required")
+    } else {
+      console.warn("Trix is not configured to support the [required] attribute. Set Trix.config.editor.formAssociated = true")
+
+      return false
+    }
+  }
+
+  set required(value) {
+    if (this.#internals) {
+      this.toggleAttribute("required", value)
+      this.#synchronizeValidation()
+    } else {
+      console.warn("Trix is not configured to support the [required] attribute. Set Trix.config.editor.formAssociated = true")
+    }
+  }
+
+  get validity() {
+    if (this.#internals) {
+      return this.#internals.validity
+    } else {
+      console.warn("Trix is not configured to support the validity property. Set Trix.config.editor.formAssociated = true")
+      return null
+    }
+  }
+
+  get validationMessage() {
+    if (this.#internals) {
+      return this.#internals.validationMessage
+    } else {
+      console.warn("Trix is not configured to support the validationMessage property. Set Trix.config.editor.formAssociated = true")
+
+      return ""
+    }
+  }
+
+  get willValidate() {
+    if (this.#internals) {
+      return this.#internals.willValidate
+    } else {
+      console.warn("Trix is not configured to support the willValidate property. Set Trix.config.editor.formAssociated = true")
+
+      return false
+    }
+  }
+
   // Controller delegate methods
 
   notify(message, data) {
@@ -246,10 +331,14 @@ export default class TrixEditorElement extends HTMLElement {
     }
   }
 
-  setInputElementValue(value) {
+  setFormValue(value) {
     if (this.inputElement) {
       this.inputElement.value = value
     }
+
+    if (this.#internals) {
+      this.#synchronizeValidation()
+    }
   }
 
   // Element lifecycle
@@ -269,16 +358,25 @@ export default class TrixEditorElement extends HTMLElement {
         requestAnimationFrame(() => triggerEvent("trix-initialize", { onElement: this }))
       }
       this.editorController.registerSelectionManager()
-      this.registerResetListener()
-      this.registerClickListener()
+      if (this.#internals) {
+        this.#synchronizeValidation()
+      } else {
+        this.registerResetListener()
+        this.registerClickListener()
+      }
       autofocus(this)
     }
   }
 
   disconnectedCallback() {
     this.editorController?.unregisterSelectionManager()
-    this.unregisterResetListener()
-    return this.unregisterClickListener()
+    if (this.#internals) {
+      // no-op
+    } else {
+      this.unregisterResetListener()
+      return this.unregisterClickListener()
+    }
+
   }
 
   // Form support
@@ -322,4 +420,53 @@ export default class TrixEditorElement extends HTMLElement {
   reset() {
     this.value = this.defaultValue
   }
+
+  checkValidity() {
+    if (this.#internals) {
+      return this.#internals.checkValidity()
+    } else {
+      console.warn("Trix is not configured to support checkValidity(). Set Trix.config.editor.formAssociated = true")
+
+      return true
+    }
+  }
+
+  reportValidity() {
+    if (this.#internals) {
+      return this.#internals.reportValidity()
+    } else {
+      console.warn("Trix is not configured to support reportValidity(). Set Trix.config.editor.formAssociated = true")
+
+      return true
+    }
+  }
+
+  setCustomValidity(validationMessage) {
+    if (this.#internals) {
+      this.#customValidationMessage = validationMessage
+
+      this.#synchronizeValidation()
+    } else {
+      console.warn("Trix is not configured to support setCustomValidity(validationMessage). Set Trix.config.editor.formAssociated = true")
+    }
+  }
+
+  formDisabledCallback(disabled) {
+    this.inputElement.disabled = disabled
+    this.toggleAttribute("contenteditable", !disabled)
+  }
+
+  formResetCallback() {
+    this.reset()
+  }
+
+  #synchronizeValidation() {
+    const { required, value } = this
+    const valueMissing = required && !value
+    const customError = !!this.#customValidationMessage
+    const input = Object.assign(document.createElement("input"), { required })
+    const validationMessage = this.#customValidationMessage || input.validationMessage
+
+    this.#internals.setValidity({ valueMissing, customError }, validationMessage)
+  }
 }

From 7d3cf3660ea1b9d89c80c1ebca85a67e3b596b35 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Sun, 6 Oct 2024 13:50:01 +0100
Subject: [PATCH 2/3] Revert `Trix.config.editor` changes

---
 .github/workflows/ci.yml                      |  7 +----
 README.md                                     |  4 +--
 karma.conf.js                                 | 10 +------
 src/test/system/custom_element_test.js        | 30 +++++++------------
 .../fixtures/form_associated_false.js         |  1 -
 src/trix/config/editor.js                     |  3 --
 src/trix/config/index.js                      |  1 -
 src/trix/elements/trix_editor_element.js      | 24 +++++++--------
 8 files changed, 25 insertions(+), 55 deletions(-)
 delete mode 100644 src/test/test_helpers/fixtures/form_associated_false.js
 delete mode 100644 src/trix/config/editor.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7dd3d3971..8ab86c134 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,12 +8,7 @@ on:
 
 jobs:
   build:
-    name: "Browser tests (Trix.config.editor.formAssociated = ${{ matrix.formAssociated }})"
-    strategy:
-      matrix:
-        formAssociated: [true, false]
-    env:
-      FORM_ASSOCIATED: "${{ matrix.formAssociated }}"
+    name: Browser tests
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
diff --git a/README.md b/README.md
index e6f404922..c4008b844 100644
--- a/README.md
+++ b/README.md
@@ -90,12 +90,12 @@ Clicking the quote button toggles whether the block should be rendered with `<bl
 
 ## Integrating with Element Internals
 
-Trix will integrate `<trix-editor>` elements with forms depending on the browser's support for [Element Internals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals). By default, Trix will enable support for `ElementInternals` when the feature is enabled in the browser. If there is a need to disable support for `ElementInternals`, set `Trix.config.editor.formAssociated = false`:
+Trix will integrate `<trix-editor>` elements with forms depending on the browser's support for [Element Internals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals). If there is a need to disable support for `ElementInternals`, set `Trix.elements.TrixEditorElement.formAssociated = false`:
 
 ```js
 import Trix from "trix"
 
-Trix.config.editor.formAssociated = false
+Trix.elements.TrixEditorElement.formAssociated = false
 ```
 
 ## Invoking Internal Trix Actions
diff --git a/karma.conf.js b/karma.conf.js
index fc5c6ad82..9fe317624 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -3,7 +3,7 @@ const config = {
   frameworks: [ "qunit" ],
   files: [
     { pattern: "dist/test.js", watched: false },
-    { pattern: "src/test/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
+    { pattern: "src/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
   ],
   proxies: {
     "/test_helpers/fixtures/": "/base/src/test_helpers/fixtures/"
@@ -29,14 +29,6 @@ const config = {
 
 /* eslint camelcase: "off",  */
 
-if (process.env.FORM_ASSOCIATED === "false") {
-  config.files.push({
-    pattern: "src/test/test_helpers/fixtures/form_associated_false.js",
-    watched: false,
-    included: true
-  })
-}
-
 if (process.env.SAUCE_ACCESS_KEY) {
   config.customLaunchers = {
     sl_chrome_latest: {
diff --git a/src/test/system/custom_element_test.js b/src/test/system/custom_element_test.js
index 5af7d6043..3a14bb90e 100644
--- a/src/test/system/custom_element_test.js
+++ b/src/test/system/custom_element_test.js
@@ -1,5 +1,5 @@
-import * as config from "trix/config"
 import { rangesAreEqual } from "trix/core/helpers"
+import TrixEditorElement from "trix/elements/trix_editor_element"
 
 import {
   TEST_IMAGE_URL,
@@ -560,7 +560,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal("trix-editor", element.type)
   })
 
-  testIfFormAssociated("adds [disabled] attribute based on .disabled property", () => {
+  testIf(TrixEditorElement.formAssociated, "adds [disabled] attribute based on .disabled property", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
 
     editor.disabled = true
@@ -572,7 +572,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("disabled"), false, "removes [disabled] attribute")
   })
 
-  testIfFormAssociated("removes [contenteditable] and disables input when editor element has [disabled]", () => {
+  testIf(TrixEditorElement.formAssociated, "removes [contenteditable] and disables input when editor element has [disabled]", () => {
     const editor = document.getElementById("editor-with-no-form")
 
     editor.setAttribute("disabled", "")
@@ -590,7 +590,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
   })
 
-  testIfFormAssociated("removes [contenteditable] and disables input when editor element is :disabled", () => {
+  testIf(TrixEditorElement.formAssociated, "removes [contenteditable] and disables input when editor element is :disabled", () => {
     const editor = document.getElementById("editor-within-fieldset")
     const fieldset = document.getElementById("fieldset")
 
@@ -611,7 +611,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
   })
 
-  testIfFormAssociated("does not receive focus when :disabled", () => {
+  testIf(TrixEditorElement.formAssociated, "does not receive focus when :disabled", () => {
     const activeEditor = document.getElementById("editor-with-input-form")
     const editor = document.getElementById("editor-within-fieldset")
 
@@ -622,7 +622,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(activeEditor, document.activeElement, "disabled editor does not receive focus")
   })
 
-  testIfFormAssociated("disabled editor does not encode its value when the form is submitted", () => {
+  testIf(TrixEditorElement.formAssociated, "disabled editor does not encode its value when the form is submitted", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     const form = editor.form
 
@@ -632,7 +632,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.deepEqual({}, Object.fromEntries(new FormData(form).entries()), "does not write to FormData")
   })
 
-  testIfFormAssociated("validates with [required] attribute as invalid", () => {
+  testIf(TrixEditorElement.formAssociated, "validates with [required] attribute as invalid", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     const form = editor.form
     let invalidEvent, submitEvent = null
@@ -651,7 +651,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(submitEvent, null, "does not dispatch a 'submit' event")
   })
 
-  testIfFormAssociated("does not validate with [disabled] attribute", () => {
+  testIf(TrixEditorElement.formAssociated, "does not validate with [disabled] attribute", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     let invalidEvent = null
 
@@ -663,7 +663,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(invalidEvent, null, "does not dispatch an 'invalid' event")
   })
 
-  testIfFormAssociated("re-validates when the value changes", async () => {
+  testIf(TrixEditorElement.formAssociated, "re-validates when the value changes", async () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     editor.required = true
     editor.focus()
@@ -677,7 +677,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.validationMessage, "", "clears the validationMessage")
   })
 
-  testIfFormAssociated("accepts a customError validation message", () => {
+  testIf(TrixEditorElement.formAssociated, "accepts a customError validation message", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
 
     editor.setCustomValidity("A custom validation message")
@@ -687,13 +687,3 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.validationMessage, "A custom validation message")
   })
 })
-
-function testIfFormAssociated(name, callback) {
-  test(name, async () => {
-    if (config.editor.formAssociated) {
-      await callback()
-    } else {
-      assert.equal(config.editor.formAssociated, false, "skipping test that requires ElementInternals")
-    }
-  })
-}
diff --git a/src/test/test_helpers/fixtures/form_associated_false.js b/src/test/test_helpers/fixtures/form_associated_false.js
deleted file mode 100644
index 2b95f2bc5..000000000
--- a/src/test/test_helpers/fixtures/form_associated_false.js
+++ /dev/null
@@ -1 +0,0 @@
-window.Trix.config.editor.formAssociated = false
diff --git a/src/trix/config/editor.js b/src/trix/config/editor.js
deleted file mode 100644
index cc11f166f..000000000
--- a/src/trix/config/editor.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  formAssociated: "ElementInternals" in window
-}
diff --git a/src/trix/config/index.js b/src/trix/config/index.js
index 64684bc1e..27f7abc2f 100644
--- a/src/trix/config/index.js
+++ b/src/trix/config/index.js
@@ -2,7 +2,6 @@ export { default as attachments } from "./attachments"
 export { default as blockAttributes } from "./block_attributes"
 export { default as browser } from "./browser"
 export { default as css } from "./css"
-export { default as editor } from "./editor"
 export { default as fileSize } from "./file_size_formatting"
 export { default as input } from "./input"
 export { default as keyNames } from "./key_names"
diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js
index e99a898e5..cb96822e1 100644
--- a/src/trix/elements/trix_editor_element.js
+++ b/src/trix/elements/trix_editor_element.js
@@ -161,9 +161,7 @@ installDefaultCSSForTagName("trix-editor", `\
 }`)
 
 export default class TrixEditorElement extends HTMLElement {
-  static get formAssociated() {
-    return config.editor.formAssociated
-  }
+  static formAssociated = "ElementInternals" in window
 
   #customValidationMessage
   #internals
@@ -261,7 +259,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.inputElement.disabled
     } else {
-      console.warn("Trix is not configured to support the [disabled] attribute. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
 
       return false
     }
@@ -271,7 +269,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       this.toggleAttribute("disabled", value)
     } else {
-      console.warn("Trix is not configured to support the [disabled] attribute. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
     }
   }
 
@@ -279,7 +277,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.hasAttribute("required")
     } else {
-      console.warn("Trix is not configured to support the [required] attribute. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the [required] attribute for trix-editor elements.")
 
       return false
     }
@@ -290,7 +288,7 @@ export default class TrixEditorElement extends HTMLElement {
       this.toggleAttribute("required", value)
       this.#synchronizeValidation()
     } else {
-      console.warn("Trix is not configured to support the [required] attribute. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the [required] attribute for trix-editor elements.")
     }
   }
 
@@ -298,7 +296,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.#internals.validity
     } else {
-      console.warn("Trix is not configured to support the validity property. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the validity property for trix-editor elements.")
       return null
     }
   }
@@ -307,7 +305,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.#internals.validationMessage
     } else {
-      console.warn("Trix is not configured to support the validationMessage property. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the validationMessage property for trix-editor elements.")
 
       return ""
     }
@@ -317,7 +315,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.#internals.willValidate
     } else {
-      console.warn("Trix is not configured to support the willValidate property. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the willValidate property for trix-editor elements.")
 
       return false
     }
@@ -425,7 +423,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.#internals.checkValidity()
     } else {
-      console.warn("Trix is not configured to support checkValidity(). Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support checkValidity() for trix-editor elements.")
 
       return true
     }
@@ -435,7 +433,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.#internals.reportValidity()
     } else {
-      console.warn("Trix is not configured to support reportValidity(). Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support reportValidity() for trix-editor elements.")
 
       return true
     }
@@ -447,7 +445,7 @@ export default class TrixEditorElement extends HTMLElement {
 
       this.#synchronizeValidation()
     } else {
-      console.warn("Trix is not configured to support setCustomValidity(validationMessage). Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support setCustomValidity(validationMessage) for trix-editor elements.")
     }
   }
 

From 1cfa094832af70d238b4477aa95f9d737f896716 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Fri, 11 Oct 2024 00:57:26 +0100
Subject: [PATCH 3/3] Extract `LegacyDelegate` and `ElementInternalsDelegate`

Delegate implementation-specific methods and properties to the
appropriate delegate. Set the delegate based on the
`TrixEditorElement.formAssociated` property.
---
 src/test/system/accessibility_test.js    |  13 +-
 src/test/test_helpers/test_helpers.js    |   4 +
 src/trix/elements/trix_editor_element.js | 405 +++++++++++++----------
 3 files changed, 241 insertions(+), 181 deletions(-)

diff --git a/src/test/system/accessibility_test.js b/src/test/system/accessibility_test.js
index a86a61767..456078b49 100644
--- a/src/test/system/accessibility_test.js
+++ b/src/test/system/accessibility_test.js
@@ -1,4 +1,5 @@
-import { assert, test, testGroup, triggerEvent } from "test/test_helper"
+import { assert, skipIf, test, testGroup, triggerEvent } from "test/test_helper"
+import TrixEditorElement from "trix/elements/trix_editor_element"
 
 testGroup("Accessibility attributes", { template: "editor_default_aria_label" }, () => {
   test("sets the role to textbox", () => {
@@ -6,28 +7,28 @@ testGroup("Accessibility attributes", { template: "editor_default_aria_label" },
     assert.equal(editor.getAttribute("role"), "textbox")
   })
 
-  test("does not set aria-label when the element has no <label> elements", () => {
+  skipIf(TrixEditorElement.formAssociated, "does not set aria-label when the element has no <label> elements", () => {
     const editor = document.getElementById("editor-without-labels")
     assert.equal(editor.hasAttribute("aria-label"), false)
   })
 
-  test("does not override aria-label when the element declares it", () => {
+  skipIf(TrixEditorElement.formAssociated, "does not override aria-label when the element declares it", () => {
     const editor = document.getElementById("editor-with-aria-label")
     assert.equal(editor.getAttribute("aria-label"), "ARIA Label text")
   })
 
-  test("does not set aria-label when the element declares aria-labelledby", () => {
+  skipIf(TrixEditorElement.formAssociated, "does not set aria-label when the element declares aria-labelledby", () => {
     const editor = document.getElementById("editor-with-aria-labelledby")
     assert.equal(editor.hasAttribute("aria-label"), false)
     assert.equal(editor.getAttribute("aria-labelledby"), "aria-labelledby-id")
   })
 
-  test("assigns aria-label to the text of the element's <label> elements", () => {
+  skipIf(TrixEditorElement.formAssociated, "assigns aria-label to the text of the element's <label> elements", () => {
     const editor = document.getElementById("editor-with-labels")
     assert.equal(editor.getAttribute("aria-label"), "Label 1 Label 2 Label 3")
   })
 
-  test("updates the aria-label on focus", () => {
+  skipIf(TrixEditorElement.formAssociated, "updates the aria-label on focus", () => {
     const editor = document.getElementById("editor-with-modified-label")
     const label = document.getElementById("modified-label")
 
diff --git a/src/test/test_helpers/test_helpers.js b/src/test/test_helpers/test_helpers.js
index 96a2bd31c..f51dc3566 100644
--- a/src/test/test_helpers/test_helpers.js
+++ b/src/test/test_helpers/test_helpers.js
@@ -48,6 +48,10 @@ export const testGroup = function (name, options, callback) {
   }
 }
 
+export const skipIf = function (condition, ...args) {
+  testIf(!condition, ...args)
+}
+
 export const testIf = function (condition, ...args) {
   if (condition) {
     test(...Array.from(args || []))
diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js
index cb96822e1..7837f61b5 100644
--- a/src/trix/elements/trix_editor_element.js
+++ b/src/trix/elements/trix_editor_element.js
@@ -160,17 +160,201 @@ installDefaultCSSForTagName("trix-editor", `\
     margin-right: -1px !important;
 }`)
 
+class ElementInternalsDelegate {
+  #internals
+
+  constructor(element) {
+    this.element = element
+    this.#internals = element.attachInternals()
+  }
+
+  connectedCallback() {
+    this.#validate()
+  }
+
+  disconnectedCallback() {
+  }
+
+  get labels() {
+    return this.#internals.labels
+  }
+
+  get disabled() {
+    return this.element.inputElement?.disabled
+  }
+
+  set disabled(value) {
+    this.element.toggleAttribute("disabled", value)
+  }
+
+  get required() {
+    return this.element.hasAttribute("required")
+  }
+
+  set required(value) {
+    this.element.toggleAttribute("required", value)
+    this.#validate()
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage
+  }
+
+  get willValidate() {
+    return this.#internals.willValidate
+  }
+
+  setFormValue(value) {
+    this.#validate()
+  }
+
+  checkValidity() {
+    return this.#internals.checkValidity()
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  setCustomValidity(validationMessage) {
+    this.#validate(validationMessage)
+  }
+
+  #validate(customValidationMessage = "") {
+    const { required, value } = this.element
+    const valueMissing = required && !value
+    const customError = !!customValidationMessage
+    const input = Object.assign(document.createElement("input"), { required })
+    const validationMessage = customValidationMessage || input.validationMessage
+
+    this.#internals.setValidity({ valueMissing, customError }, validationMessage)
+  }
+}
+
+class LegacyDelegate {
+  #focusHandler
+
+  constructor(element) {
+    this.element = element
+  }
+
+  connectedCallback() {
+    this.#focusHandler = ensureAriaLabel(this.element)
+    window.addEventListener("reset", this.#resetBubbled, false)
+    window.addEventListener("click", this.#clickBubbled, false)
+  }
+
+  disconnectedCallback() {
+    this.#focusHandler?.destroy()
+    window.removeEventListener("reset", this.#resetBubbled, false)
+    window.removeEventListener("click", this.#clickBubbled, false)
+  }
+
+  get labels() {
+    const labels = []
+    if (this.element.id && this.element.ownerDocument) {
+      labels.push(...Array.from(this.element.ownerDocument.querySelectorAll(`label[for='${this.element.id}']`) || []))
+    }
+
+    const label = findClosestElementFromNode(this.element, { matchingSelector: "label" })
+    if (label) {
+      if ([ this.element, null ].includes(label.control)) {
+        labels.push(label)
+      }
+    }
+
+    return labels
+  }
+
+  get disabled() {
+    console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
+
+    return false
+  }
+
+  set disabled(value) {
+    console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
+  }
+
+  get required() {
+    console.warn("This browser does not support the [required] attribute for trix-editor elements.")
+
+    return false
+  }
+
+  set required(value) {
+    console.warn("This browser does not support the [required] attribute for trix-editor elements.")
+  }
+
+  get validity() {
+    console.warn("This browser does not support the validity property for trix-editor elements.")
+    return null
+  }
+
+  get validationMessage() {
+    console.warn("This browser does not support the validationMessage property for trix-editor elements.")
+
+    return ""
+  }
+
+  get willValidate() {
+    console.warn("This browser does not support the willValidate property for trix-editor elements.")
+
+    return false
+  }
+
+  setFormValue(value) {
+  }
+
+  checkValidity() {
+    console.warn("This browser does not support checkValidity() for trix-editor elements.")
+
+    return true
+  }
+
+  reportValidity() {
+    console.warn("This browser does not support reportValidity() for trix-editor elements.")
+
+    return true
+  }
+
+  setCustomValidity(validationMessage) {
+    console.warn("This browser does not support setCustomValidity(validationMessage) for trix-editor elements.")
+  }
+
+  #resetBubbled = (event) => {
+    if (event.defaultPrevented) return
+    if (event.target !== this.element.form) return
+    this.element.reset()
+  }
+
+  #clickBubbled = (event) => {
+    if (event.defaultPrevented) return
+    if (this.element.contains(event.target)) return
+
+    const label = findClosestElementFromNode(event.target, { matchingSelector: "label" })
+    if (!label) return
+
+    if (!Array.from(this.labels).includes(label)) return
+
+    this.element.focus()
+  }
+}
+
 export default class TrixEditorElement extends HTMLElement {
   static formAssociated = "ElementInternals" in window
 
-  #customValidationMessage
-  #internals
+  #delegate
 
   constructor() {
     super()
-    this.#internals = this.constructor.formAssociated ?
-      this.attachInternals() :
-      null
+    this.#delegate = this.constructor.formAssociated ?
+      new ElementInternalsDelegate(this) :
+      new LegacyDelegate(this)
   }
 
   // Properties
@@ -185,21 +369,39 @@ export default class TrixEditorElement extends HTMLElement {
   }
 
   get labels() {
-    if (this.#internals) return this.#internals.labels
+    return this.#delegate.labels
+  }
 
-    const labels = []
-    if (this.id && this.ownerDocument) {
-      labels.push(...Array.from(this.ownerDocument.querySelectorAll(`label[for='${this.id}']`) || []))
-    }
+  get disabled() {
+    return this.#delegate.disabled
+  }
 
-    const label = findClosestElementFromNode(this, { matchingSelector: "label" })
-    if (label) {
-      if ([ this, null ].includes(label.control)) {
-        labels.push(label)
-      }
-    }
+  set disabled(value) {
+    this.#delegate.disabled = value
+  }
 
-    return labels
+  get required() {
+    return this.#delegate.required
+  }
+
+  set required(value) {
+    this.#delegate.required = value
+  }
+
+  get validity() {
+    return this.#delegate.validity
+  }
+
+  get validationMessage() {
+    return this.#delegate.validationMessage
+  }
+
+  get willValidate() {
+    return this.#delegate.willValidate
+  }
+
+  get type() {
+    return this.localName
   }
 
   get toolbarElement() {
@@ -251,76 +453,6 @@ export default class TrixEditorElement extends HTMLElement {
     this.editor?.loadHTML(this.defaultValue)
   }
 
-  get type() {
-    return this.localName
-  }
-
-  get disabled() {
-    if (this.#internals) {
-      return this.inputElement.disabled
-    } else {
-      console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
-
-      return false
-    }
-  }
-
-  set disabled(value) {
-    if (this.#internals) {
-      this.toggleAttribute("disabled", value)
-    } else {
-      console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
-    }
-  }
-
-  get required() {
-    if (this.#internals) {
-      return this.hasAttribute("required")
-    } else {
-      console.warn("This browser does not support the [required] attribute for trix-editor elements.")
-
-      return false
-    }
-  }
-
-  set required(value) {
-    if (this.#internals) {
-      this.toggleAttribute("required", value)
-      this.#synchronizeValidation()
-    } else {
-      console.warn("This browser does not support the [required] attribute for trix-editor elements.")
-    }
-  }
-
-  get validity() {
-    if (this.#internals) {
-      return this.#internals.validity
-    } else {
-      console.warn("This browser does not support the validity property for trix-editor elements.")
-      return null
-    }
-  }
-
-  get validationMessage() {
-    if (this.#internals) {
-      return this.#internals.validationMessage
-    } else {
-      console.warn("This browser does not support the validationMessage property for trix-editor elements.")
-
-      return ""
-    }
-  }
-
-  get willValidate() {
-    if (this.#internals) {
-      return this.#internals.willValidate
-    } else {
-      console.warn("This browser does not support the willValidate property for trix-editor elements.")
-
-      return false
-    }
-  }
-
   // Controller delegate methods
 
   notify(message, data) {
@@ -332,10 +464,7 @@ export default class TrixEditorElement extends HTMLElement {
   setFormValue(value) {
     if (this.inputElement) {
       this.inputElement.value = value
-    }
-
-    if (this.#internals) {
-      this.#synchronizeValidation()
+      this.#delegate.setFormValue(value)
     }
   }
 
@@ -345,7 +474,6 @@ export default class TrixEditorElement extends HTMLElement {
     if (!this.hasAttribute("data-trix-internal")) {
       makeEditable(this)
       addAccessibilityRole(this)
-      ensureAriaLabel(this)
 
       if (!this.editorController) {
         triggerEvent("trix-before-initialize", { onElement: this })
@@ -356,101 +484,34 @@ export default class TrixEditorElement extends HTMLElement {
         requestAnimationFrame(() => triggerEvent("trix-initialize", { onElement: this }))
       }
       this.editorController.registerSelectionManager()
-      if (this.#internals) {
-        this.#synchronizeValidation()
-      } else {
-        this.registerResetListener()
-        this.registerClickListener()
-      }
+      this.#delegate.connectedCallback()
       autofocus(this)
     }
   }
 
   disconnectedCallback() {
     this.editorController?.unregisterSelectionManager()
-    if (this.#internals) {
-      // no-op
-    } else {
-      this.unregisterResetListener()
-      return this.unregisterClickListener()
-    }
-
+    this.#delegate.disconnectedCallback()
   }
 
   // Form support
 
-  registerResetListener() {
-    this.resetListener = this.resetBubbled.bind(this)
-    return window.addEventListener("reset", this.resetListener, false)
-  }
-
-  unregisterResetListener() {
-    return window.removeEventListener("reset", this.resetListener, false)
-  }
-
-  registerClickListener() {
-    this.clickListener = this.clickBubbled.bind(this)
-    return window.addEventListener("click", this.clickListener, false)
-  }
-
-  unregisterClickListener() {
-    return window.removeEventListener("click", this.clickListener, false)
-  }
-
-  resetBubbled(event) {
-    if (event.defaultPrevented) return
-    if (event.target !== this.form) return
-    return this.reset()
-  }
-
-  clickBubbled(event) {
-    if (event.defaultPrevented) return
-    if (this.contains(event.target)) return
-
-    const label = findClosestElementFromNode(event.target, { matchingSelector: "label" })
-    if (!label) return
-
-    if (!Array.from(this.labels).includes(label)) return
-
-    return this.focus()
-  }
-
-  reset() {
-    this.value = this.defaultValue
-  }
-
   checkValidity() {
-    if (this.#internals) {
-      return this.#internals.checkValidity()
-    } else {
-      console.warn("This browser does not support checkValidity() for trix-editor elements.")
-
-      return true
-    }
+    return this.#delegate.checkValidity()
   }
 
   reportValidity() {
-    if (this.#internals) {
-      return this.#internals.reportValidity()
-    } else {
-      console.warn("This browser does not support reportValidity() for trix-editor elements.")
-
-      return true
-    }
+    return this.#delegate.reportValidity()
   }
 
   setCustomValidity(validationMessage) {
-    if (this.#internals) {
-      this.#customValidationMessage = validationMessage
-
-      this.#synchronizeValidation()
-    } else {
-      console.warn("This browser does not support setCustomValidity(validationMessage) for trix-editor elements.")
-    }
+    this.#delegate.setCustomValidity(validationMessage)
   }
 
   formDisabledCallback(disabled) {
-    this.inputElement.disabled = disabled
+    if (this.inputElement) {
+      this.inputElement.disabled = disabled
+    }
     this.toggleAttribute("contenteditable", !disabled)
   }
 
@@ -458,13 +519,7 @@ export default class TrixEditorElement extends HTMLElement {
     this.reset()
   }
 
-  #synchronizeValidation() {
-    const { required, value } = this
-    const valueMissing = required && !value
-    const customError = !!this.#customValidationMessage
-    const input = Object.assign(document.createElement("input"), { required })
-    const validationMessage = this.#customValidationMessage || input.validationMessage
-
-    this.#internals.setValidity({ valueMissing, customError }, validationMessage)
+  reset() {
+    this.value = this.defaultValue
   }
 }