feat(matches): deprecate is-visible-matches, use is-visible-on-screen-matches

lib/rules/avoid-inline-spacing.json

@@ -1,7 +1,7 @@
 {
   "id": "avoid-inline-spacing",
   "selector": "[style]",
-  "matches": "is-visible-matches",
+  "matches": "is-visible-on-screen-matches",
   "tags": ["cat.structure", "wcag21aa", "wcag1412", "ACT"],
   "actIds": ["24afc2", "9e45ec", "78fd32"],
   "metadata": {

lib/rules/is-visible-matches.js

@@ -1,5 +1,6 @@
 import { isVisibleOnScreen } from '../commons/dom';
 
+// @deprecated use isVisibleOnScreenMatches
 export default function hasVisibleTextMatches(node) {
   return isVisibleOnScreen(node);
 }

lib/rules/is-visible-on-screen-matches.js

@@ -0,0 +1,5 @@
+import { isVisibleOnScreen } from '../commons/dom';
+
+export default function isVisibleOnScreenMatches(node, virtualNode) {
+  return isVisibleOnScreen(virtualNode);
+}

test/rule-matches/is-visible-matches.js

@@ -1,32 +1,30 @@
 describe('is-visible-matches', function () {
   'use strict';
 
-  var rule;
+  var isVisibleMatches =
+    axe._thisWillBeDeletedDoNotUse.base.metadataFunctionMap[
+      'is-visible-matches'
+    ];
   var fixture = document.getElementById('fixture');
   var fixtureSetup = axe.testUtils.fixtureSetup;
 
-  beforeEach(function () {
-    fixture.innerHTML = '';
-    rule = axe.utils.getRule('avoid-inline-spacing');
-  });
-
   it('returns true for visible elements', function () {
     fixtureSetup('<p id="target">Hello world</p>');
-    assert.isTrue(rule.matches(fixture.firstChild));
+    assert.isTrue(isVisibleMatches(fixture.firstChild));
   });
 
   it('returns false for elements with hidden', function () {
     fixtureSetup('<p id="target" hidden>Hello world</p>');
-    assert.isFalse(rule.matches(fixture.firstChild));
+    assert.isFalse(isVisibleMatches(fixture.firstChild));
   });
 
   it('returns true for visible elements with aria-hidden="true"', function () {
     fixtureSetup('<p id="target" aria-hidden="true">Hello world</p>');
-    assert.isTrue(rule.matches(fixture.firstChild));
+    assert.isTrue(isVisibleMatches(fixture.firstChild));
   });
 
   it('returns false for opacity:0 elements with accessible text', function () {
     fixtureSetup('<p id="target" style="opacity:0">Hello world</p>');
-    assert.isFalse(rule.matches(fixture.firstChild));
+    assert.isFalse(isVisibleMatches(fixture.firstChild));
   });
 });

test/rule-matches/is-visible-on-screen-matches.js

@@ -0,0 +1,30 @@
+describe('is-visible-on-screen-matches', () => {
+  'use strict';
+
+  const rule = axe.utils.getRule('avoid-inline-spacing');
+  const queryFixture = axe.testUtils.queryFixture;
+
+  it('returns true for visible elements', () => {
+    const vNode = queryFixture('<p id="target">Hello world</p>');
+    assert.isTrue(rule.matches(null, vNode));
+  });
+
+  it('returns false for elements with hidden', () => {
+    const vNode = queryFixture('<p id="target" hidden>Hello world</p>');
+    assert.isFalse(rule.matches(null, vNode));
+  });
+
+  it('returns true for visible elements with aria-hidden="true"', () => {
+    const vNode = queryFixture(
+      '<p id="target" aria-hidden="true">Hello world</p>'
+    );
+    assert.isTrue(rule.matches(null, vNode));
+  });
+
+  it('returns false for opacity:0 elements with accessible text', () => {
+    const vNode = queryFixture(
+      '<p id="target" style="opacity:0">Hello world</p>'
+    );
+    assert.isFalse(rule.matches(null, vNode));
+  });
+});