diff --git a/packages/core/src/blocks/File/helpers/render/createFileBlockWrapper.ts b/packages/core/src/blocks/File/helpers/render/createFileBlockWrapper.ts
index cbb347acff..51de658d2c 100644
--- a/packages/core/src/blocks/File/helpers/render/createFileBlockWrapper.ts
+++ b/packages/core/src/blocks/File/helpers/render/createFileBlockWrapper.ts
@@ -26,7 +26,12 @@ export const createFileBlockWrapper = (
element?: { dom: HTMLElement; destroy?: () => void },
buttonIcon?: HTMLElement,
) => {
- const wrapper = document.createElement("div");
+ // Use a / when the block has a caption, so the caption
+ // is semantically associated with its content for assistive tech. Falls back
+ // to a plain
when there is no caption (or the file has not been
+ // uploaded yet, since the upload UI never shows the caption).
+ const useFigure = block.props.url !== "" && !!block.props.caption;
+ const wrapper = document.createElement(useFigure ? "figure" : "div");
wrapper.className = "bn-file-block-content-wrapper";
// Show the add file button if the file has not been uploaded yet. Change to
@@ -73,7 +78,7 @@ export const createFileBlockWrapper = (
// Show the caption if there is one.
if (block.props.caption) {
- const caption = document.createElement("p");
+ const caption = document.createElement("figcaption");
caption.className = "bn-file-caption";
caption.textContent = block.props.caption;
wrapper.appendChild(caption);
diff --git a/packages/core/src/blocks/Image/block.ts b/packages/core/src/blocks/Image/block.ts
index 503c483527..9de973bb49 100644
--- a/packages/core/src/blocks/Image/block.ts
+++ b/packages/core/src/blocks/Image/block.ts
@@ -116,7 +116,10 @@ export const imageRender =
image.src = block.props.url;
}
- image.alt = block.props.name || block.props.caption || "BlockNote image";
+ // alt describes image content (per WCAG H86); figcaption (when present)
+ // is the contextual caption. Fall back to "" so unlabelled images are
+ // marked decorative rather than getting a noisy generic fallback.
+ image.alt = block.props.name || "";
image.contentEditable = "false";
image.draggable = false;
imageWrapper.appendChild(image);
@@ -150,7 +153,7 @@ export const imageToExternalHTML =
if (block.props.showPreview) {
image = document.createElement("img");
image.src = block.props.url;
- image.alt = block.props.name || block.props.caption || "BlockNote image";
+ image.alt = block.props.name || "";
if (block.props.previewWidth) {
image.width = block.props.previewWidth;
}
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index bba397ee58..990a856504 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -468,6 +468,9 @@ NESTED BLOCKS
cursor: pointer;
display: flex;
flex-direction: column;
+ /* Reset default browser margins (the wrapper becomes a
+ when the block has a caption). */
+ margin: 0;
user-select: none;
}
diff --git a/packages/react/src/blocks/File/helpers/render/FileBlockWrapper.tsx b/packages/react/src/blocks/File/helpers/render/FileBlockWrapper.tsx
index 6499b40ca0..f277db693f 100644
--- a/packages/react/src/blocks/File/helpers/render/FileBlockWrapper.tsx
+++ b/packages/react/src/blocks/File/helpers/render/FileBlockWrapper.tsx
@@ -29,8 +29,14 @@ export const FileBlockWrapper = (
) => {
const showLoader = useUploadLoading(props.block.id);
+ // Use a / when the block has a caption, so the caption
+ // is semantically associated with its content for assistive tech.
+ const useFigure =
+ props.block.props.url !== "" && !!props.block.props.caption && !showLoader;
+ const Wrapper = useFigure ? "figure" : "div";
+
return (
-
) : (
diff --git a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap b/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
index 6600cd0ead..777d7a773f 100644
--- a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
+++ b/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
@@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"
"`;
+exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"
\ No newline at end of file
diff --git a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/nestedImage.html b/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/nestedImage.html
index ece8708071..45b2830cd7 100644
--- a/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/nestedImage.html
+++ b/tests/src/unit/core/clipboard/copy/__snapshots__/text/html/nestedImage.html
@@ -1,7 +1,7 @@
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html
index 5c7411f3ed..55c9555506 100644
--- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html
+++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html
@@ -10,7 +10,7 @@
data-preview-width="256"
data-file-block=""
>
-