Add feature to check if zoom is enabled

alvaromontoro · alvaromontoro · commit d682dce1aa75 · 2022-01-02T17:49:45.000-06:00
- Add warning message (new _head.scss file)
- Update code
- Update demo page
- Add cypress test
- Build the library
diff --git a/checka11y-warnings.css b/checka11y-warnings.css
@@ -86,6 +86,22 @@
   background-color: var(--checka11y-bg-warning);
 }
 
+head {
+  display: block;
+}
+
+head meta[name=viewport][content*="maximum-scale=1" i], head meta[name=viewport][content*="user-scalable=no" i] {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-warning);
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="458px" height="80px" viewBox="0 0 458 80"><rect class="box" x="4" y="4" width="450" height="72" rx="12" ry="12" fill="rgba(255, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">WARNING (W0016): The display zoom/scale</text> <text x="15" y="60">has been disabled.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 458px;
+  padding-bottom: 80px;
+  display: block;
+  border: 0;
+}
+
 h1[role=text]::after, h2[role=text]::after, h3[role=text]::after, h4[role=text]::after, h5[role=text]::after, h6[role=text]::after {
   display: block;
   font-size: 1rem;
diff --git a/checka11y-warnings.min.css b/checka11y-warnings.min.css
diff --git a/checka11y.css b/checka11y.css
@@ -86,6 +86,22 @@
   background-color: var(--checka11y-bg-warning);
 }
 
+head {
+  display: block;
+}
+
+head meta[name=viewport][content*="maximum-scale=1" i], head meta[name=viewport][content*="user-scalable=no" i] {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-warning);
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="458px" height="80px" viewBox="0 0 458 80"><rect class="box" x="4" y="4" width="450" height="72" rx="12" ry="12" fill="rgba(255, 255, 216, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 255, 102, 0.999999)" /><g fill="rgba(133, 100, 4, 0.999999)" font-size="1rem" font-weight="700" font-family="verdana, geneva, tahoma, sans-serif" font-style="initial" letter-spacing="initial" text-decoration="none" text-transform="initial" text-shadow="none"><text x="15" y="35">WARNING (W0016): The display zoom/scale</text> <text x="15" y="60">has been disabled.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 458px;
+  padding-bottom: 80px;
+  display: block;
+  border: 0;
+}
+
 h1[role=text]::after, h2[role=text]::after, h3[role=text]::after, h4[role=text]::after, h5[role=text]::after, h6[role=text]::after {
   display: block;
   font-size: 1rem;
diff --git a/checka11y.min.css b/checka11y.min.css
diff --git a/codes.md b/codes.md
@@ -148,3 +148,6 @@ A list of every Checka11y.css error & warning code with details on what the issu
 
 - ### W0015
   The `longdesc` attribute has been detected in an `<img>`. The `longdesc` attribute in images is deprecated and should not be used. It is not fully supported by HTML5, browsers, or screen readers. When present, it is commonly misused (it should point to an URL that is not an image).
+
+- ### W0016
+  The `viewport` meta tag contains a property that disables the zoom and/or the viewpot scale. Such a property may prevent users from interacting with the web page, and make it more difficult to view the content.
diff --git a/cypress/integration/head_spec.js b/cypress/integration/head_spec.js
@@ -11,4 +11,13 @@ describe("<head>", () => {
           .and('match', /data/)
       });
   });
+
+  it('should not disallow user zooming an', () => {
+    cy.get('head meta[name="viewport"][content*="maximum-scale=1"i], head meta[name="viewport"][content*="user-scalable=no"i]')
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'background-image') // yields data:image....
+          .and('match', /data/)
+      });
+  });
 });
diff --git a/src/warnings/features/_head.scss b/src/warnings/features/_head.scss
@@ -0,0 +1,15 @@
+@use "../../shared/messages/" as *;
+
+/* Make the head visible to show the title. This could have side effects but,
+in theory, all the elements in the head are non-visible. So we should be ok :P */
+head {
+  display: block;
+}
+
+/* E0017: title element must not be empty */
+head meta[name = "viewport"][content *= "maximum-scale=1" i],
+head meta[name = "viewport"][content *= "user-scalable=no" i] {
+  @include vectorMessage(warning, "W0016", 458, "The display zoom/scale", "has been disabled.");
+  display: block;
+  border: 0;
+}
diff --git a/src/warnings/features/_index.scss b/src/warnings/features/_index.scss
@@ -2,6 +2,7 @@
 @forward "./aria-hidden";
 @forward "./autoplay";
 @forward "./handlers";
+@forward "./head";
 @forward "./headings";
 @forward "./images";
 @forward "./inline";
diff --git a/test/index.html b/test/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
     <title></title>
     <link rel="stylesheet" href="./index.css" />
     <link rel="stylesheet" href="../checka11y.css" />
