feat: Use ARIA 1.2 for role queries (#1058)

Co-authored-by: eps1lon <silbermann.sebastian@gmail.com>

Author: IanVS

package.json

@@ -42,7 +42,7 @@
     "@babel/code-frame": "^7.10.4",
     "@babel/runtime": "^7.12.5",
     "@types/aria-query": "^4.2.0",
-    "aria-query": "^4.2.2",
+    "aria-query": "^5.0.0",
     "chalk": "^4.1.0",
     "dom-accessibility-api": "^0.5.6",
     "lz-string": "^1.4.4",

src/__tests__/__snapshots__/role-helpers.js.snap

@@ -200,5 +200,21 @@ Name "":
   data-testid="a-textarea"
 />
 
+--------------------------------------------------
+term:
+
+Name "":
+<dt
+  data-testid="a-dt"
+/>
+
+--------------------------------------------------
+definition:
+
+Name "":
+<dd
+  data-testid="a-dd"
+/>
+
 --------------------------------------------------
 `;

src/__tests__/role-helpers.js

@@ -16,6 +16,7 @@ afterEach(() => {
 
 function setup() {
   const {getByTestId} = render(`
+<header data-testid="a-header">Banner header</header>
 <section aria-label="a region" data-testid='named-section'>
   <a href="http://whatever.com" data-testid="a-link">link</a>
   <a>invalid link</a>
@@ -66,6 +67,10 @@ function setup() {
     <form data-testid="a-form" />
     <section data-testid="a-section" />
    </article>
+   <dl>
+    <dt data-testid="a-dt">Term</dt>
+    <dd data-testid="a-dd">Definition</dd>
+   </dl>
 </section>
   `)
 
@@ -99,6 +104,9 @@ function setup() {
     input: getByTestId('a-input-1'),
     input2: getByTestId('a-input-2'),
     textarea: getByTestId('a-textarea'),
+    dt: getByTestId('a-dt'),
+    dd: getByTestId('a-dd'),
+    header: getByTestId('a-header'),
   }
 }
 
@@ -131,6 +139,9 @@ test('getRoles returns expected roles for various dom nodes', () => {
     textarea,
     namedSection,
     namedForm,
+    dd,
+    dt,
+    header,
   } = setup()
 
   expect(getRoles(namedSection)).toEqual({
@@ -150,6 +161,11 @@ test('getRoles returns expected roles for various dom nodes', () => {
     menuitem: [menuItem, menuItem2],
     form: [namedForm],
     region: [namedSection],
+    term: [dt],
+    definition: [dd],
+  })
+  expect(getRoles(header)).toEqual({
+    banner: [header],
   })
 })