feat: Add lint rule for Field component

COVERAGE.md

@@ -30,7 +30,7 @@ We currently cover the following components:
     -   [N/A] Divider
     -   [] Drawer
     -   [X] Dropdown
-    -   [] Field
+    -   [x] Field
     -   [N/A] FluentProvider
     -   [] Image
     -   [] InfoLabel

docs/rules/field-needs-labelling.md

@@ -0,0 +1,61 @@
+# Accessibility: Field must have either label, validationMessage and hint attributes (`@microsoft/fluentui-jsx-a11y/field-needs-labelling`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+Field must have `label` prop and either `validationMessage` or `hint` prop.
+
+<https://www.w3.org/TR/html-aria/>
+
+## Ways to fix
+
+-   Make sure that Field component has following props:
+    -   `label`
+    -   `validationMessage` or `hint`
+
+## Rule Details
+
+This rule aims to make Field component accessible.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Field
+    label="Example field"
+    validationState="success"
+>
+    <ProgressBar value={0.5} max={1} />
+</Field>
+```
+
+```jsx
+<Field
+    validationState="success"
+    hint="This is a hint."
+>
+    <ProgressBar value={0.5} max={1} />
+</Field>
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<Field
+    label="Example field"
+    validationState="success"
+    validationMessage="This is a success message."
+>
+    <ProgressBar value={0.5} max={1} />
+</Field>
+```
+
+```jsx
+<Field
+    label="Example field"
+    validationState="success"
+    hint="This is a hint."
+>
+    <ProgressBar value={0.5} max={1} />
+</Field>
+```

lib/rules/field-needs-labelling.js

@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+const { hasNonEmptyProp } = require("../util/hasNonEmptyProp");
+const elementType = require("jsx-ast-utils").elementType;
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+    meta: {
+        // possible error messages for the rule
+        messages: {
+            noUnlabelledField: "Accessibility: Field must have either label, validationMessage and hint attributes"
+        },
+        // "problem" means the rule is identifying code that either will cause an error or may cause a confusing behavior: https://eslint.org/docs/latest/developer-guide/working-with-rules
+        type: "problem",
+        // docs for the rule
+        docs: {
+            description: "Accessibility: Field must have either label, validationMessage and hint attributes",
+            recommended: true,
+            url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
+        },
+        schema: []
+    },
+    // create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
+    create(context) {
+        return {
+            // visitor functions for different types of nodes
+            JSXOpeningElement(node) {
+                // if it is not a Spinner, return
+                if (elementType(node) !== "Field") {
+                    return;
+                }
+
+                if (
+                    hasNonEmptyProp(node.attributes, "label", true) &&
+                    (hasNonEmptyProp(node.attributes, "validationMessage", true) || hasNonEmptyProp(node.attributes, "hint", true))
+                ) {
+                    return;
+                }
+
+                // if it has no visual labelling, report error
+                context.report({
+                    node,
+                    messageId: `noUnlabelledField`
+                });
+            }
+        };
+    }
+};
+

tests/lib/rules/field-needs-labelling.js

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/field-needs-labelling"),
+    RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+ruleTester.run("field-needs-labelling", rule, {
+    valid: [
+        `<Field
+            label="Example field"
+            validationState="success"
+            validationMessage="This is a success message."
+        >
+            <ProgressBar value={0.5} max={1} />
+        </Field>`,
+        `<Field
+            label="Example field"
+            validationState="success"
+            hint="This is a hint."
+        >
+            <ProgressBar value={0.5} max={1} />
+        </Field>`
+    ],
+    invalid: [
+        {
+            code: `<Field
+                label="Example field"
+                validationState="success"
+            >
+                <ProgressBar value={0.5} max={1} />
+            </Field>`,
+            errors: [{ messageId: "noUnlabelledField" }]
+        },
+        {
+            code: `<Field
+                validationState="success"
+                hint="This is a hint."
+            >
+                <ProgressBar value={0.5} max={1} />
+            </Field>`,
+            errors: [{ messageId: "noUnlabelledField" }]
+        }
+    ]
+});
+