@nordcraft/search 1.0.53 → 1.0.55

package/src/rules/issues/dom/domRules.index.ts

@@ -0,0 +1,55 @@
+import { createRequiredDirectChildRule } from './createRequiredDirectChildRule'
+import { createRequiredDirectParentRule } from './createRequiredDirectParentRule'
+import { createRequiredElementAttributeRule } from './createRequiredElementAttributeRule'
+import { createRequiredMetaTagRule } from './createRequiredMetaTagRule'
+import { elementWithoutInteractiveContentRule } from './elementWithoutInteractiveContentRule'
+import { imageWithoutDimensionRule } from './imageWithoutDimensionRule'
+import { nonEmptyVoidElementRule } from './nonEmptyVoidElementRule'
+
+export default [
+  nonEmptyVoidElementRule,
+  createRequiredElementAttributeRule({
+    tag: 'a',
+    attribute: 'href',
+  }),
+  createRequiredElementAttributeRule({
+    tag: 'img',
+    attribute: 'alt',
+    allowEmptyString: true,
+  }),
+  createRequiredElementAttributeRule({
+    tag: 'img',
+    attribute: 'src',
+  }),
+  createRequiredMetaTagRule('description'),
+  createRequiredMetaTagRule('title'),
+  createRequiredDirectChildRule(['ul', 'ol'], ['li', 'script', 'template']),
+  createRequiredDirectParentRule(['ul', 'ol'], ['li']),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#technical_summary
+  createRequiredDirectChildRule(
+    ['table'],
+    ['caption', 'colgroup', 'tbody', 'thead', 'tfoot', 'tr'],
+  ),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody#technical_summary
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead#technical_summary
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot#technical_summary
+  createRequiredDirectParentRule(['table'], ['tbody', 'thead', 'tfoot']),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr#technical_summary
+  createRequiredDirectChildRule(['tr'], ['th', 'td', 'script', 'template']),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#technical_summary
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#technical_summary
+  createRequiredDirectParentRule(['tr'], ['th', 'td']),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#technical_summary
+  createRequiredDirectChildRule(['select'], ['option', 'optgroup', 'hr']),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup#technical_summary
+  createRequiredDirectChildRule(['optgroup'], ['option']),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend#technical_summary
+  createRequiredDirectParentRule(['fieldset'], ['legend']),
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#technical_summary
+  createRequiredDirectChildRule(
+    ['dl'],
+    ['dd', 'dt', 'div', 'script', 'template'],
+  ),
+  elementWithoutInteractiveContentRule,
+  imageWithoutDimensionRule,
+]

package/src/rules/issues/dom/elementWithoutInteractiveContentRule.test.ts

@@ -0,0 +1,401 @@
+import { valueFormula } from '@nordcraft/core/dist/formula/formulaUtils'
+import { describe, expect, test } from 'bun:test'
+import { searchProject } from '../../../searchProject'
+import { elementWithoutInteractiveContentRule } from './elementWithoutInteractiveContentRule'
+
+describe('elementWithoutInteractiveContentRule', () => {
+  test('should detect invalid button in button element', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: ['child1'],
+                  style: {},
+                },
+                child1: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'div',
+                  children: ['child2'],
+                  style: {},
+                },
+                child2: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [elementWithoutInteractiveContentRule],
+      }),
+    )
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('invalid element child')
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+    expect(problems[0].details).toEqual({
+      parentTag: 'button',
+      invalidChild: { tag: 'button' },
+    })
+  })
+  test('should detect invalid label in button element', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: ['child1'],
+                  style: {},
+                },
+                child1: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'div',
+                  children: ['child2'],
+                  style: {},
+                },
+                child2: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'label',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [elementWithoutInteractiveContentRule],
+      }),
+    )
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('invalid element child')
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+    expect(problems[0].details).toEqual({
+      parentTag: 'button',
+      invalidChild: { tag: 'label' },
+    })
+  })
+  test('should detect invalid element with attribute requirement', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: ['child1'],
+                  style: {},
+                },
+                child1: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'div',
+                  children: ['child2'],
+                  style: {},
+                },
+                child2: {
+                  type: 'element',
+                  attrs: { href: valueFormula('https://example.com') },
+                  classes: {},
+                  events: {},
+                  tag: 'a',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [elementWithoutInteractiveContentRule],
+      }),
+    )
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('invalid element child')
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+    expect(problems[0].details).toEqual({
+      parentTag: 'button',
+      invalidChild: { tag: 'a', whenAttributeIsPresent: 'href' },
+    })
+  })
+  test('should allow element children when attribute requirement is not met', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: ['child1'],
+                  style: {},
+                },
+                child1: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'div',
+                  children: ['child2'],
+                  style: {},
+                },
+                child2: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'a',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [elementWithoutInteractiveContentRule],
+      }),
+    )
+    expect(problems).toHaveLength(0)
+  })
+  test('should detect invalid children when negative attribute requirement is met', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: ['child1'],
+                  style: {},
+                },
+                child1: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'div',
+                  children: ['child2'],
+                  style: {},
+                },
+                child2: {
+                  type: 'element',
+                  attrs: { type: valueFormula('text') },
+                  classes: {},
+                  events: {},
+                  tag: 'input',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [elementWithoutInteractiveContentRule],
+      }),
+    )
+    expect(problems).toHaveLength(0)
+  })
+  test('should detect invalid label in button element in nested component', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: ['child1'],
+                  style: {},
+                },
+                child1: {
+                  type: 'component',
+                  attrs: {},
+                  name: 'buttonComponent',
+                  events: {},
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+            buttonComponent: {
+              name: 'buttonComponent',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'div',
+                  children: ['child1'],
+                  style: {},
+                },
+                child1: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'div',
+                  children: ['child2'],
+                  style: {},
+                },
+                child2: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'label',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [elementWithoutInteractiveContentRule],
+      }),
+    )
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('invalid element child')
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+    expect(problems[0].details).toEqual({
+      parentTag: 'button',
+      invalidChild: { tag: 'label' },
+    })
+  })
+  test('should not detect valid element children', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'button',
+                  children: ['child1', 'child2'],
+                  style: {},
+                },
+                child1: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'p',
+                  children: [],
+                  style: {},
+                },
+                child2: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'p',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [elementWithoutInteractiveContentRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+})

package/src/rules/issues/dom/elementWithoutInteractiveContentRule.ts

@@ -0,0 +1,80 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types'
+import type { ToddleComponent } from '@nordcraft/core/dist/component/ToddleComponent'
+import { isDefined } from '@nordcraft/core/dist/utils/util'
+import type { Rule } from '../../../types'
+import {
+  interactiveContentElementDefinition,
+  type InteractiveContent,
+} from '../../../util/helpers'
+
+const ELEMENTS_WITHOUT_INTERACTIVE_CONTENT = ['button', 'a']
+
+export const elementWithoutInteractiveContentRule: Rule<{
+  parentTag: string
+  invalidChild: InteractiveContent
+}> = {
+  code: 'invalid element child',
+  level: 'warning',
+  category: 'Accessibility',
+  visit: (report, args) => {
+    if (args.nodeType !== 'component-node') {
+      return
+    }
+    const { value, component, path, files } = args
+    if (
+      value.type !== 'element' ||
+      !ELEMENTS_WITHOUT_INTERACTIVE_CONTENT.includes(value.tag)
+    ) {
+      return
+    }
+    // TODO: Consider memoizing this function to avoid repeated searches
+    const searchChildren = (
+      container: ToddleComponent<Function> | Component,
+      children: string[],
+      results: Array<InteractiveContent> = [],
+    ): Array<InteractiveContent> => {
+      return children.reduce((acc, childId) => {
+        const child = container.nodes[childId]
+        if (!isDefined(child) || child.type === 'text') {
+          return acc
+        }
+        if (child.type === 'element') {
+          // Check if the child element is an interactive content element
+          const interactiveElement = interactiveContentElementDefinition(child)
+          if (interactiveElement) {
+            // TODO: consider visiting this element's children instead of returning early
+            return [...acc, interactiveElement]
+          }
+        }
+        const allResults = [...acc]
+        if (child.type === 'component') {
+          const component = child.package
+            ? files.packages?.[child.package]?.components?.[child.name]
+            : files.components?.[child.name]
+          if (!component) {
+            return results
+          }
+          // Search children in the component's own nodes
+          allResults.push(
+            ...searchChildren(
+              component,
+              component.nodes['root']?.children ?? [],
+              acc,
+            ),
+          )
+        }
+        // Search children in slot/component/element:
+        return searchChildren(container, child.children, allResults)
+      }, results)
+    }
+    const childTags = searchChildren(component, value.children)
+    if (childTags.length > 0) {
+      childTags.forEach((ic) =>
+        report(path, {
+          parentTag: value.tag,
+          invalidChild: ic,
+        }),
+      )
+    }
+  },
+}

package/src/rules/issues/dom/imageWithoutDimensionRule.test.ts

@@ -0,0 +1,162 @@
+import { describe, expect, test } from 'bun:test'
+import { searchProject } from '../../../searchProject'
+import { imageWithoutDimensionRule } from './imageWithoutDimensionRule'
+
+describe('imageWithoutDimensionRule', () => {
+  test('should detect missing image dimensions', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {},
+                  classes: {},
+                  events: {},
+                  tag: 'img',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [imageWithoutDimensionRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('image without dimension')
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+  })
+
+  test('should not detect image with explicit dimensions set', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {
+                    width: {
+                      type: 'value',
+                      value: '100',
+                    },
+                    height: {
+                      type: 'value',
+                      value: '100',
+                    },
+                  },
+                  classes: {},
+                  events: {},
+                  tag: 'img',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [imageWithoutDimensionRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(0)
+  })
+
+  test('should report if image has width but no height', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {
+                    width: {
+                      type: 'value',
+                      value: '100',
+                    },
+                  },
+                  classes: {},
+                  events: {},
+                  tag: 'source',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [imageWithoutDimensionRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('image without dimension')
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+  })
+
+  test('should report if image has height but no width', () => {
+    const problems = Array.from(
+      searchProject({
+        files: {
+          formulas: {},
+          components: {
+            test: {
+              name: 'test',
+              nodes: {
+                root: {
+                  type: 'element',
+                  attrs: {
+                    height: {
+                      type: 'value',
+                      value: '100',
+                    },
+                  },
+                  classes: {},
+                  events: {},
+                  tag: 'source',
+                  children: [],
+                  style: {},
+                },
+              },
+              formulas: {},
+              apis: {},
+              attributes: {},
+              variables: {},
+            },
+          },
+        },
+        rules: [imageWithoutDimensionRule],
+      }),
+    )
+
+    expect(problems).toHaveLength(1)
+    expect(problems[0].code).toBe('image without dimension')
+    expect(problems[0].path).toEqual(['components', 'test', 'nodes', 'root'])
+  })
+})