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

Author: seanpdoyle

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