Merge pull request #1807 from hypothesis/fix-spurious-color-contrast-failures

Assume white background by default in a11y tests

src/sidebar/components/test/annotation-document-info-test.js

@@ -77,8 +77,7 @@ describe('AnnotationDocumentInfo', () => {
     assert.equal(domain.text(), '(www.example.com)');
   });
 
-  // FIXME-A11Y
-  it.skip(
+  it(
     'should pass a11y checks',
     checkAccessibility({
       content: () => {

src/sidebar/components/test/annotation-share-info-test.js

@@ -144,8 +144,7 @@ describe('AnnotationShareInfo', () => {
     });
   });
 
-  // FIXME-A11Y
-  it.skip(
+  it(
     'should pass a11y checks',
     checkAccessibility({
       content: () => createAnnotationShareInfo(),

src/sidebar/components/test/share-annotations-panel-test.js

@@ -185,8 +185,7 @@ describe('ShareAnnotationsPanel', () => {
     });
   });
 
-  // FIXME-A11Y
-  it.skip(
+  it(
     'should pass a11y checks',
     checkAccessibility({
       content: () => createShareAnnotationsPanel(),

src/test-util/accessibility.js

@@ -9,10 +9,17 @@ import { isValidElement } from 'preact';
  * @prop {() => import('preact').VNode|ReactWrapper} content -
  *   A function that returns the rendered output to test or an Enzyme wrapper
  *   created using Enzyme's `mount` function.
+ * @prop {string} [backgroundColor] -
+ *   Background color onto which to render the element. This can affect the
+ *   result of color contrast tests. Defaults to white.
  */
 
-async function testScenario(elementOrWrapper) {
+async function testScenario(
+  elementOrWrapper,
+  { backgroundColor = 'white' } = {}
+) {
   const container = document.createElement('div');
+  container.style.backgroundColor = backgroundColor;
   document.body.appendChild(container);
 
   let wrapper;
@@ -58,7 +65,7 @@ export function checkAccessibility(scenarios) {
   }
 
   return async () => {
-    for (let { name = 'default', content } of scenarios) {
+    for (let { name = 'default', content, ...config } of scenarios) {
       if (typeof content !== 'function') {
         throw new Error(
           `"content" key for accessibility scenario "${name}" should be a function but is a ${typeof content}`
@@ -76,7 +83,7 @@ export function checkAccessibility(scenarios) {
         );
       }
 
-      const violations = await testScenario(elementOrWrapper);
+      const violations = await testScenario(elementOrWrapper, config);
       assert.deepEqual(
         violations,
         [],