Merge pull request #158 from alvaromontoro/feature/no-user-zoom-warning

jackdomleo7 · web-flow · commit d9b94052f42a · 2022-01-14T16:38:23.000Z
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 viewport 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/features.md b/features.md
@@ -41,4 +41,5 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
 - [W0012](./codes.md#W0012): Checks for heading element inside `<section>` element.
 - [W0013](./codes.md#W0013): Checks for anchor tags that contain a link to a PDF, Word, Excel, or PowerPoint document.
 - [W0014](./codes.md#W0014): Checks for anchor tags that contain a link to content site.
-- [W0015](./codes.md#W0014): Checks for images with the `longdesc` attribute.
+- [W0015](./codes.md#W0015): Checks for images with the `longdesc` attribute.
+- [W0016](./codes.md#W0016): Checks for zoom/scale being disabled in the meta `viewport`.
diff --git a/src/warnings/features/_head.scss b/src/warnings/features/_head.scss
@@ -0,0 +1,18 @@
+@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;
+}
+
+/* W0016: title element must not be empty */
+head meta[name="viewport"] {
+  &[content*="maximum-scale=1" i],
+  &[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" />
