fix: img with missing alt should have role img (#430)

Co-authored-by: Cameron Cundiff <cundiff@adobe.com>
Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

.changeset/light-ladybugs-destroy.md

@@ -0,0 +1,8 @@
+---
+"dom-accessibility-api": patch
+---
+
+Maintain `img` role for `img` with missing `alt` attribute.
+
+Previously `<img />` would be treated the same as `<img alt />`.
+`<img />` is now treated as `role="img"` [as specified](https://w3c.github.io/html-aam/#el-img-empty-alt).

sources/__tests__/getRole.js

@@ -89,6 +89,7 @@ const cases = [
 	["html", null, createElementFactory("html", {})],
 	["iframe", null, createElementFactory("iframe", {})],
 	["img with alt=\"some text\"", "img", createElementFactory("img", {alt: "text"})],
+	["img with missing alt", "img", createElementFactory("img", {})],
 	["img with alt=\"\"", null, createElementFactory("img", {alt: ""})],
 	["input type=button", "button", createElementFactory("input", {type: "button"})],
 	["input type=checkbox", "checkbox", createElementFactory("input", {type: "checkbox"})],

sources/getRole.ts

@@ -75,11 +75,13 @@ function getImplicitRole(element: Element): string | null {
 				return "link";
 			}
 			break;
-		case "img":
-			if ((element.getAttribute("alt") || "").length > 0) {
+		case "img": {
+			const alt: string | null = element.getAttribute("alt");
+			if (alt === null || alt.length > 0) {
 				return "img";
 			}
 			break;
+		}
 		case "input": {
 			const { type } = element as HTMLInputElement;
 			switch (type) {