Merge pull request #85 from htmlacademy/fix/htmlacademy/attr-req-value

nikolai-shabalin · web-flow · commit 1e4a16e76332 · 2024-01-13T13:53:33.000+03:00
Fix/htmlacademy/attr req value
diff --git a/rules/attr-req-value/README.md b/rules/attr-req-value/README.md
@@ -51,3 +51,17 @@
 <img src="images/image.jpg" width="100" height="100" alt="">
 <section data-test></section>
 ```
+
+## Исключения
+Один `<option>` в `<select>` может быть с пустым значением для атрибута `value`, если он выбран по умолчанию.
+
+Следующий шаблон **не** считается проблемой:
+
+```html
+<label for="fruits">Fruits</label>
+<select id="fruits" name="fruits" required>
+  <option value="">Select...</option>
+  <option value="banana">Banana</option>
+  <option value="apple">Apple</option>
+</select>
+```
diff --git a/rules/attr-req-value/fixture/error.html b/rules/attr-req-value/fixture/error.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+
+  <label for="">Fruits</label>
+
+  <label for="fruits">Fruits</label>
+  <select id="fruits" name="fruits" required>
+    <option value="">Select...</option> <!--problem-->
+    <option value="">Shmelect...</option> <!--problem-->
+    <option value="banana">Banana</option>
+    <option value="apple">Apple</option>
+  </select>
+</body>
+</html>
diff --git a/rules/attr-req-value/fixture/success.html b/rules/attr-req-value/fixture/success.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+
+  <label for="fruits-3">Fruits</label>
+  <select id="fruits-3" name="fruits" required>
+    <option value="orange">Orange</option>
+  </select>
+
+  <label for="fruits-2">Fruits</label>
+  <select id="fruits-2" name="fruits" required>
+    <option value="orange">Orange</option>
+    <option value="banana">Banana</option>
+    <option value="apple">Apple</option>
+  </select>
+
+  <label for="fruits">Fruits</label>
+  <select id="fruits" name="fruits" required>
+    <option value="">Select...</option>
+    <option value="banana">Banana</option>
+    <option value="apple">Apple</option>
+  </select>
+</body>
+</html>
diff --git a/rules/attr-req-value/index.js b/rules/attr-req-value/index.js
@@ -13,6 +13,17 @@ const matchesIgnoreList = (attributeName, ignoreList) => ignoreList.some((ignore
   }
 });
 
+const isValidOptionValue = (node, name) => {
+  if (name !== 'value' || !node.parent || node.parent.tagName !== 'select') {
+    return true;
+  }
+
+  const emptyOptions = node.parent.children.filter((child) =>
+    child.tagName === 'option' && !has_non_empty_attribute(child, 'value')
+  );
+
+  return emptyOptions.length > 1;
+};
 
 module.exports = {
   name: 'htmlacademy/attr-req-value',
@@ -24,17 +35,18 @@ module.exports = {
         const name = attribute.name.chars.toLowerCase();
 
         // eslint-disable-next-line camelcase
-        if (!has_non_empty_attribute(node, name) && !is_boolean_attribute(attribute) && !matchesIgnoreList(name, rule_config.ignore)
-        ) {
-          report({
-            code: 'E006',
-            position: attribute.loc,
-            meta: {
-              data: {
-                attribute: name,
+        if (!has_non_empty_attribute(node, name) && !is_boolean_attribute(attribute) && !matchesIgnoreList(name, rule_config.ignore)) {
+          if (isValidOptionValue(node, name)) {
+            report({
+              code: 'E006',
+              position: attribute.loc,
+              meta: {
+                data: {
+                  attribute: name,
+                },
               },
-            },
-          });
+            });
+          }
         }
       });
     }
