feat(standards): add graphics roles (#2761)

* feat(standards): add graphics roles * fix: remove incorrect Typescript types for graphics roles
dequelabs · Jan 19, 2021 · 22032cc · 22032cc
1 parent 1c1654a
commit 22032cc
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 5 deletions.
diff --git a/doc/standards-object.md b/doc/standards-object.md
@@ -20,6 +20,7 @@ The following properties are currently available in axe-core `standards`:
 1.  [ARIA Attrs](#aria-attrs)
 1.  [ARIA Roles](#aria-roles)
 1.  [DPUB Roles](#dpub-roles)
+1.  [Graphics Roles][#graphics-roles]
 1.  [HTML Elms](#html-elms)
 1.  [CSS Colors](#css-colors)
 
@@ -82,6 +83,10 @@ The [`ariaRoles`](../lib/standards/aria-roles.js) object defines valid ARIA role
 
 Dpub roles are defined in the [dpub-roles](../lib/standards/dpub-roles.js) file. Their structure is the exact same as the aria roles standard (albeit they have different `type`s) and is combined into the `ariaRoles` table. They are only separated for organizational purposes.
 
+### Graphics Roles
+
+Graphics roles are defined in the [graphics-roles](../lib/standards/graphics-roles.js) file. They are extensions of the standard ARIA roles and therefore have the exact same structure. The graphics roles are combined into the `ariaRoles` table and they are only separated for organizational purposes.
+
 ## HTML Elms
 
 The [`htmlElms`](../lib/standards/html-elms.js) object defines valid HTML elements, their content type, and if they are allowed ARIA roles or attributes.

diff --git a/lib/standards/graphics-roles.js b/lib/standards/graphics-roles.js
@@ -0,0 +1,22 @@
+// Source: https://www.w3.org/TR/graphics-aria-1.0/
+
+const graphicsRoles = {
+  'graphics-document': {
+    type: 'structure',
+    superclassRole: ['document'],
+    accessibleNameRequired: true
+  },
+  'graphics-object': {
+    type: 'structure',
+    superclassRole: ['group'],
+    nameFromContent: true
+  },
+  'graphics-symbol': {
+    type: 'structure',
+    superclassRole: ['img'],
+    accessibleNameRequired: true,
+    childrenPresentational: true
+  }
+};
+
+export default graphicsRoles;
diff --git a/lib/standards/index.js b/lib/standards/index.js
@@ -1,6 +1,7 @@
 import ariaAttrs from './aria-attrs';
 import ariaRoles from './aria-roles';
 import dpubRoles from './dpub-roles';
+import graphicsRoles from './graphics-roles';
 import htmlElms from './html-elms';
 import { deepMerge } from '../core/utils';
 import cssColors from './css-colors';
@@ -9,7 +10,8 @@ const originals = {
   ariaAttrs,
   ariaRoles: {
     ...ariaRoles,
-    ...dpubRoles
+    ...dpubRoles,
+    ...graphicsRoles
   },
   htmlElms,
   cssColors

diff --git a/test/commons/standards/get-aria-roles-by-type.js b/test/commons/standards/get-aria-roles-by-type.js
@@ -50,7 +50,10 @@ describe('standards.getAriaRolesByType', function() {
       'text',
       'time',
       'toolbar',
-      'tooltip'
+      'tooltip',
+      'graphics-document',
+      'graphics-object',
+      'graphics-symbol'
     ]);
   });
 

diff --git a/test/commons/standards/get-aria-roles-supporting-name-from-content.js b/test/commons/standards/get-aria-roles-supporting-name-from-content.js
@@ -49,7 +49,8 @@ describe('standards.getAriaRolesSupportingNameFromContent', function() {
       'doc-backlink',
       'doc-biblioref',
       'doc-glossref',
-      'doc-noteref'
+      'doc-noteref',
+      'graphics-object'
     ]);
   });
 

diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.html b/test/integration/rules/aria-allowed-role/aria-allowed-role.html
@@ -172,6 +172,13 @@ <h1 id="pass-h1-valid-role" role="none"></h1>
 <span role="text" id="span-text" />
 <div role="text" id="div-text" />
 <p role="text" id="p-text" />
+<div
+  id="pass-graphics-document"
+  role="graphics-document"
+  aria-label="doc"
+></div>
+<div id="pass-graphics-object" role="graphics-object"></div>
+<div id="pass-graphics-symbol" role="graphics-symbol"></div>
 
 <dd id="fail-dd-no-role" role="link"></dd>
 <dt id="fail-dt-no-role" role="banner"></dt>

diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.json b/test/integration/rules/aria-allowed-role/aria-allowed-role.json
@@ -69,7 +69,10 @@
     ["#hr-none"],
     ["#span-text"],
     ["#div-text"],
-    ["#p-text"]
+    ["#p-text"],
+    ["#pass-graphics-document"],
+    ["#pass-graphics-object"],
+    ["#pass-graphics-symbol"]
   ],
   "violations": [
     ["#fail-dd-no-role"],

diff --git a/test/integration/rules/aria-roles/aria-roles.html b/test/integration/rules/aria-roles/aria-roles.html
@@ -108,6 +108,9 @@
   <div role="doc-toc" id="pass108">ok</div>
   <div role="figure" id="pass109">ok</div>
   <div role="text" id="pass110">ok</div>
+  <div role="graphics-document" id="pass111">ok</div>
+  <div role="graphics-object" id="pass112">ok</div>
+  <div role="graphics-symbol" id="pass113">ok</div>
 </div>
 <div id="violation">
   <!-- abstract roles -->

diff --git a/test/integration/rules/aria-roles/aria-roles.json b/test/integration/rules/aria-roles/aria-roles.json
@@ -126,6 +126,9 @@
     ["#pass107"],
     ["#pass108"],
     ["#pass109"],
-    ["#pass110"]
+    ["#pass110"],
+    ["#pass111"],
+    ["#pass112"],
+    ["#pass113"]
   ]
 }