From 3dd8f6e97725cad4489905a5a229c29b5b585749 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Fri, 15 Nov 2024 11:59:44 -0500
Subject: [PATCH] Support setting `img[alt]` on `ManagedAttachment`

Extend the `PreviewableAttachmentView` to assign
[HTMLImageElement.alt][] based on the `Attachment` instance's `"alt"`
attribute.

This enables applications to set the [preview image's alt text][4.8.4.4]
while editing inside the `<trix-editor>` element. For example, an
application can modify a `ManagedAttachment` instance through a
`trix-attachment-add` event listener:

```js
addEventListener("trix-attachment-add", ({ attachment }) => {
  attachment.setAttributes({ alt: `Attached file ${attachment.file.name}` })
})
```

[HTMLImageElement.alt]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
[4.8.4.4]: https://html.spec.whatwg.org/multipage/images.html#alt
---
 src/test/system/accessibility_test.js         | 14 +++++++++++++-
 src/trix/views/previewable_attachment_view.js |  4 ++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/test/system/accessibility_test.js b/src/test/system/accessibility_test.js
index 456078b49..61dec8477 100644
--- a/src/test/system/accessibility_test.js
+++ b/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)
diff --git a/src/trix/views/previewable_attachment_view.js b/src/trix/views/previewable_attachment_view.js
index e6585277b..4b57a1199 100644
--- a/src/trix/views/previewable_attachment_view.js
+++ b/src/trix/views/previewable_attachment_view.js
@@ -53,6 +53,7 @@ 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
@@ -60,6 +61,9 @@ export default class PreviewableAttachmentView extends AttachmentView {
     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