Merge branch 'main' into user/harshmodi/ProgressBarLintRules

Author: Harsh-Modi278

COVERAGE.md

@@ -75,4 +75,4 @@ We currently cover the following components:
     -   [] Tree
     -   [x] Datepicker
     -   [] Calendar
-    -   [] Timepicker
+    -   [x] Timepicker

docs/rules/avoid-using-aria-describedby-for-primary-labelling.md

@@ -1,4 +1,8 @@
-# aria-describedby provides additional context and is not meant for primary labeling. (`avoid-using-aria-describedby-for-primary-labelling`)
+# Aria-describedby provides additional context and is not meant for primary labeling (`@microsoft/fluentui-jsx-a11y/avoid-using-aria-describedby-for-primary-labelling`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
 
 You should avoid using `aria-describedby` as a primary labeling mechanism because it is intended to provide supplementary or additional information, not to act as the main label for an element.
 

docs/rules/badge-needs-accessible-name.md

@@ -4,6 +4,12 @@
 
 <!-- end auto-generated rule header -->
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
 Badge information should be surfaced as part of the control that it is associated with, because, badges themselves do not receive focus meaning they are not directly accessible by screen readers. If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.
 
 Badge content is exposed as text, and is treated by screen readers as if it were inline content of the control it is associated with.

lib/applicableComponents/inputBasedComponents.js

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

tests/lib/rules/input-missing-label.js

@@ -3,6 +3,8 @@
 
 "use strict";
 
+const { applicableComponents } = require("../../../lib/applicableComponents/inputBasedComponents");
+
 //------------------------------------------------------------------------------
 // Requirements
 //------------------------------------------------------------------------------
@@ -20,70 +22,57 @@ RuleTester.setDefaultConfig({
     }
 });
 
+//------------------------------------------------------------------------------
+// Helper function to generate test cases
+//------------------------------------------------------------------------------
+function generateTestCases(componentName) {
+    return {
+        valid: [
+            `<><Label htmlFor="some-id">Some Label</Label><${componentName} id="some-id"/></>`,
+            `<><Label id="test-span">Some Label</Label><${componentName} id="some-id" aria-labelledby="test-span"/></>`,
+            `<Label>test</Label>`,
+            `<Label>test<${componentName} /></Label>`,
+            `<Label>test<SomeNesting><${componentName} /></SomeNesting></Label>`,
+            `<Field label="${componentName}"><${componentName} /></Field>`
+        ],
+        invalid: [
+            {
+                code: `<><${componentName}/></>`,
+                errors: [{ messageId: "missingLabelOnInput" }]
+            },
+            {
+                code: `<><Label/><${componentName}/></>`,
+                errors: [{ messageId: "missingLabelOnInput" }]
+            },
+            {
+                code: `<><Label htmlFor="id"/><${componentName} /></>`,
+                errors: [{ messageId: "missingLabelOnInput" }]
+            },
+            {
+                code: `<${componentName} id="some-id"/>`,
+                errors: [{ messageId: "missingLabelOnInput" }]
+            },
+            {
+                code: `<><Label>Some Label</Label><${componentName} id="some-id"/></>`,
+                errors: [{ messageId: "missingLabelOnInput" }]
+            },
+            {
+                code: `<><Field></Field><${componentName} id="some-id"/></>`,
+                errors: [{ messageId: "missingLabelOnInput" }]
+            }
+        ]
+    };
+}
+
+// Collect all test cases for all applicable components
+const allTestCases = applicableComponents.flatMap(component => generateTestCases(component));
+
 //------------------------------------------------------------------------------
 // Tests
 //------------------------------------------------------------------------------
 
 const ruleTester = new RuleTester();
 ruleTester.run("input-missing-label", rule, {
-    valid: [
-        '<><Label htmlFor="some-id">Some Label</Label><Input id="some-id"/></>',
-        '<><Label id="test-span">Some Label</Label><Input id="some-id" aria-labelledby="test-span"/></>',
-        "<Label>test</Label>",
-        "<Label>test<Input/></Label>",
-        "<Label>test<SomeNesting><Input/></SomeNesting></Label>",
-        '<><Label htmlFor="some-id">Some Label</Label><Slider size="medium" defaultValue={20} id="some-id"/></>',
-        '<><Label id="test-span">Some Label</Label><Slider size="medium" defaultValue={20} id="some-id" aria-labelledby="test-span"/></>',
-        '<Label>test<Slider size="medium" defaultValue={20}/></Label>',
-        '<Label>test<SomeNesting><Slider size="medium" defaultValue={20}/></SomeNesting></Label>',
-        '<Field label="Input"><Input /></Field>',
-        '<Field label="Slider"><Slider defaultValue={25} /></Field>'
-    ],
-
-    invalid: [
-        {
-            code: "<><Input/></>",
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: "<><Label/><Input/></>",
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<><Label htmlFor="id"/><Input /></>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<Input id="some-id"/>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<><Label>Some Label</Label><Input id="some-id"/></>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<><Label/><Slider size="medium" defaultValue={20}/></>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<><Label htmlFor="id"/><Slider size="medium" defaultValue={20} /></>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<Slider id="some-id"/>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<><Label>Some Label</Label><Slider id="some-id"/></>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: '<><Field></Field><Slider id="some-id"/></>',
-            errors: [{ messageId: "missingLabelOnInput" }]
-        },
-        {
-            code: "<><Field></Field><Input /></>",
-            errors: [{ messageId: "missingLabelOnInput" }]
-        }
-    ]
+    valid: allTestCases.flatMap(test => test.valid),
+    invalid: allTestCases.flatMap(test => test.invalid)
 });