Fix all code review issues - improve type safety, remove unused code, fix accessibility checks

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/components/src/__tests__/README.md

@@ -24,7 +24,7 @@ Tests for form components:
 - Button, Input, Textarea, Select, Checkbox, Switch
 - Radio Group, Slider, Label, Email, Password
 
-**Coverage:** 49 tests
+**Coverage:** 32 tests
 
 ### `layout-data-renderers.test.tsx`
 Tests for layout and data display components:
@@ -38,14 +38,14 @@ Tests for feedback and overlay components:
 - Feedback: Loading, Spinner, Progress, Skeleton, Empty, Toast
 - Overlay: Dialog, Alert Dialog, Sheet, Drawer, Popover, Tooltip, Dropdown Menu, Context Menu, Hover Card, Menubar
 
-**Coverage:** 23 tests
+**Coverage:** 35 tests
 
 ### `complex-disclosure-renderers.test.tsx`
 Tests for complex and disclosure components:
 - Disclosure: Accordion, Collapsible, Toggle Group
 - Complex: Timeline, Data Table, Chatbot, Carousel, Scroll Area, Resizable, Filter Builder, Calendar View, Table
 
-**Coverage:** 23 tests
+**Coverage:** 31 tests
 
 ## Running Tests
 

packages/components/src/__tests__/basic-renderers.test.tsx

@@ -7,13 +7,10 @@
  */
 
 import { describe, it, expect, beforeAll } from 'vitest';
-import { screen } from '@testing-library/react';
-import { ComponentRegistry } from '@object-ui/core';
 import {
   renderComponent,
   validateComponentRegistration,
   getAllDisplayIssues,
-  checkAccessibility,
   checkDOMStructure,
 } from './test-utils';
 
@@ -67,7 +64,6 @@ describe('Basic Renderers - Display Issue Detection', () => {
     });
 
     it('should render with designer props correctly', () => {
-      const Component = ComponentRegistry.get('text');
       const { container } = renderComponent(
         { type: 'text', content: 'Designer Test' },
       );

packages/components/src/__tests__/complex-disclosure-renderers.test.tsx

@@ -11,7 +11,6 @@ import { ComponentRegistry } from '@object-ui/core';
 import {
   renderComponent,
   validateComponentRegistration,
-  getAllDisplayIssues,
   checkDOMStructure,
 } from './test-utils';
 
@@ -86,7 +85,7 @@ describe('Disclosure Renderers - Display Issue Detection', () => {
     it('should render toggle group with items', () => {
       const { container } = renderComponent({
         type: 'toggle-group',
-        type_mode: 'single',
+        selectionType: 'single',
         items: [
           { value: 'bold', label: 'Bold' },
           { value: 'italic', label: 'Italic' },

packages/components/src/__tests__/feedback-overlay-renderers.test.tsx

@@ -7,7 +7,6 @@
  */
 
 import { describe, it, expect, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
 import {
   renderComponent,
   validateComponentRegistration,

packages/components/src/__tests__/form-renderers.test.tsx

@@ -8,13 +8,10 @@
 
 import { describe, it, expect, beforeAll } from 'vitest';
 import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ComponentRegistry } from '@object-ui/core';
 import {
   renderComponent,
   validateComponentRegistration,
   getAllDisplayIssues,
-  checkAccessibility,
 } from './test-utils';
 
 // Import renderers to ensure registration

packages/components/src/__tests__/layout-data-renderers.test.tsx

@@ -7,11 +7,9 @@
  */
 
 import { describe, it, expect, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
 import {
   renderComponent,
   validateComponentRegistration,
-  getAllDisplayIssues,
   checkDOMStructure,
 } from './test-utils';
 

packages/components/src/__tests__/test-utils.tsx

@@ -50,7 +50,12 @@ export function checkAccessibility(element: HTMLElement): {
 
   // Check for form inputs without labels
   if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
-    const hasLabel = hasAriaLabel || element.hasAttribute('id');
+    const id = element.getAttribute('id');
+    const doc = element.ownerDocument || document;
+    const hasAssociatedLabel =
+      !!element.closest('label') ||
+      (!!id && !!doc.querySelector(`label[for="${id}"]`));
+    const hasLabel = hasAriaLabel || hasAssociatedLabel;
     if (!hasLabel) {
       issues.push('Form element missing label association');
     }
@@ -64,30 +69,6 @@ export function checkAccessibility(element: HTMLElement): {
   };
 }
 
-/**
- * Check if element has proper styling classes
- */
-export function checkStyling(element: HTMLElement): {
-  hasClasses: boolean;
-  hasTailwindClasses: boolean;
-  hasInlineStyles: boolean;
-  classes: string[];
-} {
-  const classes = Array.from(element.classList);
-  const hasClasses = classes.length > 0;
-  const hasTailwindClasses = classes.some(cls => 
-    /^(text-|bg-|border-|p-|m-|flex|grid|rounded|shadow|hover:|focus:)/.test(cls)
-  );
-  const hasInlineStyles = element.hasAttribute('style') && element.getAttribute('style') !== '';
-
-  return {
-    hasClasses,
-    hasTailwindClasses,
-    hasInlineStyles,
-    classes,
-  };
-}
-
 /**
  * Check DOM structure for common issues
  */
@@ -134,34 +115,6 @@ export function checkDOMStructure(container: HTMLElement): {
   };
 }
 
-/**
- * Check if component handles conditional rendering correctly
- */
-export function checkConditionalRendering(
-  baseProps: any,
-  conditionalProp: string,
-  conditionalValue: any
-): {
-  baseRender: ReturnType<typeof render>;
-  conditionalRender: ReturnType<typeof render>;
-  isDifferent: boolean;
-} {
-  const schema = { type: 'div', ...baseProps };
-  const conditionalSchema = { ...schema, [conditionalProp]: conditionalValue };
-
-  const baseRender = renderComponent(schema);
-  const conditionalRender = renderComponent(conditionalSchema);
-
-  const isDifferent = 
-    baseRender.container.innerHTML !== conditionalRender.container.innerHTML;
-
-  return {
-    baseRender,
-    conditionalRender,
-    isDifferent,
-  };
-}
-
 /**
  * Validate component registration
  */
@@ -172,7 +125,7 @@ export function validateComponentRegistration(componentType: string): {
   hasLabel: boolean;
   hasInputs: boolean;
   hasDefaultProps: boolean;
-  config: any;
+  config: ReturnType<typeof ComponentRegistry.getConfig>;
 } {
   const isRegistered = ComponentRegistry.has(componentType);
   const renderer = ComponentRegistry.get(componentType);
@@ -214,8 +167,12 @@ export function getAllDisplayIssues(container: HTMLElement): string[] {
       // This is a simplified check - in React, keys are not in the DOM
       // but we can check for duplicate content which might indicate missing keys
       const contents = Array.from(items).map(item => item.textContent);
-      const duplicates = contents.filter((item, index) => contents.indexOf(item) !== index);
-      if (duplicates.length > 0) {
+      const contentCounts = new Map<string, number>();
+      contents.forEach(content => {
+        contentCounts.set(content || '', (contentCounts.get(content || '') || 0) + 1);
+      });
+      const hasDuplicates = Array.from(contentCounts.values()).some(count => count > 1);
+      if (hasDuplicates) {
         issues.push(`Potential duplicate list items detected`);
       }
     }