accessibility-widgets 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessibility-widgets",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A comprehensive, lightweight accessibility widget that enhances web accessibility for all users. Provides multiple accessibility features including screen reader support, voice control, high contrast mode, and more.",
   "main": "widget.js",
   "scripts": {

package/widget.js

@@ -209,7 +209,7 @@ const styles = `
     width: ${WIDGET_CONFIG.widgetWidth};
     height: 100vh;
     overflow-y: auto;
-    background-color: ${WIDGET_CONFIG.colors.secondary};
+    background-color: #e2e2e2;
     padding: 0;
     display: none;
     font-family: ${WIDGET_CONFIG.typography.fontFamily};
@@ -222,25 +222,25 @@ const styles = `
     align-items: center;
     padding: ${WIDGET_CONFIG.menu.optionPadding};
     width: 100%;
-    background-color: ${WIDGET_CONFIG.colors.border};
-    color: ${WIDGET_CONFIG.colors.text};
-    border: none;
+    background-color: #ffffff;
+    color: ${WIDGET_CONFIG.colors.primary};
+    border: 2px solid #ffffff;
     cursor: pointer;
     border-radius: ${WIDGET_CONFIG.menu.borderRadius};
-    transition: background-color ${WIDGET_CONFIG.animation.transition};
+    transition: background-color ${WIDGET_CONFIG.animation.transition}, border-color ${WIDGET_CONFIG.animation.transition};
     line-height: ${WIDGET_CONFIG.typography.lineHeight} !important;
   }
   .snn-accessibility-option:hover {
-    background-color: ${WIDGET_CONFIG.colors.borderHover};
+    border-color: ${WIDGET_CONFIG.colors.primary};
   }
   .snn-accessibility-option.active {
-    background-color: ${WIDGET_CONFIG.colors.primary};
-    color: ${WIDGET_CONFIG.colors.textLight};
+    border-color: ${WIDGET_CONFIG.colors.primary};
   }
   .snn-icon {
     margin-right: 12px;
     width: ${WIDGET_CONFIG.button.iconSize};
     height: ${WIDGET_CONFIG.button.iconSize};
+    fill: ${WIDGET_CONFIG.colors.primary};
   }
   .snn-icon svg {
     width: 100%;
@@ -280,7 +280,7 @@ const styles = `
     align-items: center;
     margin-bottom: 20px;
     padding: 10px;
-    background: #000000;
+    background: ${WIDGET_CONFIG.colors.primary};
     height: ${WIDGET_CONFIG.menu.headerHeight};
     position: sticky;
     top: 0;
@@ -1517,101 +1517,3 @@ if (document.readyState === 'loading') {
   initAccessibilityWidget();
 }
 
-/*
-===========================================
-  WIDGET FEATURES SUMMARY:
-  
-  Core Features:
-  - High contrast mode
-  - Text size adjustment
-  - Text spacing modification
-  - Animation pausing
-  - Image hiding
-  - Dyslexia-friendly font
-  - Cursor size adjustment
-  - Line height adjustment
-  - Text alignment
-  
-  Advanced Features:
-  - Screen reader with speech synthesis
-  - Voice control with speech recognition
-  - Reading mode
-  - Enhanced focus indicators
-  - Reduced motion mode
-  - Font selection (Arial, Times, Verdana)
-  - Color blindness filters (Protanopia, Deuteranopia, Tritanopia, Grayscale)
-  
-  Technical Features:
-  - Persistent settings via localStorage
-  - Full keyboard navigation
-  - ARIA compliance
-  - Error handling for browser compatibility
-  - Performance optimization with DOM caching
-  - Single file deployment
-  
-  Configuration Options:
-  - Customizable language/text strings
-  - Customizable voice command strings
-  - Configurable grid layout (columns and gap)
-  - All widget styling and positioning options
-  - Feature enable/disable toggles
-  
-===========================================
-
-  CONFIGURATION EXAMPLE:
-  
-  To customize the widget, define window.ACCESSIBILITY_WIDGET_CONFIG 
-  before loading the widget script:
-  
-  <script>
-  window.ACCESSIBILITY_WIDGET_CONFIG = {
-    // Customize language/text strings
-    lang: {
-      accessibilityMenu: 'Menu de Accesibilidad',
-      screenReader: 'Lector de Pantalla',
-      biggerText: 'Texto Más Grande',
-      highContrast: 'Alto Contraste',
-      // ... customize any text string
-    },
-    
-    // Customize voice commands for different languages
-    voiceCommands: {
-      showMenu: ['mostrar menú', 'abrir menú', 'menú de accesibilidad'],
-      highContrast: ['alto contraste'],
-      biggerText: ['texto más grande', 'texto grande'],
-      textSpacing: ['espaciado de texto'],
-      pauseAnimations: ['pausar animaciones', 'detener animaciones'],
-      hideImages: ['ocultar imágenes'],
-      dyslexiaFont: ['fuente para dislexia', 'fuente dislexia'],
-      biggerCursor: ['cursor más grande', 'cursor grande'],
-      lineHeight: ['altura de línea'],
-      textAlign: ['alinear texto', 'alineación de texto'],
-      screenReader: ['lector de pantalla'],
-      voiceControl: ['comando de voz', 'control de voz'],
-      resetAll: ['reiniciar todo', 'resetear todo']
-    },
-    
-    // Customize grid layout
-    gridLayout: {
-      columns: '1fr 1fr 1fr', // 3-column layout
-      gap: '15px' // Custom gap between buttons
-    },
-    
-    // Other customizable options
-    widgetWidth: '500px',
-    widgetPosition: {
-      side: 'left',
-      left: '30px',
-      bottom: '30px'
-    },
-    colors: {
-      primary: '#2196F3',
-      primaryHover: '#1976D2',
-      // ... customize any color
-    }
-  };
-  </script>
-  <script src="widget.js"></script>
-  
-===========================================
-*/