fix: render alt attribute properly for a11y, fixes #55

src/components/Image.js

@@ -21,7 +21,7 @@ export default {
 				attrs: {
 					...data.attrs,
 					src: url,
-					alt,
+					alt: alt || "",
 					copyright
 				}
 			})

test/components-PrismicImage.test.js

@@ -17,11 +17,19 @@ test("renders image field", (t) => {
 	t.snapshot(wrapper.html());
 });
 
+test("renders image field with an accessible default alt value", (t) => {
+	const wrapper = mount(PrismicImage, {
+		propsData: { field: { ...mock.value.image({ seed: 2 }), alt: null } },
+	});
+
+	t.snapshot(wrapper.html());
+});
+
 test("renders partial image field", (t) => {
 	const wrapper = mount(PrismicImage, {
 		propsData: {
 			field: {
-				...mock.value.image({ seed: 2 }),
+				...mock.value.image({ seed: 3 }),
 				url: null,
 				alt: null,
 				copyright: null,
@@ -71,13 +79,13 @@ test("reacts to changes properly", async (t) => {
 	});
 
 	const wrapper = mount(PrismicImageProxy, {
-		propsData: { field: mock.value.image({ seed: 5 }) },
+		propsData: { field: mock.value.image({ seed: 4 }) },
 	});
 
 	const firstRender = wrapper.html();
 
 	await wrapper.setProps({
-		field: mock.value.image({ seed: 6 }),
+		field: mock.value.image({ seed: 5 }),
 	});
 
 	const secondRender = wrapper.html();

test/snapshots/components-PrismicImage.test.js.md

@@ -10,14 +10,20 @@ Generated by [AVA](https://avajs.dev).
 
     '<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=2560&amp;h=1705&amp;fit=crop" alt="Repellat ratione ut sunt qui." copyright="Iure ut libero qui.">'
 
+## renders image field with an accessible default alt value
+
+> Snapshot 1
+
+    '<img src="https://images.unsplash.com/photo-1553531384-397c80973a0b?w=4335&amp;h=6502&amp;fit=crop" alt="" copyright="Dolorum sed ullam atque ut harum dolorum illum.">'
+
 ## renders partial image field
 
 > Snapshot 1
 
-    '<img>'
+    '<img alt="">'
 
 ## reacts to changes properly
 
 > Snapshot 1
 
-    '<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=7372&amp;h=4392&amp;fit=crop" alt="Est quam provident suscipit atque fuga dolorem." copyright="Facere id reprehenderit sint labore culpa.">'
+    '<img src="https://images.unsplash.com/photo-1504567961542-e24d9439a724?w=4608&amp;h=3456&amp;fit=crop" alt="Quia commodi sint reiciendis corrupti sunt laborum qui voluptas." copyright="Occaecati corrupti exercitationem doloribus amet.">'