feat: show accessibility warning message for inaccessible elements (#270)

* chore: update @testing-library/dom @testing-library/user-event

* test: update snapshot after dep update

Co-authored-by: Stephan Meijer <[email protected]>

Author: marcosvega91

package-lock.json

@@ -42,8 +42,8 @@
     "@primer/octicons-react": "^10.0.0",
     "@reach/dialog": "^0.10.5",
     "@reach/menu-button": "^0.9.1",
-    "@testing-library/dom": "^7.18.1",
-    "@testing-library/user-event": "^12.0.11",
+    "@testing-library/dom": "^7.22.5",
+    "@testing-library/user-event": "^12.1.2",
     "codemirror": "5.54.0",
     "crx-bridge": "^2.1.0",
     "deep-diff": "^1.0.2",

package.json

@@ -1,6 +1,7 @@
 import React from 'react';
 import { messages } from '../constants';
 import CopyButton from './CopyButton';
+import { ShieldIcon } from '@primer/octicons-react';
 
 const colors = ['bg-blue-600', 'bg-yellow-600', 'bg-orange-600', 'bg-red-600'];
 
@@ -125,6 +126,12 @@ function ResultSuggestion({ queries, result, dispatch }) {
         )}
       </div>
       <div className="min-h-8">{message}</div>
+      {suggestion.warning && (
+        <div className="min-h-8 text-yellow-700">
+          <ShieldIcon />
+          {suggestion.warning}
+        </div>
+      )}
     </div>
   );
 }

src/components/ResultSuggestion.js

@@ -21,6 +21,7 @@ it('[getAllPossibleQueries] should return an object with all possibile queries',
         "queryName": "Role",
         "snippet": "screen.getByRole('button')",
         "variant": "get",
+        "warning": "",
       },
       "Selector": Object {
         "excerpt": "querySelector('div > button')",
@@ -65,16 +66,18 @@ it('[getAllPossibleQueries] should return an object with all possibile queries',
         "queryName": "AltText",
         "snippet": "screen.getByAltText(/enter your username/i)",
         "variant": "get",
+        "warning": "",
       },
       "DisplayValue": Object {
-        "excerpt": "getByDisplayValue(/john-doe/i)",
+        "excerpt": "getByDisplayValue(/john\\\\-doe/i)",
         "queryArgs": Array [
-          /john-doe/i,
+          /john\\\\-doe/i,
         ],
         "queryMethod": "getByDisplayValue",
         "queryName": "DisplayValue",
-        "snippet": "screen.getByDisplayValue(/john-doe/i)",
+        "snippet": "screen.getByDisplayValue(/john\\\\-doe/i)",
         "variant": "get",
+        "warning": "",
       },
       "LabelText": Object {
         "excerpt": "getByLabelText(/username/i)",
@@ -85,16 +88,18 @@ it('[getAllPossibleQueries] should return an object with all possibile queries',
         "queryName": "LabelText",
         "snippet": "screen.getByLabelText(/username/i)",
         "variant": "get",
+        "warning": "",
       },
       "PlaceholderText": Object {
-        "excerpt": "getByPlaceholderText(/how should i call you?/i)",
+        "excerpt": "getByPlaceholderText(/how should i call you\\\\?/i)",
         "queryArgs": Array [
-          /how should i call you\\?/i,
+          /how should i call you\\\\\\?/i,
         ],
         "queryMethod": "getByPlaceholderText",
         "queryName": "PlaceholderText",
-        "snippet": "screen.getByPlaceholderText(/how should i call you?/i)",
+        "snippet": "screen.getByPlaceholderText(/how should i call you\\\\?/i)",
         "variant": "get",
+        "warning": "",
       },
       "Role": Object {
         "excerpt": "getByRole('textbox', { name: /username/i })",
@@ -110,6 +115,7 @@ it('[getAllPossibleQueries] should return an object with all possibile queries',
       name: /username/i
     })",
         "variant": "get",
+        "warning": "",
       },
       "Selector": Object {
         "excerpt": "querySelector('#username')",
@@ -130,6 +136,7 @@ it('[getAllPossibleQueries] should return an object with all possibile queries',
         "queryName": "TestId",
         "snippet": "screen.getByTestId('uname')",
         "variant": "get",
+        "warning": "",
       },
       "Text": undefined,
       "Title": Object {
@@ -141,6 +148,7 @@ it('[getAllPossibleQueries] should return an object with all possibile queries',
         "queryName": "Title",
         "snippet": "screen.getByTitle(/enter your username/i)",
         "variant": "get",
+        "warning": "",
       },
     }
   `);