chore: migrate repo to use ts

.eslintrc.js

@@ -24,5 +24,6 @@ module.exports = {
     ],
     rules: {
         "header/header": [2, "line", [" Copyright (c) Microsoft Corporation.", " Licensed under the MIT License."], 2]
-    }
+    },
+    ignorePatterns: ["node_modules", "dist/"]
 };

.github/workflows/node.js.yml

@@ -15,7 +15,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [14.x, 16.x, 18.x]
+                node-version: [16.x, 18.x, 20.x]
                 # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
         steps:

dist/lib/applicableComponents/buttonBasedComponents.d.ts

@@ -0,0 +1 @@
+export const applicableComponents: string[];

dist/lib/applicableComponents/buttonBasedComponents.js

@@ -0,0 +1,7 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const applicableComponents = ["Button", "ToggleButton", "CompoundButton"];
+module.exports = {
+    applicableComponents
+};

dist/lib/applicableComponents/inputBasedComponents.d.ts

@@ -0,0 +1 @@
+export const applicableComponents: string[];

dist/lib/applicableComponents/inputBasedComponents.js

@@ -0,0 +1,7 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const applicableComponents = ["Input", "Slider", "DatePicker", "Textarea", "TextField", "TimePicker", "SearchBox", "Select"];
+module.exports = {
+    applicableComponents
+};

dist/lib/index.d.ts

@@ -0,0 +1 @@
+export {};

lib/index.js → dist/lib/index.js

@@ -1,16 +1,18 @@
+"use strict";
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-
-"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
 console.log("Loading my-eslint-plugin");
+const prefer_aria_over_title_attribute_1 = __importDefault(require("./rules/prefer-aria-over-title-attribute"));
 //------------------------------------------------------------------------------
 // Requirements
 //------------------------------------------------------------------------------
-
 //------------------------------------------------------------------------------
 // Plugin Definition
 //------------------------------------------------------------------------------
-
 // import all rules in lib/rules
 module.exports = {
     rules: {
@@ -35,7 +37,7 @@ module.exports = {
         "avatar-needs-name": require("./rules/avatar-needs-name"),
         "radio-button-missing-label": require("./rules/radio-button-missing-label"),
         "radiogroup-missing-label": require("./rules/radiogroup-missing-label"),
-        "prefer-aria-over-title-attribute": require("./rules/prefer-aria-over-title-attribute"),
+        "prefer-aria-over-title-attribute": prefer_aria_over_title_attribute_1.default,
         "dialogbody-needs-title-content-and-actions": require("./rules/dialogbody-needs-title-content-and-actions"),
         "dialogsurface-needs-aria": require("./rules/dialogsurface-needs-aria"),
         "spinner-needs-labelling": require("./rules/spinner-needs-labelling"),
@@ -75,9 +77,7 @@ module.exports = {
         }
     }
 };
-
 // import processors
 module.exports.processors = {
-    // add your processors here
+// add your processors here
 };
-

dist/lib/rules/accordion-header-needs-labelling.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: import("eslint").Rule.RuleModule;
+export = _exports;

dist/lib/rules/accordion-header-needs-labelling.js

@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+"use strict";
+const { hasNonEmptyProp } = require("../util/hasNonEmptyProp");
+const { hasToolTipParent } = require("../util/hasTooltipParent");
+const { hasTextContentChild } = require("../util/hasTextContentChild");
+const { hasAssociatedLabelViaAriaLabelledBy } = require("../util/labelUtils");
+var hasProp = require("jsx-ast-utils").hasProp;
+var elementType = require("jsx-ast-utils").elementType;
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        messages: {
+            missingAriaLabel: "Accessibility: the accordion header must have an accessible name"
+        },
+        type: "problem", // `problem`, `suggestion`, or `layout`
+        docs: {
+            description: "The accordion header is a button and it needs an accessibile name e.g. text content, aria-label, aria-labelledby.",
+            recommended: false,
+            url: null // URL to the documentation page for this rule
+        },
+        fixable: null, // Or `code` or `whitespace`
+        schema: [] // Add a schema if the rule has options
+    },
+    // 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
+            JSXElement(node) {
+                const openingElement = node.openingElement;
+                // if it is not a AccordionHeader, return
+                if (elementType(openingElement) !== "AccordionHeader") {
+                    return;
+                }
+                // if it has text content, return
+                if (hasTextContentChild(node)) {
+                    return;
+                }
+                // if it is not an icon button, return
+                if (!hasProp(openingElement.attributes, "icon") && !hasProp(openingElement.attributes, "expandIcon")) {
+                    return;
+                }
+                // if it has a tooltip parent, return
+                if (hasToolTipParent(context)) {
+                    return;
+                }
+                // the button has an associated label
+                if (hasAssociatedLabelViaAriaLabelledBy(openingElement, context)) {
+                    return;
+                }
+                const hasAccessibleLabelling = hasNonEmptyProp(openingElement.attributes, "title") || hasNonEmptyProp(openingElement.attributes, "aria-label");
+                // if it has no accessible name, report error
+                if (!hasAccessibleLabelling) {
+                    context.report({
+                        node,
+                        messageId: `missingAriaLabel`
+                    });
+                }
+            }
+        };
+    }
+};

dist/lib/rules/accordion-item-needs-header-and-panel.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: import("eslint").Rule.RuleModule;
+export = _exports;

dist/lib/rules/accordion-item-needs-header-and-panel.js

@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+"use strict";
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        messages: {
+            accordionItemOneHeaderOnePanel: "ensure AccordionItem has exactly one header and one panel"
+        },
+        type: "problem", // `problem`, `suggestion`, or `layout`
+        docs: {
+            description: "An AccordionItem needs exactly one header and one panel",
+            recommended: true,
+            url: "https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" // URL to the documentation page for this rule
+        },
+        fixable: null, // Or `code` or `whitespace`
+        schema: [] // Add a schema if the rule has options
+    },
+    create(context) {
+        return {
+            JSXOpeningElement(node) {
+                if (node.name.name !== "AccordionItem") {
+                    return;
+                }
+                const children = node.parent.children.filter(child => child.type === "JSXElement");
+                const hasOneHeader = children.filter(child => child.openingElement.name.name === "AccordionHeader").length === 1;
+                const hasOnePanel = children.filter(child => child.openingElement.name.name === "AccordionPanel").length === 1;
+                if (!hasOneHeader || !hasOnePanel || children.length !== 2) {
+                    context.report({
+                        node,
+                        messageId: "accordionItemOneHeaderOnePanel"
+                    });
+                }
+            }
+        };
+    }
+};

dist/lib/rules/avatar-needs-name.d.ts

@@ -0,0 +1,15 @@
+export namespace meta {
+    namespace messages {
+        let missingAriaLabel: string;
+    }
+    let type: string;
+    namespace docs {
+        let description: string;
+        let recommended: boolean;
+        let url: string;
+    }
+    let schema: never[];
+}
+export function create(context: any): {
+    JSXOpeningElement(node: any): void;
+};

dist/lib/rules/avatar-needs-name.js

@@ -0,0 +1,50 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+"use strict";
+const { hasNonEmptyProp } = require("../util/hasNonEmptyProp");
+var elementType = require("jsx-ast-utils").elementType;
+const { hasAssociatedLabelViaAriaLabelledBy } = require("../util/labelUtils");
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+module.exports = {
+    meta: {
+        // possible error messages for the rule
+        messages: {
+            missingAriaLabel: "Accessibility: Avatar must have an accessible name"
+        },
+        // "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: {
+            // DONE
+            description: "Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby",
+            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 an Avatar, return
+                if (elementType(node) !== "Avatar") {
+                    return;
+                }
+                // if the Avatar has a name, aria-label or aria-labelledby, return
+                if (hasNonEmptyProp(node.attributes, "name") ||
+                    hasNonEmptyProp(node.attributes, "aria-label") ||
+                    hasAssociatedLabelViaAriaLabelledBy(node, context)) {
+                    return;
+                }
+                // no aria
+                context.report({
+                    node,
+                    messageId: `missingAriaLabel`
+                });
+            }
+        };
+    }
+};

dist/lib/rules/avoid-using-aria-describedby-for-primary-labelling.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: import("eslint").Rule.RuleModule;
+export = _exports;

dist/lib/rules/avoid-using-aria-describedby-for-primary-labelling.js

@@ -0,0 +1,62 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+"use strict";
+const { applicableComponents: inputComponents } = require("../applicableComponents/inputBasedComponents");
+const { applicableComponents: buttonComponents } = require("../applicableComponents/buttonBasedComponents");
+const { elementType } = require("jsx-ast-utils");
+const { isInsideLabelTag, hasAssociatedLabelViaHtmlFor, hasAssociatedLabelViaAriaLabelledBy, hasAssociatedLabelViaAriaDescribedby } = require("../util/labelUtils");
+const { hasFieldParent } = require("../util/hasFieldParent");
+const { hasNonEmptyProp } = require("../util/hasNonEmptyProp");
+const { hasToolTipParent } = require("../util/hasTooltipParent");
+const { hasTextContentChild } = require("../util/hasTextContentChild");
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+    meta: {
+        messages: {
+            noAriaDescribedbyAsLabel: "Accessibility: aria-describedby provides additional context and is not meant for primary labeling."
+        },
+        type: "suggestion", // `problem`, `suggestion`, or `layout`
+        docs: {
+            description: "aria-describedby provides additional context and is not meant for primary labeling.",
+            recommended: true,
+            url: null // URL to the documentation page for this rule
+        },
+        fixable: null, // Or `code` or `whitespace`
+        schema: [] // Add a schema if the rule has options
+    },
+    create(context) {
+        return {
+            JSXElement(node) {
+                const openingElement = node.openingElement;
+                if (buttonComponents.includes(elementType(openingElement)) && // It's a button-based component
+                    !hasToolTipParent(context) && // It doesn't have a tooltip parent
+                    !hasTextContentChild(node) && // It doesn't have text content
+                    !hasNonEmptyProp(openingElement.attributes, "title") && // Doesn't have a title
+                    !hasNonEmptyProp(openingElement.attributes, "aria-label") && // Doesn't have an aria-label
+                    !hasAssociatedLabelViaAriaLabelledBy(openingElement, context) && // Doesn't have aria-labelledby
+                    hasAssociatedLabelViaAriaDescribedby(openingElement, context) // But it does have aria-describedby
+                ) {
+                    context.report({
+                        node,
+                        messageId: "noAriaDescribedbyAsLabel"
+                    });
+                }
+                if (inputComponents.includes(elementType(openingElement)) && // It's an input component
+                    !hasFieldParent(context) && // It doesn't have a field parent
+                    !isInsideLabelTag(context) && // It's not inside a label tag
+                    !hasAssociatedLabelViaHtmlFor(openingElement, context) && // Doesn't have a label via htmlFor
+                    !hasAssociatedLabelViaAriaLabelledBy(openingElement, context) && // Doesn't have aria-labelledby
+                    hasAssociatedLabelViaAriaDescribedby(openingElement, context) // But it does have aria-describedby
+                ) {
+                    context.report({
+                        node,
+                        messageId: "noAriaDescribedbyAsLabel"
+                    });
+                }
+            }
+        };
+    }
+};

dist/lib/rules/badge-needs-accessible-name.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: import("eslint").Rule.RuleModule;
+export = _exports;