feat: toHaveAccessibleDescription supports aria-description (#565)

README.md

@@ -594,6 +594,12 @@ make a partial match passing a regular expression, or by using
   aria-describedby="t1"
 />
 <span id="t1" role="presentation">The logo of Our Company</span>
+<img
+  src="logo.jpg"
+  data-testid="logo2"
+  alt="Company logo"
+  aria-description="The logo of Our Company"
+/>
 ```
 
 ```js
@@ -606,6 +612,9 @@ expect(getByTestId('logo')).not.toHaveAccessibleDescription('Company logo')
 expect(getByTestId('logo')).toHaveAccessibleDescription(
   'The logo of Our Company',
 )
+expect(getByTestId('logo2')).toHaveAccessibleDescription(
+  'The logo of Our Company',
+)
 ```
 
 <hr />

package.json

@@ -85,7 +85,7 @@
     "aria-query": "^5.0.0",
     "chalk": "^3.0.0",
     "css.escape": "^1.5.1",
-    "dom-accessibility-api": "^0.5.6",
+    "dom-accessibility-api": "^0.6.3",
     "lodash": "^4.17.15",
     "redent": "^3.0.0"
   },

src/__tests__/to-have-accessible-description.js

@@ -57,6 +57,26 @@ describe('.toHaveAccessibleDescription', () => {
     }).toThrow(/expected element not to have accessible description/i)
   })
 
+  it('works with aria-description attribute', () => {
+    const {queryByTestId} = render(`
+      <img src="logo.jpg" data-testid="logo" alt="Company logo" aria-description="The logo of Our Company">
+   `)
+
+    const logo = queryByTestId('logo')
+    expect(logo).not.toHaveAccessibleDescription('Company logo')
+    expect(logo).toHaveAccessibleDescription('The logo of Our Company')
+    expect(logo).toHaveAccessibleDescription(/logo of our company/i)
+    expect(logo).toHaveAccessibleDescription(
+      expect.stringContaining('logo of Our Company'),
+    )
+    expect(() => {
+      expect(logo).toHaveAccessibleDescription("Our company's logo")
+    }).toThrow(/expected element to have accessible description/i)
+    expect(() => {
+      expect(logo).not.toHaveAccessibleDescription('The logo of Our Company')
+    }).toThrow(/expected element not to have accessible description/i)
+  })
+
   it('handles multiple ids', () => {
     const {queryByTestId} = render(`
       <div>