@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/components/ui/accessibility-demo.d.ts

@@ -1,259 +0,0 @@
-interface AccessibilityDemoProps {
-  className?: string;
-}
-
-export const AccessibilityDemo: React.FC<AccessibilityDemoProps> = ({ className = '' }) => {
-  const [currentFocus, setCurrentFocus] = useState<string>('');
-  const [announcements, setAnnouncements] = useState<string[]>([]);
-  const [accessibilityConfig, setAccessibilityConfig] = useState(accessibilityManager.getConfig());
-  const [highContrastEnabled, setHighContrastEnabled] = useState(highContrastThemeManager.isHighContrastEnabled());
-  const [motionReduced, setMotionReduced] = useState(motionReductionManager.isMotionReduced());
-
-  useEffect(() => {
-    // Subscribe to accessibility changes
-    const unsubscribeAccessibility = accessibilityManager.subscribe(() => {
-      setAccessibilityConfig(accessibilityManager.getConfig());
-    });
-
-    // Update state periodically since some managers don't have subscribe methods
-    const interval = setInterval(() => {
-      setHighContrastEnabled(highContrastThemeManager.isHighContrastEnabled());
-      setMotionReduced(motionReductionManager.isMotionReduced());
-
-      const focusInfo = focusManager.getCurrentFocusInfo();
-      if (focusInfo.element) {
-        setCurrentFocus(focusInfo.element.textContent || focusInfo.element.tagName);
-      }
-    }, 1000);
-
-    return () => {
-      unsubscribeAccessibility();
-      clearInterval(interval);
-    };
-  }, []);
-
-  const addAnnouncement = (message: string) => {
-    setAnnouncements(prev => [message, ...prev.slice(0, 9)]);
-  };
-
-  const toggleHighContrast = () => {
-    if (highContrastEnabled) {
-      highContrastThemeManager.disable();
-      addAnnouncement('High contrast mode disabled');
-    } else {
-      highContrastThemeManager.enable();
-      addAnnouncement('High contrast mode enabled');
-    }
-  };
-
-  const toggleMotionReduction = () => {
-    if (motionReduced) {
-      motionReductionManager.disable();
-      addAnnouncement('Motion reduction disabled');
-    } else {
-      motionReductionManager.enable();
-      addAnnouncement('Motion reduction enabled');
-    }
-  };
-
-  const testScreenReaderAnnouncement = () => {
-    const message = 'This is a test announcement for screen readers';
-    screenReaderOptimizer.announce(message, 'normal');
-    addAnnouncement(`Announced: ${message}`);
-  };
-
-  const testFocusManagement = () => {
-    const container = document.getElementById('accessibility-demo-container');
-    if (container) {
-      // Focus management is already active by default
-      addAnnouncement('Focus management is active for this container');
-    }
-  };
-
-  const testAriaPatterns = () => {
-    const button = document.getElementById('test-aria-button');
-    if (button) {
-      const ariaProps = AriaPatternGenerator.generateAriaAttributes({
-        disabled: false,
-        readonly: false,
-        required: true,
-        invalid: false,
-        label: 'Test button for ARIA patterns',
-        describedby: 'button-description'
-      });
-
-      Object.entries(ariaProps).forEach(([key, value]) => {
-        if (value !== undefined) {
-          button.setAttribute(key, String(value));
-        }
-      });
-
-      addAnnouncement('ARIA patterns applied to test button');
-    }
-  };
-
-  return (
-    <div id="accessibility-demo-container" className={`accessibility-demo ${className} max-w-full overflow-hidden`}>
-      <Card className="mb-6">
-        <h2 className="text-2xl font-bold mb-4 break-words">Accessibility Features Demo</h2>
-        <p className="text-gray-600 mb-4 break-words">
-          This component demonstrates all the accessibility features implemented in the design system.
-        </p>
-
-        {/* Current Status */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h3 className="font-semibold mb-2">Current Focus</h3>
-            <p className="text-sm text-gray-600 break-words">{currentFocus || 'No focus'}</p>
-          </div>
-
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h3 className="font-semibold mb-2">High Contrast</h3>
-            <Badge variant={highContrastEnabled ? 'default' : 'secondary'}>
-              {highContrastEnabled ? 'Enabled' : 'Disabled'}
-            </Badge>
-          </div>
-
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <h3 className="font-semibold mb-2">Motion Reduction</h3>
-            <Badge variant={motionReduced ? 'destructive' : 'secondary'}>
-              {motionReduced ? 'Enabled' : 'Disabled'}
-            </Badge>
-          </div>
-        </div>
-
-        {/* Accessibility Controls */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-          <div className="min-w-0">
-            <h3 className="font-semibold mb-3 break-words">Accessibility Controls</h3>
-            <div className="space-y-3">
-              <Button onClick={toggleHighContrast} variant="outline" className="w-full">
-                {highContrastEnabled ? 'Disable' : 'Enable'} High Contrast
-              </Button>
-
-              <Button onClick={toggleMotionReduction} variant="outline" className="w-full">
-                {motionReduced ? 'Disable' : 'Enable'} Motion Reduction
-              </Button>
-
-              <Button onClick={testScreenReaderAnnouncement} variant="outline" className="w-full">
-                Test Screen Reader Announcement
-              </Button>
-
-              <Button onClick={testFocusManagement} variant="outline" className="w-full">
-                Activate Focus Management
-              </Button>
-
-              <Button onClick={testAriaPatterns} variant="outline" className="w-full">
-                Test ARIA Patterns
-              </Button>
-            </div>
-          </div>
-
-          <div className="min-w-0">
-            <h3 className="font-semibold mb-3 break-words">Test Interactive Elements</h3>
-            <div className="space-y-3">
-              <Input
-                placeholder="Test input field"
-                aria-label="Test input for accessibility"
-                aria-describedby="input-description"
-              />
-              <p id="input-description" className="text-sm text-gray-500 break-words">
-                This input field has proper ARIA labels and descriptions.
-              </p>
-
-              <Button
-                id="test-aria-button"
-                variant="default"
-                aria-describedby="button-description"
-              >
-                Test Button
-              </Button>
-              <p id="button-description" className="text-sm text-gray-500 break-words">
-                This button will have ARIA patterns applied when you click the test button above.
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Accessibility Configuration */}
-        <div className="mb-6">
-          <h3 className="font-semibold mb-3">Current Accessibility Configuration</h3>
-          <div className="bg-blue-50 p-4 rounded-lg border-2 border-blue-300">
-            <div className="text-sm text-blue-800">
-              <p className="mb-2"><strong>High Contrast:</strong> {accessibilityConfig.highContrast ? '✅ Enabled' : '❌ Disabled'}</p>
-              <p className="mb-2"><strong>Reduced Motion:</strong> {accessibilityConfig.reducedMotion ? '✅ Enabled' : '❌ Disabled'}</p>
-              <p className="mb-2"><strong>Focus Visible:</strong> {accessibilityConfig.focusVisible ? '✅ Enabled' : '❌ Disabled'}</p>
-              <p className="mb-2"><strong>Contrast Target:</strong> {accessibilityConfig.contrast.target}:1 ratio</p>
-              <p className="mb-0"><strong>Touch Target Size:</strong> {accessibilityConfig.spacing.touchTarget}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Recent Announcements */}
-        <div>
-          <h3 className="font-semibold mb-3">Recent Screen Reader Announcements</h3>
-          <div className="bg-gray-50 p-4 rounded-lg max-h-40 overflow-y-auto">
-            {announcements.length === 0 ? (
-              <p className="text-gray-500 text-sm">No announcements yet. Use the controls above to test.</p>
-            ) : (
-              <div className="space-y-2">
-                {announcements.map((announcement, index) => (
-                  <div key={index} className="text-sm text-gray-700 p-2 bg-white rounded border break-words">
-                    {announcement}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </Card>
-
-      {/* Accessibility Information */}
-      <Card>
-        <h3 className="text-xl font-semibold mb-4 break-words">Accessibility Features Overview</h3>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">High Contrast Support</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Automatic system preference detection</li>
-              <li className="break-words">• Enhanced color palettes for better visibility</li>
-              <li className="break-words">• WCAG AAA contrast ratio compliance</li>
-              <li className="break-words">• Border and text emphasis options</li>
-            </ul>
-          </div>
-
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">Motion Reduction</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Respects user's motion preferences</li>
-              <li className="break-words">• Reduces animation and transition durations</li>
-              <li className="break-words">• Maintains essential motion for functionality</li>
-              <li className="break-words">• Customizable reduction levels</li>
-            </ul>
-          </div>
-
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">Focus Management</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Comprehensive focus tracking</li>
-              <li className="break-words">• Focus trap implementation</li>
-              <li className="break-words">• Focus restoration and history</li>
-              <li className="break-words">• Keyboard navigation support</li>
-            </ul>
-          </div>
-
-          <div className="min-w-0">
-            <h4 className="font-semibold mb-2 break-words">Screen Reader Optimization</h4>
-            <ul className="text-sm text-gray-600 space-y-1">
-              <li className="break-words">• Live region announcements</li>
-              <li className="break-words">• Priority-based messaging</li>
-              <li className="break-words">• Context-aware information</li>
-              <li className="break-words">• Comprehensive ARIA support</li>
-            </ul>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-};