Skip to content

Commit

Permalink
Support setting img[alt] on ManagedAttachment
Browse files Browse the repository at this point in the history
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
  • Loading branch information
seanpdoyle committed Nov 15, 2024
1 parent e597bc4 commit 3dd8f6e
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 1 deletion.
14 changes: 13 additions & 1 deletion src/test/system/accessibility_test.js
Original file line number Diff line number Diff line change
@@ -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" }, () => {
Expand All @@ -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)
Expand Down
4 changes: 4 additions & 0 deletions src/trix/views/previewable_attachment_view.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 3dd8f6e

Please sign in to comment.