fix(meta-viewport): test that a user-scalable number does not prevent…

… zoom check if the user-scalable attribute of the viewport meta is between -1 & 1 to be able to zoom
dequelabs · Jun 3, 2021 · 048c5c1 · 048c5c1
1 parent c6829fd
commit 048c5c1
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 0 deletions.
diff --git a/lib/checks/mobile/meta-viewport-scale-evaluate.js b/lib/checks/mobile/meta-viewport-scale-evaluate.js
@@ -45,6 +45,18 @@ function metaViewportScaleEvaluate(node, options, virtualNode) {
     return false;
   }
 
+  const userScalableAsFloat = parseFloat(result['user-scalable']);
+  if (
+    !lowerBound &&
+    result['user-scalable'] &&
+    (userScalableAsFloat || userScalableAsFloat === 0) &&
+    userScalableAsFloat > -1 &&
+    userScalableAsFloat < 1
+  ) {
+    this.data('user-scalable');
+    return false;
+  }
+
   if (
     result['maximum-scale'] &&
     parseFloat(result['maximum-scale']) < scaleMinimum

diff --git a/test/checks/mobile/meta-viewport-scale.js b/test/checks/mobile/meta-viewport-scale.js
@@ -34,6 +34,30 @@ describe('meta-viewport', function() {
       );
     });
 
+    it('should return false on user-scalable in the range <-1, 1>', function() {
+      var vNode = queryFixture(
+        '<meta id="target" name="viewport" content="foo=bar, cats=dogs, user-scalable=0, more-stuff=ok">'
+      );
+
+      assert.isFalse(
+        axe.testUtils
+          .getCheckEvaluate('meta-viewport')
+          .call(checkContext, null, null, vNode)
+      );
+    });
+
+    it('should return false on user-scalable in the range <-1, 1>', function() {
+      var vNode = queryFixture(
+        '<meta id="target" name="viewport" content="foo=bar, cats=dogs, user-scalable=-0.5, more-stuff=ok">'
+      );
+
+      assert.isFalse(
+        axe.testUtils
+          .getCheckEvaluate('meta-viewport')
+          .call(checkContext, null, null, vNode)
+      );
+    });
+
     it('should return true on user-scalable=yes', function() {
       var vNode = queryFixture(
         '<meta id="target" name="viewport" content="foo=bar, cats=dogs, user-scalable=yes, more-stuff=ok">'
@@ -171,6 +195,30 @@ describe('meta-viewport', function() {
       assert.deepEqual(checkContext._data, 'user-scalable=no');
     });
 
+    it('should return false on user-scalable in the range <-1, 1>', function() {
+      var vNode = queryFixture(
+        '<meta id="target" name="viewport" content="foo=bar, cats=dogs, user-scalable=0, more-stuff=ok">'
+      );
+
+      assert.isFalse(
+        axe.testUtils
+          .getCheckEvaluate('meta-viewport')
+          .call(checkContext, null, null, vNode)
+      );
+    });
+
+    it('should return false on user-scalable in the range <-1, 1>', function() {
+      var vNode = queryFixture(
+        '<meta id="target" name="viewport" content="foo=bar, cats=dogs, user-scalable=-0.5, more-stuff=ok">'
+      );
+
+      assert.isFalse(
+        axe.testUtils
+          .getCheckEvaluate('meta-viewport')
+          .call(checkContext, null, null, vNode)
+      );
+    });
+
     it('should return true on user-scalable=yes', function() {
       var vNode = queryFixture(
         '<meta id="target" name="viewport" content="foo=bar, cats=dogs, user-scalable=yes, more-stuff=ok">'

diff --git a/test/integration/virtual-rules/meta-viewport.js b/test/integration/virtual-rules/meta-viewport.js
@@ -69,6 +69,20 @@ describe('meta-viewport virtual-rule', function() {
     assert.lengthOf(results.incomplete, 0);
   });
 
+  it('should fail for user-scalable=0', function() {
+    var results = axe.runVirtualRule('meta-viewport', {
+      nodeName: 'meta',
+      attributes: {
+        name: 'viewport',
+        content: 'user-scalable=0'
+      }
+    });
+
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
   it('should fail for maximum-scale=yes', function() {
     var results = axe.runVirtualRule('meta-viewport', {
       nodeName: 'meta',