Added rule to require alt text on image

Author: rbitting

README.md

@@ -124,6 +124,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po
 | [dropdown-needs-labelling](docs/rules/dropdown-needs-labelling.md)                                                     | Accessibility: Dropdown menu must have an id and it needs to be linked via htmlFor of a Label                                                          | ✅  |    |    |
 | [field-needs-labelling](docs/rules/field-needs-labelling.md)                                                           | Accessibility: Field must have label                                                                                                                   | ✅  |    |    |
 | [image-button-missing-aria](docs/rules/image-button-missing-aria.md)                                                   | Accessibility: Image buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby                                      | ✅  |    |    |
+| [image-needs-alt](docs/rules/image-needs-alt.md)                                                                       | Accessibility: Image must have alt attribute                                                                                                           | ✅  |    |    |
 | [input-components-require-accessible-name](docs/rules/input-components-require-accessible-name.md)                     | Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label                                         | ✅  |    |    |
 | [link-missing-labelling](docs/rules/link-missing-labelling.md)                                                         | Accessibility: Image links must have an accessible name. Add either text content, labelling to the image or labelling to the link itself.              | ✅  |    | 🔧 |
 | [menu-item-needs-labelling](docs/rules/menu-item-needs-labelling.md)                                                   | Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby                                                        | ✅  |    |    |

docs/rules/image-needs-alt.md

@@ -0,0 +1,34 @@
+# Accessibility: Image must have alt attribute (`@microsoft/fluentui-jsx-a11y/image-needs-alt`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+## Rule details
+
+This rule requires all `<Image>` components have non-empty alternative text. The `alt` attribute should provide a clear and concise text replacement for the image's content. It should *not* describe the presence of the image itself or the file name of the image.
+
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<Image src="image.png" />
+```
+
+```jsx
+<Image src="image.png" alt="" />
+```
+
+```jsx
+<Image src="image.png" alt={null} />
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<Image src="image.png" alt="A dog playing in a park." />
+```
+
+## Further Reading
+
+- [`<img>` Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#accessibility)

lib/index.ts

@@ -31,6 +31,7 @@ module.exports = {
                 "@microsoft/fluentui-jsx-a11y/dropdown-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/field-needs-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/image-button-missing-aria": "error",
+                "@microsoft/fluentui-jsx-a11y/image-needs-alt": "error",
                 "@microsoft/fluentui-jsx-a11y/input-components-require-accessible-name": "error",
                 "@microsoft/fluentui-jsx-a11y/link-missing-labelling": "error",
                 "@microsoft/fluentui-jsx-a11y/menu-item-needs-labelling": "error",
@@ -68,6 +69,7 @@ module.exports = {
         "dropdown-needs-labelling": rules.dropdownNeedsLabelling,
         "field-needs-labelling": rules.fieldNeedsLabelling,
         "image-button-missing-aria": rules.imageButtonMissingAria,
+        "image-needs-alt": rules.imageNeedsAlt,
         "input-components-require-accessible-name": rules.inputComponentsRequireAccessibleName,
         "link-missing-labelling": rules.linkMissingLabelling,
         "menu-item-needs-labelling": rules.menuItemNeedsLabelling,

lib/rules/image-needs-alt.ts

@@ -0,0 +1,48 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+const elementType = require("jsx-ast-utils").elementType;
+import { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
+import { hasNonEmptyProp } from "../util/hasNonEmptyProp";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+const rule = ESLintUtils.RuleCreator.withoutDocs({
+    meta: {
+        type: "problem",
+        docs: {
+            description: "Accessibility: Image must have alt attribute",
+            recommended: "error"
+        },
+        messages: {
+            imageNeedsAlt: "Accessibility: Image must have alt attribute with a meaningful description of the image"
+        },
+        schema: []
+    },
+    defaultOptions: [], // no options needed
+    create(context) {
+        return {
+            // Listen for variable declarations
+            JSXOpeningElement(node: TSESTree.JSXOpeningElement) {
+                // No error if the element is not an Image
+                if (elementType(node) !== "Image") {
+                    return;
+                }
+
+                // No error if alt prop exists and is non-empty
+                if (hasNonEmptyProp(node.attributes, "alt")) {
+                    return;
+                }
+
+                context.report({
+                    node,
+                    messageId: "imageNeedsAlt"
+                });
+            }
+        };
+    }
+});
+
+export default rule;

lib/rules/index.ts

@@ -16,6 +16,7 @@ export { default as dialogsurfaceNeedsAria } from "./dialogsurface-needs-aria";
 export { default as dropdownNeedsLabelling } from "./dropdown-needs-labelling";
 export { default as fieldNeedsLabelling } from "./field-needs-labelling";
 export { default as imageButtonMissingAria } from "./buttons/image-button-missing-aria";
+export { default as imageNeedsAlt } from "./image-needs-alt";
 export { default as inputComponentsRequireAccessibleName } from "./input-components-require-accessible-name";
 export { default as linkMissingLabelling } from "./link-missing-labelling";
 export { default as menuItemNeedsLabelling } from "./menu-item-needs-labelling";

tests/lib/rules/image-needs-alt.test.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Rule } from "eslint";
+import ruleTester from "./helper/ruleTester";
+import rule from "../../../lib/rules/image-needs-alt";
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+ruleTester.run("image-needs-alt", rule as unknown as Rule.RuleModule, {
+    valid: ['<Image src="image.png" alt="Description of image" />', '<Image src="image.png" alt={altText} />'],
+    invalid: [
+        {
+            // No alt attribute
+            code: '<Image src="image.png" />',
+            errors: [{ messageId: "imageNeedsAlt" }]
+        },
+        {
+            // Empty alt attribute
+            code: '<Image src="image.png" alt="" />',
+            errors: [{ messageId: "imageNeedsAlt" }]
+        },
+        {
+            // Null alt attribute
+            code: '<Image src="image.png" alt={null} />',
+            errors: [{ messageId: "imageNeedsAlt" }]
+        },
+        {
+            // Undefined alt attribute
+            code: '<Image src="image.png" alt={undefined} />',
+            errors: [{ messageId: "imageNeedsAlt" }]
+        }
+    ]
+});