@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/components/ui/accessibility-demo.js

@@ -0,0 +1,265 @@
+import React, { useState, useEffect } from 'react';
+import { Card } from './card';
+import { Button } from './button';
+import { Badge } from './badge';
+import { Input } from './input';
+import { accessibilityManager } from '../../themes/accessibility';
+import { screenReaderOptimizer } from '../../themes/screen-reader';
+import { highContrastThemeManager } from '../../themes/high-contrast';
+import { focusManager } from '../../themes/focus-management';
+import { motionReductionManager } from '../../themes/motion-reduction';
+import { ARIAUtils as AriaPatternGenerator } from '../../themes/aria-patterns';
+
+interface AccessibilityDemoProps {
+  className?;
+}
+
+export const AccessibilityDemo= ({ 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) => {
+    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}`);
+  };
+
+  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,
+        readonly,
+        required,
+        invalid,
+        label,
+        describedby});
+      
+      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="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' }>
+              {highContrastEnabled ? 'Enabled' }
+            </Badge>
+          </div>
+          
+          <div className="p-4 bg-gray-50 rounded-lg">
+            <h3 className="font-semibold mb-2">Motion Reduction</h3>
+            <Badge variant={motionReduced ? 'destructive' }>
+              {motionReduced ? 'Enabled' }
+            </Badge>
+          </div>
+        </div>
+
+        {/* Accessibility Controls */}
+        <div className="grid grid-cols-1 lg="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' } High Contrast
+              </Button>
+              
+              <Button onClick={toggleMotionReduction} variant="outline" className="w-full">
+                {motionReduced ? 'Disable' } 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}</p>
+              <p className="mb-2"><strong>Reduced Motion}</p>
+              <p className="mb-2"><strong>Focus Visible}</p>
+              <p className="mb-2"><strong>Contrast Target}="mb-0"><strong>Touch Target Size}</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>
+            ) ="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="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>
+  );
+};