@tangle-network/ui 11.28.0 → 11.28.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.28.1
+
+### Patch Changes
+
+- 084cd75: A Markdown image without alt text now gives its full-size link the accessible name "Open image full size".
+
 ## 11.28.0
 
 ### Minor Changes

package/dist/markdown/markdown.js

@@ -86,6 +86,7 @@ function MarkdownImage({ node: _node, src, alt, className, ...props }) {
 		href: url,
 		target: "_blank",
 		rel: "noopener noreferrer",
+		"aria-label": alt ? void 0 : "Open image full size",
 		className: "inline-block max-w-full",
 		children: image
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.28.0",
+  "version": "11.28.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/markdown/markdown.test.tsx

@@ -114,6 +114,12 @@ describe("Markdown", () => {
     expect(ad.closest("a")).toHaveAttribute("target", "_blank");
     expect(ad.closest("a")).toHaveAttribute("rel", "noopener noreferrer");
 
+    render(<Markdown>{"![](https://example.com/decorative.png)"}</Markdown>);
+    expect(screen.getByRole("link", { name: "Open image full size" })).toHaveAttribute(
+      "href",
+      "https://example.com/decorative.png",
+    );
+
     const badge = screen.getByRole("img", { name: "Badge" });
     expect(badge.closest("a")).toHaveAttribute("href", "https://example.com/docs");
     expect(badge.closest("a")?.parentElement?.closest("a")).toBeNull();

package/src/markdown/markdown.tsx

@@ -113,7 +113,14 @@ function MarkdownImage({ node: _node, src, alt, className, ...props }: Component
   );
   if (insideLink) return image;
   return (
-    <a href={url} target="_blank" rel="noopener noreferrer" className="inline-block max-w-full">
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      // An image without alt text would otherwise leave the link unnamed.
+      aria-label={alt ? undefined : "Open image full size"}
+      className="inline-block max-w-full"
+    >
       {image}
     </a>
   );