Add rule doc.

Author: sidhsharma1992

docs/rules/buttons/menu-button-needs-labelling.md

@@ -0,0 +1,33 @@
+# menu-button-needs-labelling
+
+MenuButton components must have accessible labelling for screen readers.
+
+## Rule Details
+
+This rule enforces that MenuButton components have proper accessible names through aria-label, aria-labelledby, or text content.
+
+### Noncompliant
+
+```jsx
+<MenuButton />
+```
+
+### Compliant
+
+```jsx
+<MenuButton aria-label="Menu options" />
+
+<MenuButton aria-labelledby="menu-label">
+  <span id="menu-label">Options</span>
+</MenuButton>
+
+<MenuButton>Options</MenuButton>
+```
+
+## When Not To Use
+
+This rule should always be used for MenuButton components as they are interactive elements.
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)

docs/rules/buttons/split-button-needs-labelling.md

@@ -0,0 +1,33 @@
+# split-button-needs-labelling
+
+SplitButton components must have accessible labelling for screen readers.
+
+## Rule Details
+
+This rule enforces that SplitButton components have proper accessible names through aria-label, aria-labelledby, or text content.
+
+### Noncompliant
+
+```jsx
+<SplitButton />
+```
+
+### Compliant
+
+```jsx
+<SplitButton aria-label="Save options" />
+
+<SplitButton aria-labelledby="save-label">
+  <span id="save-label">Save</span>
+</SplitButton>
+
+<SplitButton>Save</SplitButton>
+```
+
+## When Not To Use
+
+This rule should always be used for SplitButton components as they are interactive elements.
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)

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

@@ -0,0 +1,41 @@
+# card-needs-accessible-name
+
+Interactive Card components must have an accessible name for screen readers.
+
+## Rule Details
+
+This rule enforces that Card components have proper accessible names when they are interactive (clickable).
+
+### Noncompliant
+
+```jsx
+<Card>
+  <CardHeader>
+    <Text weight="semibold">Card title</Text>
+  </CardHeader>
+</Card>
+```
+
+### Compliant
+
+```jsx
+<Card aria-label="Product details">
+  <CardHeader>
+    <Text weight="semibold">Card title</Text>
+  </CardHeader>
+</Card>
+
+<Card aria-labelledby="card-title">
+  <CardHeader>
+    <Text id="card-title" weight="semibold">Card title</Text>
+  </CardHeader>
+</Card>
+```
+
+## When Not To Use
+
+If the Card is purely decorative and not interactive, this rule is not necessary.
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)

docs/rules/infolabel-needs-labelling.md

@@ -0,0 +1,33 @@
+# infolabel-needs-labelling
+
+InfoLabel components must have accessible labelling for screen readers.
+
+## Rule Details
+
+This rule enforces that InfoLabel components have proper accessible names through aria-label, aria-labelledby, or text content.
+
+### Noncompliant
+
+```jsx
+<InfoLabel />
+```
+
+### Compliant
+
+```jsx
+<InfoLabel aria-label="Additional information" />
+
+<InfoLabel aria-labelledby="info-text">
+  <span id="info-text">Help text</span>
+</InfoLabel>
+
+<InfoLabel>Help information</InfoLabel>
+```
+
+## When Not To Use
+
+If the InfoLabel is purely decorative, this rule may not be necessary.
+
+## Accessibility guidelines
+
+- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)