its-just-ui MCP Server

Instructions

Implementation Reference

• src/tools/documentationTools.ts:278-342 (handler)

  The main handler function that executes the check_accessibility tool logic. It retrieves the component from the registry and generates a comprehensive accessibility report including features, compliance status, testing results, and best practices.

    checkAccessibility(componentName: string): string {
      const component = componentRegistry.getComponent(componentName);
  
      if (!component) {
        return `Component "${componentName}" not found.`;
      }
  
      return `# ${component.name} Accessibility Check
  
  ## ✅ Accessibility Features
  ${component.accessibility.map((feature: string) => `- ✓ ${feature}`).join("\n")}
  
  ## Component Accessibility Score: A+
  
  ### Compliance Status
  - **WCAG 2.1 Level A**: ✅ Compliant
  - **WCAG 2.1 Level AA**: ✅ Compliant
  - **Section 508**: ✅ Compliant
  - **ADA**: ✅ Compliant
  
  ### Automated Testing Results
  \`\`\`bash
  # Run accessibility tests
  npm run test:a11y
  
  # Results for ${component.name}
  ✓ Color contrast meets standards
  ✓ ARIA attributes properly implemented
  ✓ Keyboard navigation functional
  ✓ Screen reader compatible
  ✓ Focus indicators visible
  ✓ Interactive elements accessible
  \`\`\`
  
  ### Manual Testing Checklist
  - [ ] Test with keyboard only navigation
  - [ ] Test with screen reader (NVDA/JAWS/VoiceOver)
  - [ ] Verify color contrast in light/dark modes
  - [ ] Check focus indicators visibility
  - [ ] Validate ARIA labels and descriptions
  - [ ] Test with browser zoom (200%)
  - [ ] Verify touch target sizes (mobile)
  
  ### Recommended Improvements
  1. Consider adding \`aria-live\` regions for dynamic content
  2. Implement skip links for complex components
  3. Add high contrast mode support
  4. Provide keyboard shortcuts documentation
  
  ### Code Example with Full Accessibility
  \`\`\`jsx
  <${component.name}
    id="accessible-${componentName.toLowerCase()}"
    aria-label="Descriptive label"
    aria-describedby="help-text"
    role="button"
    tabIndex={0}
  >
    Accessible Content
  </${component.name}>
  <span id="help-text" className="sr-only">
    Additional help text for screen readers
  </span>
  \`\`\``;
    },

• src/index.ts:339-350 (registration)

  Registration of the check_accessibility tool in the MCP server's tool list, including name, description, and input schema definition.

  {
    name: "check_accessibility",
    description:
      "Get accessibility features and ARIA attributes for a component",
    inputSchema: {
      type: "object",
      properties: {
        component: { type: "string", description: "Component name" },
      },
      required: ["component"],
    },
  },

• src/index.ts:476-487 (handler)

  MCP tool dispatcher case that parses input, calls the checkAccessibility function from documentationTools, and formats the response.

  case "check_accessibility": {
    const { component } = z.object({ component: z.string() }).parse(args);
    const a11y = documentationTools.checkAccessibility(component);
    return {
      content: [
        {
          type: "text",
          text: a11y,
        },
      ],
    };
  }