Support setting img[alt] on ManagedAttachment

src/test/system/accessibility_test.js

@@ -1,4 +1,5 @@
-import { assert, skipIf, test, testGroup, triggerEvent } from "test/test_helper"
+import { assert, insertImageAttachment, skipIf, test, testGroup, triggerEvent } from "test/test_helper"
+import { delay } from "test/test_helpers/timing_helpers"
 import TrixEditorElement from "trix/elements/trix_editor_element"
 
 testGroup("Accessibility attributes", { template: "editor_default_aria_label" }, () => {
@@ -7,6 +8,17 @@ testGroup("Accessibility attributes", { template: "editor_default_aria_label" },
     assert.equal(editor.getAttribute("role"), "textbox")
   })
 
+  test("reads img[alt] from Attachment attributes", async () => {
+    const element = getEditorElement()
+    element.addEventListener("trix-attachment-add", (event) => event.attachment.setAttributes({ alt: "some alt text" }))
+
+    insertImageAttachment()
+    await delay(20)
+
+    const image = element.querySelector("img")
+    assert.equal("some alt text", image.getAttribute("alt"), "sets [alt] from Attachment attribute")
+  })
+
   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)

src/trix/views/previewable_attachment_view.js

@@ -53,13 +53,17 @@ export default class PreviewableAttachmentView extends AttachmentView {
 
     const width = this.attachment.getWidth()
     const height = this.attachment.getHeight()
+    const alt = this.attachment.getAttribute("alt")
 
     if (width != null) {
       image.width = width
     }
     if (height != null) {
       image.height = height
     }
+    if (alt != null) {
+      image.alt = alt
+    }
 
     const storeKey = [ "imageElement", this.attachment.id, image.src, image.width, image.height ].join("/")
     image.dataset.trixStoreKey = storeKey