add check for page title

alvaromontoro · alvaromontoro · commit fc943806dffc · 2021-12-16T00:33:48.000-06:00
- Add detection for missing or empty title (missing uses has which is experimental, note added as code comment)
- Update code and features
- Update demo page (leave title empty)
- Add tests for new feature
- Build and minify
diff --git a/checka11y-errors.css b/checka11y-errors.css
@@ -192,6 +192,34 @@ button:not([aria-label]):not([aria-labelledby]):empty::after {
   background-color: var(--checka11y-bg-error);
 }
 
+head {
+  display: block;
+}
+
+head title:empty {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-error);
+  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, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 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">ERROR (E0017): the page title tag must not</text> <text x="15" y="60">be empty.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 458px;
+  padding-bottom: 80px;
+  display: block;
+  border: 0;
+}
+
+head:not(:has(title)) {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-error);
+  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, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 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">ERROR (E0018): a title tag must be present</text> <text x="15" y="60">in the page head.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 458px;
+  padding-bottom: 80px;
+  display: block;
+  border: 0;
+}
+
 h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after {
   display: block;
   font-size: 1rem;
diff --git a/checka11y-errors.min.css b/checka11y-errors.min.css
diff --git a/checka11y-warnings.min.css b/checka11y-warnings.min.css
diff --git a/checka11y.css b/checka11y.css
@@ -477,6 +477,34 @@ button:not([aria-label]):not([aria-labelledby]):empty::after {
   background-color: var(--checka11y-bg-error);
 }
 
+head {
+  display: block;
+}
+
+head title:empty {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-error);
+  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, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 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">ERROR (E0017): the page title tag must not</text> <text x="15" y="60">be empty.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 458px;
+  padding-bottom: 80px;
+  display: block;
+  border: 0;
+}
+
+head:not(:has(title)) {
+  border: 0.4rem solid;
+  border-color: var(--checka11y-border-error);
+  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, 198, 198, 0.999999)" stroke-width="0.4rem" stroke="rgba(255, 0, 0, 0.999999)" /><g fill="rgba(114, 28, 36, 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">ERROR (E0018): a title tag must be present</text> <text x="15" y="60">in the page head.</text></g></svg>');
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  min-width: 458px;
+  padding-bottom: 80px;
+  display: block;
+  border: 0;
+}
+
 h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after {
   display: block;
   font-size: 1rem;
diff --git a/checka11y.min.css b/checka11y.min.css
diff --git a/codes.md b/codes.md
@@ -93,6 +93,12 @@ A list of every Checka11y.css error & warning code with details on what the issu
 - ### E0016
   The `longdesc` attribute has been detected in an `<img>` and it has an invalid value. The `longdesc` attribute must be a URL to a web page, but the detected `longdesc` is empty or it contains blank spaces so it's not a valid URL.
 
+- ### E0017
+  An empty `<title>` element has been found within the page's `<head>`. An empty title would be an accessibility issue because it makes it more difficult for some users to orient themselves and navigate through the pages.
+
+- ### E0018
+  The `<head>` element does not contian a `<title>`. An missing title would be an accessibility issue because it makes it more difficult for some users to orient themselves and navigate through the pages.
+
 ## Warnings <small>(Wxxx)</small>
 
 - ### W0000
diff --git a/cypress/integration/head_spec.js b/cypress/integration/head_spec.js
@@ -0,0 +1,14 @@
+describe("<head>", () => {
+  before(() => {
+    cy.visit("/test/index.html");
+  });
+
+  it('should not have an empty title', () => {
+    cy.get("head title:empty")
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'background-image') // yields data:image....
+          .and('match', /data/)
+      });
+  });
+});
diff --git a/features.md b/features.md
@@ -21,6 +21,8 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
 - [E0014](./codes.md#E0014): Checks for a tab index value of -1 on commonly tabbed to elements.
 - [E0015](./codes.md#E0015): Checks for an image with a `longdesc` pointing to an image.
 - [E0016](./codes.md#E0016): Checks for an image with an empty `longdesc`.
+- [E0017](./codes.md#E0017): Checks for an empty `<title>` in the `<head>`.
+- [E0018](./codes.md#E0018): Checks for an `<head>` without a `<title>` element inside.
 
 ## Warnings
 
diff --git a/src/errors/features/_head.scss b/src/errors/features/_head.scss
@@ -0,0 +1,23 @@
+@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 title:empty {
+  @include vectorMessage(error, "E0017", 458, "the page title tag must not", "be empty.");
+  display: block;
+  border: 0;
+}
+
+/* E0018: title element must be present in the header */
+/* Note that this is not supported in any browser yet */
+/* For more details about :has() - https://developer.mozilla.org/en-US/docs/Web/CSS/:has */
+head:not( :has( title ) ) {
+  @include vectorMessage(error, "E0018", 458, "a title tag must be present", "in the page head.");
+  display: block;
+  border: 0;
+}
diff --git a/src/errors/features/_index.scss b/src/errors/features/_index.scss
@@ -1,5 +1,6 @@
 @forward "./buttons";
 @forward "./dir";
+@forward "./head";
 @forward "./headings";
 @forward "./html";
 @forward "./iframe";
diff --git a/test/index.html b/test/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Checka11y.css test</title>
+    <title></title>
     <link rel="stylesheet" href="./index.css" />
     <link rel="stylesheet" href="../checka11y.css" />
   </head>
@@ -15,6 +15,10 @@ <h1>Checka11y.css playground</h1>
       <h2>HTML: html tag should have a lang attribute</h2>
       <p>See top of page.</p>
     </section>
+    <section>
+      <h2>Page title: the title tag should not be empty or missing</h2>
+      <p>See top of page.</p>
+    </section>
     <section>
       <h2>Images: All images require an alt attribute, whether it has a value or is null</h2>
       <img src="./assets/a11y.png" />
