Feature/req mailto (#95)

nikolai-shabalin · web-flow · commit b12542f2799b · 2024-02-23T13:25:25.000+03:00
* Adds new rule `htmlacademy/req-mailto`

* Adds description rule

* Adds fixture

* Update rule list
diff --git a/docs/list-of-rules.md b/docs/list-of-rules.md
@@ -21,6 +21,7 @@
 | [htmlacademy/no-px-size](../rules/no-px-size/README.md)                             | Атрибуты `width` и `height` содержат только цифры, без единиц измерения                            |
 | [htmlacademy/req-charset-utf](../rules/req-charset-utf/README.md)                   | Требует `UTF-8` для `<meta charset="">`                                                            |
 | [htmlacademy/req-head-styles](../rules/req-head-styles/README.md)                   | Запрещает подключение стилей вне `<head>`                                                          |
+| [htmlacademy/req-mailto](../rules/req-mailto/README.md)                   | Требует `mailto:` для ссылок c email-текстом                                                       |
 | [htmlacademy/req-meta-viewport](../rules/req-meta-viewport/README.md)               | Проверяет наличие `<meta name="viewport" content="width=device-width,initial-scale=1">` в `<head>` |
 | [htmlacademy/req-single-styles](../rules/req-single-styles/README.md)               | Разрешает не более одного `link rel="stylesheet"` в `<head>`                                       |
 | [htmlacademy/req-stylesheet-link](../rules/req-stylesheet-link/README.md)               | Проверяет наличие `<link rel="stylesheet" href="">` с непустым `href`                              |
diff --git a/rules/req-mailto/README.md b/rules/req-mailto/README.md
@@ -0,0 +1,35 @@
+# htmlacademy/req-mailto
+
+Правило осуществляет проверку того, содержит ли атрибут `href` тега `<a>` строку `mailto:`, при условии, что содержимое ссылки представляет собой текст в формате электронной почты.
+
+## true
+
+Проблемными считаются следующие шаблоны:
+
+```html
+<a href="example@example.com">example@example.com</a> <!-- отсутствует mailto: -->
+
+<a href="#!">contact@example.com</a> <!-- отсутствует mailto: -->
+
+<a href="http://example.com">user@example.com</a> <!-- отсутствует mailto: -->
+
+<a href="/contact">support@example.com</a> <!-- отсутствует mailto: -->
+
+<a>admin@example.com</a> <!-- отсутствует href с  mailto: -->
+
+<a href="javascript:void(0);">info@example.com</a> <!-- отсутствует mailto: -->
+```
+
+Следующие шаблоны **не** считаются проблемами:
+
+```html
+<a href="mailto:">example@example.com</a> <!-- не проверяет наличие email после mailto: -->
+
+<a href="mailto:example@com">example@com</a> <!-- в теле ссылки не email -->
+
+<a href="mailto:example@example.com">Click here</a> <!-- в теле ссылки не email -->
+
+<a href="mailto:example@example.com">example@example.com</a> <!-- контентом ссылки является email, а href имеет mailto -->
+
+<a href="mailto:example@example.com" onclick="someFunction();">example@example.com</a>
+```
diff --git a/rules/req-mailto/fixture/error.html b/rules/req-mailto/fixture/error.html
@@ -0,0 +1,11 @@
+<a href="example@example.com">example@example.com</a>
+
+<a href="#!">contact@example.com</a>
+
+<a href="http://example.com">user@example.com</a>
+
+<a href="/contact">support@example.com</a>
+
+<a>admin@example.com</a>
+
+<a href="javascript:void(0);">info@example.com</a>
diff --git a/rules/req-mailto/fixture/success.html b/rules/req-mailto/fixture/success.html
@@ -0,0 +1,9 @@
+<a href="mailto:">example@example.com</a>
+
+<a href="mailto:example@com">example@com</a>
+
+<a href="mailto:example@example.com">Click here</a>
+
+<a href="mailto:example@example.com">example@example.com</a>
+
+<a href="mailto:example@example.com" onclick="someFunction();">example@example.com</a>
diff --git a/rules/req-mailto/index.js b/rules/req-mailto/index.js
@@ -0,0 +1,30 @@
+'use strict';
+const { has_non_empty_attribute, is_tag_node, attribute_value } = require('@linthtml/dom-utils');
+
+const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;
+const isNotEmptyLink = (node) => node.childNodes.length > 0;
+const isEmailContent = (node) => emailRegex.test(node.childNodes[0].data);
+const reportError = (node) => ({
+  position: node.loc,
+  message: 'The href attribute of the <a> tag must start with "mailto:" if it contains an email'
+});
+
+module.exports = {
+  name: 'htmlacademy/req-mailto',
+  // eslint-disable-next-line camelcase
+  lint(node, rule_config, { report }) {
+    if (is_tag_node(node) && node.name === 'a') {
+      if (isNotEmptyLink(node) && isEmailContent(node)) {
+        if (has_non_empty_attribute(node, 'href')) {
+          const hrefValue = attribute_value(node, 'href').chars;
+
+          if (!hrefValue.startsWith('mailto:')) {
+            report(reportError(node));
+          }
+        } else {
+          report(reportError(node));
+        }
+      }
+    }
+  }
+};
