feat(aria): support role=image as an alias for role=img

Add the ARIA 1.3 image role (w3c/aria#1370) as an alias of img: it is a
valid role sharing img's definition (spread from a common object) and is
allowed wherever img is allowed in the html-elms spec (embed, iframe,
svg). The role-img-alt selector matches both roles via :is().

This avoids a synonym-resolution mechanism, so the role the author used
is preserved when reporting an unallowed role.

Closes #4656

Author: chutchins25

lib/rules/role-img-alt.json

@@ -1,7 +1,7 @@
 {
   "id": "role-img-alt",
   "impact": "serious",
-  "selector": "[role='img']:not(img, area, input, object)",
+  "selector": ":is([role='img'], [role='image']):not(img, area, input, object)",
   "matches": "html-namespace-matches",
   "tags": [
     "cat.text-alternatives",

lib/standards/aria-roles.js

@@ -16,6 +16,17 @@
 
   globalRoleAttrs.forEach(li => li.style.display = 'none');
 */
+// Shared definition for the img role and its ARIA 1.3 alias image, so the
+// two entries stay in sync.
+const imgRole = {
+  type: 'structure',
+  // Spec difference: Aria-expanded removed in 1.2
+  allowedAttrs: ['aria-expanded'],
+  superclassRole: ['section'],
+  accessibleNameRequired: true,
+  childrenPresentational: true
+};
+
 const ariaRoles = {
   alert: {
     type: 'structure',
@@ -267,13 +278,13 @@ const ariaRoles = {
     accessibleNameRequired: false,
     nameFromContent: true
   },
+  // image is an ARIA 1.3 alias of img (w3c/aria#1370) with an identical
+  // mapping. Spread the shared definition so the two entries stay in sync.
+  image: {
+    ...imgRole
+  },
   img: {
-    type: 'structure',
-    // Spec difference: Aria-expanded removed in 1.2
-    allowedAttrs: ['aria-expanded'],
-    superclassRole: ['section'],
-    accessibleNameRequired: true,
-    childrenPresentational: true
+    ...imgRole
   },
   input: {
     type: 'abstract',

lib/standards/html-elms.js

@@ -235,7 +235,14 @@ const htmlElms = {
   },
   embed: {
     contentTypes: ['interactive', 'embedded', 'phrasing', 'flow'],
-    allowedRoles: ['application', 'document', 'img', 'presentation', 'none'],
+    allowedRoles: [
+      'application',
+      'document',
+      'img',
+      'image',
+      'presentation',
+      'none'
+    ],
     chromiumRole: 'EmbeddedObject'
   },
   fieldset: {
@@ -340,7 +347,14 @@ const htmlElms = {
   },
   iframe: {
     contentTypes: ['interactive', 'embedded', 'phrasing', 'flow'],
-    allowedRoles: ['application', 'document', 'img', 'none', 'presentation'],
+    allowedRoles: [
+      'application',
+      'document',
+      'img',
+      'image',
+      'none',
+      'presentation'
+    ],
     chromiumRole: 'Iframe'
   },
   img: {
@@ -666,7 +680,7 @@ const htmlElms = {
         contentTypes: ['embedded', 'phrasing', 'flow']
       }
     },
-    allowedRoles: ['application', 'document', 'img'],
+    allowedRoles: ['application', 'document', 'img', 'image'],
     chromiumRole: 'PluginObject'
   },
   ol: {

test/commons/aria/get-element-unallowed-roles.js

@@ -214,4 +214,26 @@ describe('aria.getElementUnallowedRoles', () => {
     assert.isNotEmpty(actual);
     assert.include(actual, 'application');
   });
+
+  it('returns empty for role=image on an svg elm', () => {
+    const node = document.createElement('svg');
+    node.setAttribute('role', 'image');
+    flatTreeSetup(node);
+    assert.isEmpty(getElementUnallowedRoles(node));
+  });
+
+  it('returns empty for role=image on an embed elm', () => {
+    const node = document.createElement('embed');
+    node.setAttribute('role', 'image');
+    flatTreeSetup(node);
+    assert.isEmpty(getElementUnallowedRoles(node));
+  });
+
+  it('reports role=image (as authored) when it is not allowed on the element', () => {
+    const node = document.createElement('hr');
+    node.setAttribute('role', 'image');
+    flatTreeSetup(node);
+    const actual = getElementUnallowedRoles(node);
+    assert.include(actual, 'image');
+  });
 });

test/commons/aria/is-valid-role.js

@@ -27,4 +27,8 @@ describe('aria.isValidRole', () => {
       axe.commons.aria.isValidRole('input', { allowAbstract: true })
     );
   });
+
+  it('returns true for the synonym role `image`', () => {
+    assert.isTrue(axe.commons.aria.isValidRole('image'));
+  });
 });

test/integration/rules/aria-allowed-role/aria-allowed-role.html

@@ -38,6 +38,7 @@ <h1 id="pass-h1-role-doc-subtitle" role="doc-subtitle"></h1>
 <header id="pass-header-valid-role" role="group"></header>
 <footer id="pass-footer-valid-role" role="group"></footer>
 <embed id="pass-embed-valid-role" role="img" />
+<embed id="pass-embed-synonym-role-image" role="image" />
 <input type="text" role="textbox" id="pass-input-text-redundant-role" />
 <input type="text" role="textbox combobox" id="pass-input-multiple-roles" />
 <input

test/integration/rules/aria-allowed-role/aria-allowed-role.json

@@ -31,6 +31,7 @@
     ["#pass-header-valid-role"],
     ["#pass-footer-valid-role"],
     ["#pass-embed-valid-role"],
+    ["#pass-embed-synonym-role-image"],
     ["#pass-div-has-any-role"],
     ["#pass-input-text-redundant-role"],
     ["#pass-input-multiple-roles"],

test/integration/rules/aria-roles/aria-roles.html

@@ -20,6 +20,7 @@
   <div role="group" id="pass20">ok</div>
   <div role="heading" id="pass21">ok</div>
   <div role="img" id="pass22">ok</div>
+  <div role="image" id="pass121">ok</div>
   <div role="link" id="pass23">ok</div>
   <div role="list" id="pass24">ok</div>
   <div role="listbox" id="pass25">ok</div>

test/integration/rules/aria-roles/aria-roles.json

@@ -132,6 +132,7 @@
     ["#pass117"],
     ["#pass118"],
     ["#pass119"],
-    ["#pass120"]
+    ["#pass120"],
+    ["#pass121"]
   ]
 }

test/integration/rules/role-img-alt/role-img-alt.html

@@ -5,12 +5,14 @@
 <div role="img" aria-labelledby="match" id="pass2"></div>
 <div role="img" aria-labelledby="hidden-match" id="pass3"></div>
 <div role="img" title="title" id="pass4"></div>
+<div role="image" aria-label="blah" id="pass5"></div>
 
 <div role="img" id="violation1"></div>
 <div role="img" aria-label="" id="violation2"></div>
 <div role="img" alt="blah" id="violation3"></div>
 <div role="img" aria-labelledby="no-match" id="violation4"></div>
 <div role="img" title="" id="violation5"></div>
+<div role="image" id="violation6"></div>
 
 <svg
   id="inapplicable1"