accessibility-widgets 1.0.6 → 2.0.2

package/widget.js

@@ -1,10 +1,396 @@
-/*
+/* 
 ===========================================
   ACCESSIBILITY WIDGET
-  A comprehensive web accessibility tool
 ===========================================
 */
 
+// ===========================================
+// TRANSLATIONS
+// ===========================================
+
+const TRANSLATIONS = {
+  en: {
+    accessibilityMenu: 'Accessibility Menu',
+    closeAccessibilityMenu: 'Close Accessibility Menu',
+    accessibilityTools: 'Accessibility Tools',
+    resetAllSettings: 'Reset All Settings',
+    screenReader: 'Screen Reader',
+    voiceCommand: 'Voice Command',
+    textSpacing: 'Text Spacing',
+    pauseAnimations: 'Pause Animations',
+    hideImages: 'Hide Images',
+    dyslexiaFriendly: 'Dyslexia Friendly',
+    biggerCursor: 'Bigger Cursor',
+    lineHeight: 'Line Height',
+    fontSelection: 'Font Selection',
+    colorFilter: 'Color Filter',
+    textAlign: 'Text Align',
+    textSize: 'Text Size',
+    highContrast: 'High Contrast',
+    defaultFont: 'Default Font',
+    noFilter: 'No Filter',
+    default: 'Default',
+    screenReaderOn: 'Screen reader on',
+    screenReaderOff: 'Screen reader off',
+    voiceControlActivated: 'Voice control activated',
+    notSupportedBrowser: 'is not supported in this browser',
+    close: 'Close',
+    reset: 'Reset',
+    saturation: 'Saturation',
+    selectLanguage: 'Select Language'
+  },
+  de: {
+    accessibilityMenu: 'Barrierefreiheitsmenü',
+    closeAccessibilityMenu: 'Barrierefreiheitsmenü schließen',
+    accessibilityTools: 'Barrierefreiheitswerkzeuge',
+    resetAllSettings: 'Alle Einstellungen zurücksetzen',
+    screenReader: 'Screenreader',
+    voiceCommand: 'Sprachbefehl',
+    textSpacing: 'Textabstand',
+    pauseAnimations: 'Animationen pausieren',
+    hideImages: 'Bilder ausblenden',
+    dyslexiaFriendly: 'Legasthenie-freundlich',
+    biggerCursor: 'Größerer Cursor',
+    lineHeight: 'Zeilenhöhe',
+    fontSelection: 'Schriftauswahl',
+    colorFilter: 'Farbfilter',
+    textAlign: 'Textausrichtung',
+    textSize: 'Textgröße',
+    highContrast: 'Hoher Kontrast',
+    defaultFont: 'Standardschrift',
+    noFilter: 'Kein Filter',
+    default: 'Standard',
+    screenReaderOn: 'Screenreader ein',
+    screenReaderOff: 'Screenreader aus',
+    voiceControlActivated: 'Sprachsteuerung aktiviert',
+    notSupportedBrowser: 'wird in diesem Browser nicht unterstützt',
+    close: 'Schließen',
+    reset: 'Zurücksetzen',
+    saturation: 'Sättigung',
+    selectLanguage: 'Sprache wählen'
+  },
+  es: {
+    accessibilityMenu: 'Menú de Accesibilidad',
+    closeAccessibilityMenu: 'Cerrar Menú de Accesibilidad',
+    accessibilityTools: 'Herramientas de Accesibilidad',
+    resetAllSettings: 'Restablecer Todas las Configuraciones',
+    screenReader: 'Lector de Pantalla',
+    voiceCommand: 'Comando de Voz',
+    textSpacing: 'Espaciado de Texto',
+    pauseAnimations: 'Pausar Animaciones',
+    hideImages: 'Ocultar Imágenes',
+    dyslexiaFriendly: 'Amigable para Dislexia',
+    biggerCursor: 'Cursor Más Grande',
+    lineHeight: 'Altura de Línea',
+    fontSelection: 'Selección de Fuente',
+    colorFilter: 'Filtro de Color',
+    textAlign: 'Alineación de Texto',
+    textSize: 'Tamaño de Texto',
+    highContrast: 'Alto Contraste',
+    defaultFont: 'Fuente Predeterminada',
+    noFilter: 'Sin Filtro',
+    default: 'Predeterminado',
+    screenReaderOn: 'Lector de pantalla activado',
+    screenReaderOff: 'Lector de pantalla desactivado',
+    voiceControlActivated: 'Control de voz activado',
+    notSupportedBrowser: 'no es compatible con este navegador',
+    close: 'Cerrar',
+    reset: 'Restablecer',
+    saturation: 'Saturación',
+    selectLanguage: 'Seleccionar Idioma'
+  },
+  it: {
+    accessibilityMenu: 'Menu Accessibilità',
+    closeAccessibilityMenu: 'Chiudi Menu Accessibilità',
+    accessibilityTools: 'Strumenti di Accessibilità',
+    resetAllSettings: 'Ripristina Tutte le Impostazioni',
+    screenReader: 'Lettore Schermo',
+    voiceCommand: 'Comando Vocale',
+    textSpacing: 'Spaziatura Testo',
+    pauseAnimations: 'Pausa Animazioni',
+    hideImages: 'Nascondi Immagini',
+    dyslexiaFriendly: 'Adatto alla Dislessia',
+    biggerCursor: 'Cursore Più Grande',
+    lineHeight: 'Altezza Linea',
+    fontSelection: 'Selezione Font',
+    colorFilter: 'Filtro Colore',
+    textAlign: 'Allineamento Testo',
+    textSize: 'Dimensione Testo',
+    highContrast: 'Alto Contrasto',
+    defaultFont: 'Font Predefinito',
+    noFilter: 'Nessun Filtro',
+    default: 'Predefinito',
+    screenReaderOn: 'Lettore schermo attivo',
+    screenReaderOff: 'Lettore schermo disattivo',
+    voiceControlActivated: 'Controllo vocale attivato',
+    notSupportedBrowser: 'non è supportato in questo browser',
+    close: 'Chiudi',
+    reset: 'Ripristina',
+    saturation: 'Saturazione',
+    selectLanguage: 'Seleziona Lingua'
+  },
+  fr: {
+    accessibilityMenu: 'Menu Accessibilité',
+    closeAccessibilityMenu: 'Fermer le Menu Accessibilité',
+    accessibilityTools: 'Outils d\'Accessibilité',
+    resetAllSettings: 'Réinitialiser Tous les Paramètres',
+    screenReader: 'Lecteur d\'Écran',
+    voiceCommand: 'Commande Vocale',
+    textSpacing: 'Espacement du Texte',
+    pauseAnimations: 'Mettre en Pause les Animations',
+    hideImages: 'Masquer les Images',
+    dyslexiaFriendly: 'Convivial pour la Dyslexie',
+    biggerCursor: 'Curseur Plus Grand',
+    lineHeight: 'Hauteur de Ligne',
+    fontSelection: 'Sélection de Police',
+    colorFilter: 'Filtre de Couleur',
+    textAlign: 'Alignement du Texte',
+    textSize: 'Taille du Texte',
+    highContrast: 'Contraste Élevé',
+    defaultFont: 'Police par Défaut',
+    noFilter: 'Aucun Filtre',
+    default: 'Par Défaut',
+    screenReaderOn: 'Lecteur d\'écran activé',
+    screenReaderOff: 'Lecteur d\'écran désactivé',
+    voiceControlActivated: 'Contrôle vocal activé',
+    notSupportedBrowser: 'n\'est pas pris en charge dans ce navigateur',
+    close: 'Fermer',
+    reset: 'Réinitialiser',
+    saturation: 'Saturation',
+    selectLanguage: 'Sélectionner la Langue'
+  },
+  ru: {
+    accessibilityMenu: 'Меню Доступности',
+    closeAccessibilityMenu: 'Закрыть Меню Доступности',
+    accessibilityTools: 'Инструменты Доступности',
+    resetAllSettings: 'Сбросить Все Настройки',
+    screenReader: 'Программа Чтения с Экрана',
+    voiceCommand: 'Голосовая Команда',
+    textSpacing: 'Межбуквенный Интервал',
+    pauseAnimations: 'Приостановить Анимацию',
+    hideImages: 'Скрыть Изображения',
+    dyslexiaFriendly: 'Для Дислексии',
+    biggerCursor: 'Увеличенный Курсор',
+    lineHeight: 'Высота Строки',
+    fontSelection: 'Выбор Шрифта',
+    colorFilter: 'Цветовой Фильтр',
+    textAlign: 'Выравнивание Текста',
+    textSize: 'Размер Текста',
+    highContrast: 'Высокая Контрастность',
+    defaultFont: 'Шрифт по Умолчанию',
+    noFilter: 'Без Фильтра',
+    default: 'По Умолчанию',
+    screenReaderOn: 'Программа чтения включена',
+    screenReaderOff: 'Программа чтения выключена',
+    voiceControlActivated: 'Голосовое управление активировано',
+    notSupportedBrowser: 'не поддерживается в этом браузере',
+    close: 'Закрыть',
+    reset: 'Сбросить',
+    saturation: 'Насыщенность',
+    selectLanguage: 'Выберите Язык'
+  },
+  tr: {
+    accessibilityMenu: 'Erişilebilirlik Menüsü',
+    closeAccessibilityMenu: 'Erişilebilirlik Menüsünü Kapat',
+    accessibilityTools: 'Erişilebilirlik Araçları',
+    resetAllSettings: 'Tüm Ayarları Sıfırla',
+    screenReader: 'Ekran Okuyucu',
+    voiceCommand: 'Sesli Komut',
+    textSpacing: 'Metin Aralığı',
+    pauseAnimations: 'Animasyonları Duraklat',
+    hideImages: 'Resimleri Gizle',
+    dyslexiaFriendly: 'Disleksi Dostu',
+    biggerCursor: 'Daha Büyük İmleç',
+    lineHeight: 'Satır Yüksekliği',
+    fontSelection: 'Yazı Tipi Seçimi',
+    colorFilter: 'Renk Filtresi',
+    textAlign: 'Metin Hizalama',
+    textSize: 'Metin Boyutu',
+    highContrast: 'Yüksek Kontrast',
+    defaultFont: 'Varsayılan Yazı Tipi',
+    noFilter: 'Filtre Yok',
+    default: 'Varsayılan',
+    screenReaderOn: 'Ekran okuyucu açık',
+    screenReaderOff: 'Ekran okuyucu kapalı',
+    voiceControlActivated: 'Sesli kontrol etkinleştirildi',
+    notSupportedBrowser: 'bu tarayıcıda desteklenmiyor',
+    close: 'Kapat',
+    reset: 'Sıfırla',
+    saturation: 'Doygunluk',
+    selectLanguage: 'Dil Seçin'
+  },
+  ar: {
+    accessibilityMenu: 'قائمة إمكانية الوصول',
+    closeAccessibilityMenu: 'إغلاق قائمة إمكانية الوصول',
+    accessibilityTools: 'أدوات إمكانية الوصول',
+    resetAllSettings: 'إعادة تعيين جميع الإعدادات',
+    screenReader: 'قارئ الشاشة',
+    voiceCommand: 'الأمر الصوتي',
+    textSpacing: 'تباعد النص',
+    pauseAnimations: 'إيقاف الرسوم المتحركة مؤقتًا',
+    hideImages: 'إخفاء الصور',
+    dyslexiaFriendly: 'صديق لعسر القراءة',
+    biggerCursor: 'مؤشر أكبر',
+    lineHeight: 'ارتفاع الخط',
+    fontSelection: 'اختيار الخط',
+    colorFilter: 'مرشح الألوان',
+    textAlign: 'محاذاة النص',
+    textSize: 'حجم النص',
+    highContrast: 'تباين عالي',
+    defaultFont: 'الخط الافتراضي',
+    noFilter: 'بدون مرشح',
+    default: 'افتراضي',
+    screenReaderOn: 'قارئ الشاشة مفعّل',
+    screenReaderOff: 'قارئ الشاشة معطل',
+    voiceControlActivated: 'تم تفعيل التحكم الصوتي',
+    notSupportedBrowser: 'غير مدعوم في هذا المتصفح',
+    close: 'إغلاق',
+    reset: 'إعادة تعيين',
+    saturation: 'التشبع',
+    selectLanguage: 'اختر اللغة'
+  },
+  hi: {
+    accessibilityMenu: 'पहुँच मेनू',
+    closeAccessibilityMenu: 'पहुँच मेनू बंद करें',
+    accessibilityTools: 'पहुँच उपकरण',
+    resetAllSettings: 'सभी सेटिंग्स रीसेट करें',
+    screenReader: 'स्क्रीन रीडर',
+    voiceCommand: 'वॉयस कमांड',
+    textSpacing: 'टेक्स्ट स्पेसिंग',
+    pauseAnimations: 'एनिमेशन रोकें',
+    hideImages: 'चित्र छिपाएँ',
+    dyslexiaFriendly: 'डिस्लेक्सिया के अनुकूल',
+    biggerCursor: 'बड़ा कर्सर',
+    lineHeight: 'लाइन की ऊँचाई',
+    fontSelection: 'फ़ॉन्ट चयन',
+    colorFilter: 'रंग फ़िल्टर',
+    textAlign: 'टेक्स्ट संरेखण',
+    textSize: 'टेक्स्ट का आकार',
+    highContrast: 'उच्च कंट्रास्ट',
+    defaultFont: 'डिफ़ॉल्ट फ़ॉन्ट',
+    noFilter: 'कोई फ़िल्टर नहीं',
+    default: 'डिफ़ॉल्ट',
+    screenReaderOn: 'स्क्रीन रीडर चालू',
+    screenReaderOff: 'स्क्रीन रीडर बंद',
+    voiceControlActivated: 'वॉयस नियंत्रण सक्रिय',
+    notSupportedBrowser: 'इस ब्राउज़र में समर्थित नहीं है',
+    close: 'बंद करें',
+    reset: 'रीसेट करें',
+    saturation: 'संतृप्ति',
+    selectLanguage: 'भाषा चुनें'
+  },
+  'zh-cn': {
+    accessibilityMenu: '辅助功能菜单',
+    closeAccessibilityMenu: '关闭辅助功能菜单',
+    accessibilityTools: '辅助功能工具',
+    resetAllSettings: '重置所有设置',
+    screenReader: '屏幕阅读器',
+    voiceCommand: '语音命令',
+    textSpacing: '文本间距',
+    pauseAnimations: '暂停动画',
+    hideImages: '隐藏图片',
+    dyslexiaFriendly: '阅读障碍友好',
+    biggerCursor: '更大的光标',
+    lineHeight: '行高',
+    fontSelection: '字体选择',
+    colorFilter: '颜色滤镜',
+    textAlign: '文本对齐',
+    textSize: '文本大小',
+    highContrast: '高对比度',
+    defaultFont: '默认字体',
+    noFilter: '无滤镜',
+    default: '默认',
+    screenReaderOn: '屏幕阅读器已开启',
+    screenReaderOff: '屏幕阅读器已关闭',
+    voiceControlActivated: '语音控制已激活',
+    notSupportedBrowser: '此浏览器不支持',
+    close: '关闭',
+    reset: '重置',
+    saturation: '饱和度',
+    selectLanguage: '选择语言'
+  },
+  jp: {
+    accessibilityMenu: 'アクセシビリティメニュー',
+    closeAccessibilityMenu: 'アクセシビリティメニューを閉じる',
+    accessibilityTools: 'アクセシビリティツール',
+    resetAllSettings: 'すべての設定をリセット',
+    screenReader: 'スクリーンリーダー',
+    voiceCommand: '音声コマンド',
+    textSpacing: 'テキスト間隔',
+    pauseAnimations: 'アニメーション一時停止',
+    hideImages: '画像を非表示',
+    dyslexiaFriendly: 'ディスレクシア対応',
+    biggerCursor: '大きいカーソル',
+    lineHeight: '行の高さ',
+    fontSelection: 'フォント選択',
+    colorFilter: 'カラーフィルター',
+    textAlign: 'テキスト配置',
+    textSize: 'テキストサイズ',
+    highContrast: 'ハイコントラスト',
+    defaultFont: 'デフォルトフォント',
+    noFilter: 'フィルターなし',
+    default: 'デフォルト',
+    screenReaderOn: 'スクリーンリーダーがオン',
+    screenReaderOff: 'スクリーンリーダーがオフ',
+    voiceControlActivated: '音声制御が有効',
+    notSupportedBrowser: 'このブラウザではサポートされていません',
+    close: '閉じる',
+    reset: 'リセット',
+    saturation: '彩度',
+    selectLanguage: '言語を選択'
+  }
+};
+
+// Language detection and management
+let currentLanguage = 'en';
+
+function detectBrowserLanguage() {
+  const browserLang = (navigator.language || navigator.userLanguage).toLowerCase();
+  
+  // Direct match
+  if (TRANSLATIONS[browserLang]) {
+    return browserLang;
+  }
+  
+  // Try language code only (e.g., 'en' from 'en-US')
+  const langCode = browserLang.split('-')[0];
+  if (TRANSLATIONS[langCode]) {
+    return langCode;
+  }
+  
+  // Special case for Chinese
+  if (browserLang.includes('zh')) {
+    if (browserLang.includes('cn') || browserLang.includes('hans')) {
+      return 'zh-cn';
+    }
+  }
+  
+  // Default to English
+  return 'en';
+}
+
+function setLanguage(lang) {
+  if (TRANSLATIONS[lang]) {
+    currentLanguage = lang;
+    localStorage.setItem('accessibilityWidgetLanguage', lang);
+    return true;
+  }
+  return false;
+}
+
+function getTranslation(key) {
+  return TRANSLATIONS[currentLanguage][key] || TRANSLATIONS['en'][key] || key;
+}
+
+// Initialize language from localStorage or detect from browser
+const savedLanguage = localStorage.getItem('accessibilityWidgetLanguage');
+if (savedLanguage && TRANSLATIONS[savedLanguage]) {
+  currentLanguage = savedLanguage;
+} else {
+  currentLanguage = detectBrowserLanguage();
+  localStorage.setItem('accessibilityWidgetLanguage', currentLanguage);
+}
+
 // ===========================================
 // CONFIGURATION VARIABLES
 // ===========================================
@@ -14,21 +400,20 @@ const DEFAULT_WIDGET_CONFIG = {
   // Core Features
   enableHighContrast: true,
   enableBiggerText: true,
-  enableTextSpacing: true,
-  enablePauseAnimations: true,
+  enableTextSpacing: true, // Now has 3 levels
+  enablePauseAnimations: true, // Enhanced to include reduced motion features
   enableHideImages: true,
   enableDyslexiaFont: true,
   enableBiggerCursor: true,
-  enableLineHeight: true,
+  enableLineHeight: true, // Now has 3 levels (2em, 3em, 4em)
   enableTextAlign: true,
-  
+
   // Advanced Features
   enableScreenReader: true,
   enableVoiceControl: true,
-  enableReducedMotion: true,
   enableFontSelection: true,
   enableColorFilter: true,
-  
+
   // Widget Styling
   widgetWidth: '440px',
   widgetPosition: {
@@ -37,21 +422,16 @@ const DEFAULT_WIDGET_CONFIG = {
     left: '20px',
     bottom: '20px'
   },
-  
+
   // Colors
   colors: {
-    primary: '#000000',
-    primaryHover: '#00bfff',
-    secondary: '#f9f9f9',
-    text: '#333',
-    textLight: '#fff',
-    border: '#e6e6e6',
-    borderHover: '#d4d4d4',
-    shadow: 'rgba(0, 0, 0, 0.2)',
-    focus: '#ff6b35',
-    focusGlow: 'rgba(255, 107, 53, 0.3)'
+    primary: '#1663d7',            // Header bg, main button bg, active border, close hover bg
+    secondary: '#ffffff',         // Main button icon color
+    optionBg: '#ffffff',         // Option button background
+    optionText: '#333333',       // Option button text color
+    optionIcon: '#000000'         // Option button icon color
   },
-  
+
   // Button styling
   button: {
     size: '55px',
@@ -59,34 +439,34 @@ const DEFAULT_WIDGET_CONFIG = {
     iconSize: '40px',
     shadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
   },
-  
+
   // Menu styling
   menu: {
-    headerHeight: '55px',
+    headerHeight: '70px',
     padding: '0 10px 10px 10px',
     optionPadding: '20px 10px',
     optionMargin: '10px',
     borderRadius: '8px',
     fontSize: '16px',
-    titleFontSize: '22px',
+    titleFontSize: '16px',
     closeButtonSize: '44px'
   },
-  
+
   // Typography
   typography: {
     fontFamily: 'Arial, sans-serif',
-    fontSize: '16px',
+    fontSize: '17px',
     titleFontSize: '22px',
-    titleFontWeight: '500',
+    titleFontWeight: '700',
     lineHeight: '1'
   },
-  
+
   // Animation
   animation: {
     transition: '0.2s',
     hoverScale: '1.05'
   },
-  
+
   // Language/Text Configuration
   lang: {
     accessibilityMenu: 'Accessibility Menu',
@@ -101,7 +481,6 @@ const DEFAULT_WIDGET_CONFIG = {
     dyslexiaFriendly: 'Dyslexia Friendly',
     biggerCursor: 'Bigger Cursor',
     lineHeight: 'Line Height',
-    reducedMotion: 'Reduced Motion',
     fontSelection: 'Font Selection',
     colorFilter: 'Color Filter',
     textAlign: 'Text Align',
@@ -114,7 +493,8 @@ const DEFAULT_WIDGET_CONFIG = {
     screenReaderOff: 'Screen reader off',
     voiceControlActivated: 'Voice control activated',
     notSupportedBrowser: 'is not supported in this browser',
-    close: 'Close'
+    close: 'Close',
+    reset: 'Reset'
   },
 
   // Voice Command Configuration - Developers can customize commands for different languages
@@ -136,7 +516,7 @@ const DEFAULT_WIDGET_CONFIG = {
 
   // Grid Layout Configuration
   gridLayout: {
-    columns: '1fr 1fr', // Default 2-column layout (can be changed to '1fr 1fr 1fr' for 3 columns, etc.)
+    columns: '1fr 1fr', // Default 2-column layout
     gap: '10px' // Gap between grid items
   }
 };
@@ -144,9 +524,9 @@ const DEFAULT_WIDGET_CONFIG = {
 // Function to deep merge user configuration with defaults
 function mergeConfigs(defaultConfig, userConfig) {
   const result = { ...defaultConfig };
-  
+
   if (!userConfig) return result;
-  
+
   for (const key in userConfig) {
     if (userConfig.hasOwnProperty(key)) {
       if (typeof userConfig[key] === 'object' && userConfig[key] !== null && !Array.isArray(userConfig[key])) {
@@ -156,26 +536,38 @@ function mergeConfigs(defaultConfig, userConfig) {
       }
     }
   }
-  
+
   return result;
 }
 
 // Merge user configuration with defaults
-// Users can define window.ACCESSIBILITY_WIDGET_CONFIG before loading this script
 const WIDGET_CONFIG = mergeConfigs(DEFAULT_WIDGET_CONFIG, window.ACCESSIBILITY_WIDGET_CONFIG || {});
 
 // ===========================================
 // STYLES & VISUAL ASSETS
 // ===========================================
 
-// Generate styles using configuration variables
-const styles = `
+// Widget styles (will go inside Shadow DOM - NOT affected by page styles or accessibility features)
+const widgetStyles = `
+  :host {
+    all: initial;
+    font-family: ${WIDGET_CONFIG.typography.fontFamily};
+  }
+  
+  * {
+    box-sizing: border-box;
+  }
+  
   #snn-accessibility-fixed-button {
     position: fixed !important;
     ${WIDGET_CONFIG.widgetPosition.side}: ${WIDGET_CONFIG.widgetPosition[WIDGET_CONFIG.widgetPosition.side]} !important;
     bottom: ${WIDGET_CONFIG.widgetPosition.bottom} !important;
     z-index: 9999;
+    background:${WIDGET_CONFIG.colors.primary};
+    padding:5px;
+    border-radius:100%;
   }
+  
   #snn-accessibility-button {
     background: ${WIDGET_CONFIG.colors.primary};
     border: none;
@@ -188,78 +580,130 @@ const styles = `
     display: flex;
     justify-content: center;
     align-items: center;
+    border:solid 4px white;
   }
+  
   #snn-accessibility-button:hover {
     transform: scale(${WIDGET_CONFIG.animation.hoverScale});
   }
+  
   #snn-accessibility-button:focus {
-    outline: 2px solid ${WIDGET_CONFIG.colors.textLight};
+    outline: 2px solid ${WIDGET_CONFIG.colors.secondary};
     outline-offset: 2px;
   }
+  
   #snn-accessibility-button svg {
     width: ${WIDGET_CONFIG.button.iconSize};
     height: ${WIDGET_CONFIG.button.iconSize};
-    fill: ${WIDGET_CONFIG.colors.textLight};
+    fill: ${WIDGET_CONFIG.colors.secondary};
     pointer-events: none;
   }
+  
   #snn-accessibility-menu {
     position: fixed;
     top: 0;
     ${WIDGET_CONFIG.widgetPosition.side}: 0;
-    width: ${WIDGET_CONFIG.widgetWidth};
+    max-width: ${WIDGET_CONFIG.widgetWidth};
+    width:100%;
     height: 100vh;
     overflow-y: auto;
-    background-color: ${WIDGET_CONFIG.colors.secondary};
+    background-color: #e2e2e2;
     padding: 0;
     display: none;
     font-family: ${WIDGET_CONFIG.typography.fontFamily};
     z-index: 999999;
     scrollbar-width: thin;
+    line-height:1 !important;
   }
+  
   .snn-accessibility-option {
     font-size: ${WIDGET_CONFIG.menu.fontSize};
     display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: ${WIDGET_CONFIG.menu.optionPadding};
+    justify-content: space-around;
+    padding: 5px;
     width: 100%;
-    background-color: ${WIDGET_CONFIG.colors.border};
-    color: ${WIDGET_CONFIG.colors.text};
-    border: none;
+    background-color: ${WIDGET_CONFIG.colors.optionBg};
+    color: ${WIDGET_CONFIG.colors.optionText};
+    border: 3px solid ${WIDGET_CONFIG.colors.optionBg};
     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;
+    gap: 5px;
+    min-height: 105px;
   }
+  
   .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-accessibility-option:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
+  
   .snn-icon {
-    margin-right: 12px;
     width: ${WIDGET_CONFIG.button.iconSize};
     height: ${WIDGET_CONFIG.button.iconSize};
+    fill: ${WIDGET_CONFIG.colors.optionIcon};
+    flex-shrink: 0;
   }
+  
   .snn-icon svg {
     width: 100%;
     height: 100%;
     fill: currentColor;
   }
-  .snn-close {
+  
+  .snn-button-text {
+    text-align: center;
+    line-height: 1.2;
+    font-size:16px;
+    font-weight: 600;
+  }
+  
+  .snn-option-steps {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    justify-content: center;
+    margin-top: 5px;
+  }
+  
+  .snn-option-step {
+    width: 30px;
+    height: 6px;
+    border-radius: 3px;
+    background-color: #d0d0d0;
+    transition: background-color ${WIDGET_CONFIG.animation.transition};
+  }
+  
+  .snn-option-step.active {
+    background-color: ${WIDGET_CONFIG.colors.primary};
+  }
+  
+  .snn-close, .snn-reset-button {
     background: none;
     border: none;
     font-size: ${WIDGET_CONFIG.menu.closeButtonSize};
-    color: ${WIDGET_CONFIG.colors.textLight};
+    color: ${WIDGET_CONFIG.colors.secondary};
     cursor: pointer;
-    margin-left: auto;
     line-height: ${WIDGET_CONFIG.typography.lineHeight};
     border-radius: ${WIDGET_CONFIG.button.borderRadius};
     width: ${WIDGET_CONFIG.menu.closeButtonSize};
     height: ${WIDGET_CONFIG.menu.closeButtonSize};
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
+  
   .snn-close::before {
     content: '×';
     position: absolute;
@@ -269,50 +713,94 @@ const styles = `
     font-size: ${WIDGET_CONFIG.menu.closeButtonSize};
     line-height: 1;
   }
-  .snn-close:focus {
-    outline: solid 2px ${WIDGET_CONFIG.colors.textLight};
+  
+  .snn-reset-button svg {
+    width: 22px;
+    height: 22px;
+    fill: ${WIDGET_CONFIG.colors.secondary};
+  }
+  
+  .snn-close:focus, .snn-reset-button:focus {
+    outline: solid 2px ${WIDGET_CONFIG.colors.secondary};
+  }
+  
+  .snn-close:hover, .snn-reset-button:hover {
+    color: ${WIDGET_CONFIG.colors.secondary};
+    background: rgba(255, 255, 255, 0.2);
+  }
+  
+  /* Tooltip styles */
+  .snn-tooltip {
+    position: absolute;
+    bottom: -35px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 6px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 1000;
+  }
+  
+  .snn-tooltip::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid rgba(0, 0, 0, 0.8);
   }
-  .snn-close:hover {
-    color: ${WIDGET_CONFIG.colors.text};
+  
+  .snn-close:hover .snn-tooltip,
+  .snn-close:focus .snn-tooltip,
+  .snn-reset-button:hover .snn-tooltip,
+  .snn-reset-button:focus .snn-tooltip {
+    opacity: 1;
   }
+  
   .snn-header {
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
     padding: 10px;
-    background: #000000;
+    background: ${WIDGET_CONFIG.colors.primary};
     height: ${WIDGET_CONFIG.menu.headerHeight};
     position: sticky;
     top: 0;
     z-index: 10;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    gap: 8px;
   }
   
   .snn-content {
-    padding: 0 10px 10px 10px;
+    padding: 20px 20px 0px 20px;
   }
   
-  .snn-reset-button {
-    font-size: ${WIDGET_CONFIG.menu.fontSize};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-    padding: ${WIDGET_CONFIG.menu.optionPadding};
+  .snn-language-selector {
     width: 100%;
-    background-color: #343434;
-    color: ${WIDGET_CONFIG.colors.textLight};
+    background: white;
+    color: black;
     border: none;
+    padding: 14px;
+    font-size: 16px;
+    font-family: ${WIDGET_CONFIG.typography.fontFamily};
+    border-radius: 5px;
+    margin-bottom: 20px;
     cursor: pointer;
-    border-radius: ${WIDGET_CONFIG.menu.borderRadius};
-    transition: background-color ${WIDGET_CONFIG.animation.transition};
-    line-height: ${WIDGET_CONFIG.typography.lineHeight} !important;
-    font-weight: 500;
-    gap: 8px;
+    outline: none;
   }
   
-  .snn-reset-button:hover {
-    background-color: #cc3333;
+  .snn-language-selector:focus {
+    outline: 2px solid ${WIDGET_CONFIG.colors.primary};
+    outline-offset: 2px;
   }
   
   .snn-options-grid {
@@ -322,53 +810,53 @@ const styles = `
     margin-bottom: 20px;
   }
   
-
   .snn-title {
     margin: 0;
     font-size: ${WIDGET_CONFIG.menu.titleFontSize};
-    color: ${WIDGET_CONFIG.colors.textLight};
+    color: ${WIDGET_CONFIG.colors.secondary};
     line-height: ${WIDGET_CONFIG.typography.lineHeight} !important;
     margin-left: 5px;
     font-weight: ${WIDGET_CONFIG.typography.titleFontWeight};
+    flex: 1;
+    letter-spacing: 1px !important;
+    word-spacing: 2px !important;
+    text-align: left;
   }
-  /* Accessibility feature styles */
+`;
+
+// Page accessibility styles (will go in main document - these affect the page, NOT the widget)
+const pageStyles = `
+  /* High Contrast Modes */
   .snn-high-contrast-medium {
-    filter: contrast(1.3) !important;
+    filter: none !important;
   }
-  .snn-high-contrast-medium *{
+  .snn-high-contrast-medium *:not(#snn-accessibility-widget-container):not(#snn-accessibility-widget-container *) {
     filter: contrast(1.3) !important;
   }
-  .snn-high-contrast-medium #snn-accessibility-menu{
-    filter: contrast(0.8) !important;
-  }
   
   .snn-high-contrast-high {
     background-color: #000 !important;
     color: #fff !important;
-    filter: contrast(1.5) !important;
+    filter: none !important;
   }
-  .snn-high-contrast-high *{
+  .snn-high-contrast-high *:not(#snn-accessibility-widget-container):not(#snn-accessibility-widget-container *) {
     background-color: #000 !important;
     color: #fff !important;
     filter: contrast(1.5) !important;
   }
-  .snn-high-contrast-high #snn-accessibility-menu{
-    filter: contrast(0.7) !important;
-  }
   
   .snn-high-contrast-ultra {
     background-color: #000 !important;
     color: #ffff00 !important;
-    filter: contrast(2.0) !important;
+    filter: none !important;
   }
-  .snn-high-contrast-ultra *{
+  .snn-high-contrast-ultra *:not(#snn-accessibility-widget-container):not(#snn-accessibility-widget-container *) {
     background-color: #000 !important;
     color: #ffff00 !important;
     filter: contrast(2.0) !important;
   }
-  .snn-high-contrast-ultra #snn-accessibility-menu{
-    filter: contrast(0.6) !important;
-  }
+  
+  /* Text Size */
   .snn-bigger-text-medium * {
     font-size: 20px !important;
   }
@@ -378,32 +866,66 @@ const styles = `
   .snn-bigger-text-xlarge * {
     font-size: 28px !important;
   }
-  .snn-text-spacing *:not(#snn-accessibility-menu *, #snn-accessibility-fixed-button *, #snn-accessibility-button *, .snn-accessibility-option *) {
-    letter-spacing: 0.2em !important;
-    word-spacing: 0.3em !important;
+  
+  /* Text Spacing - 3 Options */
+  .snn-text-spacing-light * {
+    letter-spacing: 0.1em !important;
+    word-spacing: 0.5em !important;
+  }
+  .snn-text-spacing-medium * {
+    letter-spacing: 0.15em !important;
+    word-spacing: 1em !important;
+  }
+  .snn-text-spacing-heavy * {
+    letter-spacing: 0.25em !important;
+    word-spacing: 2em !important;
   }
+  
+  /* Pause Animations (Enhanced to include Reduced Motion features) */
   .snn-pause-animations * {
     animation: none !important;
     transition: none !important;
   }
+  .snn-pause-animations *::before {
+    animation: none !important;
+    transition: none !important;
+  }
+  .snn-pause-animations *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+  
+  /* Dyslexia Font */
   .snn-dyslexia-font {
-    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Bradley Hand', Brush Script MT, fantasy !important;
+    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Bradley Hand', 'Brush Script MT', fantasy !important;
   }
   .snn-dyslexia-font * {
-    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Bradley Hand', Brush Script MT, fantasy !important;
+    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Bradley Hand', 'Brush Script MT', fantasy !important;
+  }
+  
+  /* Line Height - 3 Options */
+  .snn-line-height-2em * {
+    line-height: 2 !important;
   }
-  .snn-line-height *:not(#snn-accessibility-menu *, #snn-accessibility-fixed-button *, #snn-accessibility-button *, .snn-accessibility-option *) {
-    line-height: 2.5 !important;
+  .snn-line-height-3em * {
+    line-height: 3 !important;
   }
-  .snn-text-align-left *:not(#snn-accessibility-menu *, #snn-accessibility-fixed-button *, #snn-accessibility-button *, .snn-accessibility-option *) {
+  .snn-line-height-4em * {
+    line-height: 4 !important;
+  }
+  
+  /* Text Alignment */
+  .snn-text-align-left * {
     text-align: left !important;
   }
-  .snn-text-align-center *:not(#snn-accessibility-menu *, #snn-accessibility-fixed-button *, #snn-accessibility-button *, .snn-accessibility-option *) {
+  .snn-text-align-center * {
     text-align: center !important;
   }
-  .snn-text-align-right *:not(#snn-accessibility-menu *, #snn-accessibility-fixed-button *, #snn-accessibility-button *, .snn-accessibility-option *) {
+  .snn-text-align-right * {
     text-align: right !important;
   }
+  
+  /* Bigger Cursor */
   .snn-bigger-cursor {
     cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0OCA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAyVjcwTDIwIDU0SDM2TDQgMloiIGZpbGw9IiMwMDAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI0Ii8+PC9zdmc+'), auto !important;
   }
@@ -433,27 +955,56 @@ const styles = `
   
   /* Color Filters */
   .snn-filter-protanopia {
+    filter: none !important;
+  }
+  .snn-filter-protanopia body > *:not(#snn-accessibility-widget-container) {
     filter: url('#protanopia-filter') !important;
   }
   .snn-filter-deuteranopia {
+    filter: none !important;
+  }
+  .snn-filter-deuteranopia body > *:not(#snn-accessibility-widget-container) {
     filter: url('#deuteranopia-filter') !important;
   }
   .snn-filter-tritanopia {
+    filter: none !important;
+  }
+  .snn-filter-tritanopia body > *:not(#snn-accessibility-widget-container) {
     filter: url('#tritanopia-filter') !important;
   }
   .snn-filter-grayscale {
+    filter: none !important;
+  }
+  .snn-filter-grayscale body > *:not(#snn-accessibility-widget-container) {
     filter: grayscale(100%) !important;
   }
   
-  /* Reduced Motion */
-  .snn-reduced-motion * {
-    animation: none !important;
-    transition: none !important;
+  /* Saturation Filters */
+  .snn-saturation-low {
+    filter: none !important;
   }
-  .snn-reduced-motion *::before,
-  .snn-reduced-motion *::after {
-    animation: none !important;
-    transition: none !important;
+  .snn-saturation-low body > *:not(#snn-accessibility-widget-container) {
+    filter: saturate(0.5) !important;
+  }
+  .snn-saturation-high {
+    filter: none !important;
+  }
+  .snn-saturation-high body > *:not(#snn-accessibility-widget-container) {
+    filter: saturate(10) !important;
+  }
+  .snn-saturation-none {
+    filter: none !important;
+  }
+  .snn-saturation-none body > *:not(#snn-accessibility-widget-container) {
+    filter: grayscale(100%) saturate(0) !important;
+  }
+  
+  /* Protect widget container from page styles */
+  #snn-accessibility-widget-container,
+  #snn-accessibility-widget-container * {
+    filter: none !important;
+    background-color: initial !important;
+    color: initial !important;
   }
 `;
 
@@ -461,40 +1012,44 @@ const styles = `
 // SVG ICONS
 // ===========================================
 
-// SVG icons
 const icons = {
-  buttonsvg: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="" height="" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 2713 2713" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"><![CDATA[.fil1 {fill:${WIDGET_CONFIG.colors.primary}} .fil0 {fill:white}]]></style></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"/><g id="_275060008"><circle class="fil0" cx="1356" cy="1356" r="1356"/><path class="fil1" d="M1305 315c-143,32 -237,147 -205,319 25,141 143,240 312,213 131,-21 237,-160 206,-324 -23,-125 -156,-243 -313,-208zm-150 1699l0 -340c1,-75 5,-367 1,-417 -9,-113 -93,-177 -174,-250 -19,-17 -33,-31 -53,-50 -19,-18 -35,-30 -54,-49 -19,-18 -34,-29 -53,-50 -38,-40 -162,-118 -98,-188 60,-65 124,34 188,86l111 99c11,10 17,13 27,25 9,12 16,18 28,28 35,30 72,64 125,85 122,50 214,44 334,-14 71,-34 103,-68 150,-113 9,-9 17,-15 27,-24 20,-18 39,-34 56,-51l108 -103c19,-18 29,-36 65,-39 33,-3 58,10 67,36 11,30 3,63 -13,83l-273 254c-40,31 -76,64 -109,98 -38,41 -54,80 -55,153 -3,243 -1,489 0,733 0,3 0,5 0,8 0,0 0,0 0,0 0,184 149,333 333,333 61,0 118,-17 167,-45 24,-18 48,-36 67,-51 39,-32 140,-145 171,-186 11,-16 19,-26 30,-42 104,-151 178,-317 209,-505 39,-242 -12,-506 -119,-712 -36,-69 -69,-123 -108,-178 -12,-15 -20,-24 -32,-39 -28,-36 -67,-84 -99,-115 -69,-66 -76,-68 -158,-129 -53,-39 -113,-70 -182,-103 -140,-67 -297,-100 -472,-102 -180,-2 -322,37 -472,97 -55,22 -93,42 -143,72 -55,33 -73,43 -127,87 -47,38 -70,60 -111,104 -6,6 -12,10 -18,17 -7,7 -9,13 -16,20 -8,9 -10,8 -17,18 -80,101 -91,116 -158,235 -64,113 -121,286 -136,435 -18,190 1,329 58,498 46,134 132,283 204,367 13,15 21,26 32,40 34,43 103,105 146,139 7,6 14,11 22,17 54,38 120,61 192,61 183,0 332,-149 332,-333l0 0z"/></g></g></svg>`,
-  highContrast: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="30" fill="#000"/><path d="M32 2a30 30 0 000 60V2z" fill="#fff"/></svg>`,
-  biggerText: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 8L8 56h12l6-12h24l6 12h12L32 8zm-6 36L32 20l6 24H26z"/></svg>`,
-  textSpacing: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M10 16h44v4H10zm0 12h44v4H10zm0 12h44v4H10zm0 12h44v4H10z"/></svg>`,
-  pauseAnimations: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="12" width="10" height="40"/><rect x="38" y="12" width="10" height="40"/></svg>`,
+  buttonsvg: `<svg xmlns="http://www.w3.org/2000/svg" style="fill:white;" viewBox="0 0 24 24" width="30px" height="30px"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M20.5 6c-2.61.7-5.67 1-8.5 1s-5.89-.3-8.5-1L3 8c1.86.5 4 .83 6 1v13h2v-6h2v6h2V9c2-.17 4.14-.5 6-1l-.5-2zM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"></path></svg>`,
+  highContrast: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" version="1.2" viewBox="0 0 35 35"><path fill="currentColor" fill-rule="evenodd" d="M1.89998 15.6285c0-7.58203 6.14649-13.72852 13.72852-13.72852 7.5821 0 13.7286 6.14649 13.7286 13.72852 0 .6081-.0395 1.2069-.1161 1.794.5933.2913 1.1478.6497 1.6534 1.0654.1725-.9268.2627-1.8825.2627-2.8594 0-8.57615-6.9524-15.5285244-15.5286-15.5285244C7.05235.0999756.0999756 7.05235.0999756 15.6285c0 8.5762 6.9523744 15.5286 15.5285244 15.5286 1.2241 0 2.415-.1416 3.5574-.4093-.4388-.4866-.8222-1.0242-1.1402-1.6028-.7847.1394-1.5924.2121-2.4172.2121-7.58203 0-13.72852-6.1465-13.72852-13.7286Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M2.35 15.6286C2.35 8.29502 8.29502 2.35 15.6286 2.35c7.3335 0 13.2785 5.94502 13.2785 13.2786 0 .5408-.0323 1.0741-.0951 1.5979.444.1881.8687.4128 1.2703.6703.1151-.7392.1748-1.4967.1748-2.2682C30.2571 7.54943 23.7077 1 15.6286 1 7.54943 1 15.6286 1 7.54943 1 15.6286c0 8.0791 6.54943 14.6285 14.6286 14.6285 1.0033 0 1.9831-.101 2.9297-.2934-.276-.3898-.52-.8038-.7282-1.2382-.716.1195-1.4515.1816-2.2015.1816-7.33358 0-13.2786-5.945-13.2786-13.2785Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M15.6286 1C7.54943 1 1 7.54943 1 15.6286c0 8.0791 6.54943 14.6285 14.6286 14.6285" clip-rule="evenodd"/><path stroke="currentColor" stroke-width="1.8" d="M15.6286 1C7.54943 1 1 7.54943 1 15.6286c0 8.0791 6.54943 14.6285 14.6286 14.6285"/><path fill="currentColor" fill-rule="evenodd" d="M22.8729 25.114c0-1.3811 1.0901-2.5007 2.4359-2.5007 1.3459 0 2.436 1.1196 2.436 2.5007 0 1.38-1.0901 2.4997-2.436 2.4997-1.3458 0-2.4359-1.1197-2.4359-2.4997Zm7.2258-2.0373c-.0899-.2248-.071-.4785.0512-.6875l.912-1.5598c.0898-.1532.0668-.3504-.0574-.4779l-1.0556-1.0832c-.1232-.1264-.3153-.1511-.4657-.0589l-1.5225.9374c-.201.1237-.4495.1427-.667.051-.2181-.092-.3797-.2819-.4358-.5118l-.4329-1.7763c-.0428-.1735-.1953-.2957-.3696-.2957h-1.4931c-.1744 0-.3268.1222-.3696.2957l-.433 1.7763c-.056.2299-.2177.4198-.4357.5118-.2176.0917-.466.0727-.6671-.051l-1.5225-.9374c-.1503-.0922-.3424-.0675-.4656.0589l-1.0556 1.0832c-.1243.1275-.1473.3247-.0575.4779l.9121 1.5598c.1222.209.1411.4627.0511.6875-.0895.2239-.2806.3916-.5142.4514l-1.7165.4395c-.1692.0439-.2882.2003-.2882.3803v1.5311c0 .18.119.3364.2882.3804l1.7165.4394c.2336.0599.4247.2276.5142.4515.09.2247.0711.4785-.0511.6874l-.9121 1.5599c-.0898.1532-.0668.3503.0575.4778l1.0556 1.0833c.1232.1264.3153.151.4656.0589l1.5225-.9374c.2011-.1238.4495-.1428.6671-.051.218.092.3797.2818.4357.5118l.433 1.7762c.0428.1736.1952.2968.3696.2968h1.4931c.1743 0 .3268-.1232.3696-.2968l.4329-1.7762c.0561-.23.2177-.4198.4358-.5118.2175-.0918.466-.0728.667.051l1.5225.9374c.1504.0921.3425.0675.4657-.0589l1.0556-1.0833c.1242-.1275.1472-.3246.0574-.4778l-.912-1.5599c-.1222-.2089-.1411-.4627-.0512-.6874.0896-.2239.2806-.3916.5142-.4515l1.7166-.4394c.1691-.044.2881-.2004.2881-.3804v-1.5311c0-.18-.119-.3364-.2881-.3803l-1.7166-.4395c-.2336-.0598-.4246-.2275-.5142-.4514Z" clip-rule="evenodd"/></svg>`,
+  biggerText: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 36 23"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-linejoin="round" d="M26.58 21.3225806V1m-7.92 4.06451613V1H34.5v4.06451613"/><path d="M22.62 21.3225806h7.92"/><path stroke-linejoin="round" d="M6.78 18.6129032V5.06451613M1.5 7.77419355V5.06451613h10.56v2.70967742"/><path d="M4.14 18.6129032h5.28"/></g></svg>`,
+  textSpacing: `<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 15 15" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.55293 0.999969C4.75295 0.999969 4.93372 1.11917 5.0125 1.30301L8.01106 8.29982C8.11984 8.55363 8.00226 8.84757 7.74844 8.95635C7.49463 9.06512 7.20069 8.94754 7.09191 8.69373L6.11613 6.41685H2.98973L2.01395 8.69373C1.90517 8.94754 1.61123 9.06512 1.35742 8.95635C1.1036 8.84757 0.986023 8.55363 1.0948 8.29982L4.09336 1.30301C4.17214 1.11917 4.35291 0.999969 4.55293 0.999969ZM4.55293 2.76929L5.75186 5.56685H3.354L4.55293 2.76929ZM11.0562 9.00214C11.2617 9.00214 11.4463 8.87633 11.5215 8.68502L14.2733 1.68299C14.3743 1.42598 14.2478 1.13575 13.9908 1.03475C13.7338 0.933747 13.4436 1.06021 13.3426 1.31722L11.0562 7.13514L8.76973 1.31722C8.66873 1.06021 8.3785 0.933747 8.1215 1.03475C7.86449 1.13575 7.73802 1.42598 7.83902 1.68299L10.5908 8.68502C10.666 8.87633 10.8506 9.00214 11.0562 9.00214ZM14.9537 12.4999C14.9537 12.606 14.9115 12.7077 14.8365 12.7828L12.8365 14.7828C12.6803 14.939 12.4271 14.939 12.2708 14.7828C12.1146 14.6265 12.1146 14.3733 12.2708 14.2171L13.588 12.8999H1.51937L2.83653 14.2171C2.99274 14.3733 2.99274 14.6265 2.83653 14.7828C2.68032 14.939 2.42705 14.939 2.27084 14.7828L0.270843 12.7828C0.195828 12.7077 0.153687 12.606 0.153687 12.4999C0.153687 12.3938 0.195828 12.2921 0.270843 12.2171L2.27084 10.2171C2.42705 10.0609 2.68032 10.0609 2.83653 10.2171C2.99274 10.3733 2.99274 10.6265 2.83653 10.7828L1.51937 12.0999L13.588 12.0999L12.2708 10.7828C12.1146 10.6265 12.1146 10.3733 12.2708 10.2171C12.4271 10.0609 12.6803 10.0609 12.8365 10.2171L14.8365 12.2171C14.9115 12.2921 14.9537 12.3938 14.9537 12.4999Z" fill="#000000"/></svg>`,
+  pauseAnimations: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 37 36"><g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M15.8087111 23.6666667h-1.2702778c-.4429444 0-.8018333-.3598334-.8018333-.8027778v-9.7277778c0-.4429444.3588889-.8027778.8018333-.8027778h1.2702778c.4429445 0 .8027778.3598334.8027778.8027778v9.7277778c0 .4429444-.3598333.8027778-.8027778.8027778m6.6525722 0h-1.2702777c-.442 0-.8018334-.3598334-.8018334-.8027778v-9.7277778c0-.4429444.3598334-.8027778.8018334-.8027778h1.2702777c.4438889 0 .8027778.3598334.8027778.8027778v9.7277778c0 .4429444-.3588889.8027778-.8027778.8027778"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.88888889" d="M18.5 4.77777778V1m0 34v-3.7777778M31.7222222 18H35.5m-34 0h3.77777778m3.87278889-9.34943333L6.47873333 5.97967778M30.5204167 30.0204167l-2.6708889-2.6708889m-.0000945-18.69896113 2.6708889-2.67088889M6.47911111 30.0204167l2.67183333-2.6708889M23.5542889 5.78219444l1.4440555-3.49066666M12.0013722 33.7087556l1.4440556-3.4906667m17.2723778-7.1638 3.4906666 1.4440555M2.79124444 11.5013722l3.49066667 1.4440556m7.15274999-7.15860558L11.9877722 2.2971m13.0246445 31.4061778-1.4468889-3.4897222m7.14765-17.2788945L34.2029 11.4877722M2.79672222 24.5124167l3.48972222-1.4468889"/></g></svg>`,
   hideImages: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 12C16 12 4 32 4 32s12 20 28 20 28-20 28-20S48 12 32 12zm0 32a12 12 0 1112-12 12 12 0 01-12 12z"/><circle cx="32" cy="32" r="8"/></svg>`,
-  dyslexiaFont: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M12 8v48h12a16 16 0 000-32h-8v-8h16V8H12zm12 24a8 8 0 010 16h-4V32h4zM40 8v48h12V8H40z"/></svg>`,
-  biggerCursor: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M12 4v56l16-16h24L12 4z"/></svg>`,
-  lineHeight: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M16 16h32v4H16zm0 12h32v4H16zm0 12h32v4H16zm0 12h32v4H16zM8 8l8 8-8 8V8zm0 32l8 8-8 8V40z"/></svg>`,
+  dyslexiaFont: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 31 22"><path fill="currentColor" fill-rule="evenodd" d="M.5 22V1.0083333h7.2421899c6.8051611 0 11.6124768 4.3388889 11.6124768 10.4805556C19.3546667 17.6305556 14.547351 22 7.7421899 22H.5Zm2.4348742-4.31h4.8073157c5.3692097 0 9.1463863-2.8616703 9.1463863-7.27 0-4.3807776-3.7771766-7.2422222-9.1463863-7.2422222H2.9348742V17.69ZM26.2735913 4.0333333l.0114609 2.1694445h4.0126191V8.25h-4.001719L26.77 22h-3.535416L23.78 8.25h-2.4238344V6.2027778h2.55923l.0751088-2.1694445C24.0706908 1.6805556 25.6007488 0 27.697782 0 28.6896221 0 29.677687.3666667 30.5 1.0083333l-.9627285 1.6805556c-.3479788-.3666667-.9515992-.6416667-1.627768-.6416667-.8819593 0-1.6420082.825-1.6359122 1.9861111Z"/></svg>`,
+  biggerCursor: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 27 27"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15.9983464 11.5517813 9.5269972 9.52699721-4.4465655 4.44656549-9.5269972-9.52699717-4.05145413 9.06403815L1 1.0000004l24.0623846 6.5003268z"/></svg>`,
+  lineHeight: `<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 47 25"><g fill="none" fill-rule="evenodd"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M3.99999962 2.71042226V22.7104223"/><path fill="currentColor" d="m.16814235 20.5270412 3.44487862 4.2104072c.17486379.2137224.48987514.2452235.70359754.0703597a.4999988.4999988 0 0 0 .07035976-.0703597l3.44487862-4.2104072c.17486378-.2137225.14336265-.5287338-.07035976-.7035976-.08933106-.073089-.20119771-.1130213-.31661889-.1130213H.555121c-.27614238 0-.5.2238576-.5.5 0 .1154211.0399323.2272878.11302135.3166189Zm0-161332381L3.61302097.18339592c.17486379-.21372241.48987514-.24522355.70359754-.07035976a.49999975.49999975 0 0 1 .07035976.07035976l3.44487862 4.2104072c.17486378.2137224.14336265.52873375-.07035976.70359754-.08933106.07308905-.20119771.11302135-.31661889.11302135H.555121c-.27614237 0-.5-.22385762-.5-.5 0-.11542118.0399323-.22728783.11302135-.3166189Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.4999996 1.71042226h30m-30 7h30m-30 7.00000004h30m-30 7h24"/></g></svg>`,
   textAlign: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M10 16h44v4H10zm0 12h44v4H10zm0 12h44v4H10zm0 12h44v4H10z"/></svg>`,
   screenReader: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M16 24 L24 24 L32 16 L32 48 L24 40 L16 40 Z" fill="#333" stroke="#555" stroke-width="2"/><path d="M36 20 C42 24, 42 40, 36 44" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M36 12 C48 24, 48 40, 36 52" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/><rect x="28" y="48" width="8" height="8" fill="#ccc"/></svg>`,
-  resetAll: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/><path d="M8 12l4-4 4 4-1.41 1.41L12 10.83l-2.59 2.58z" transform="rotate(45 12 12)"/></svg>`,
+  resetAll: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="100%" height="100%"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.84"><path d="M16.20106 8c0 .9667-.189683 1.8872-.5324673 2.7251-.3427843.8372-.8386698 1.5911-1.4517524 2.2246-.6130825.6335-1.3426846 1.1459-2.152902 1.5001-.8108948.3542-1.70172746.5502-2.6372711.5502-.93554365 0-1.8263763-.196-2.63727112-.5502-.81021738-.3542-1.53981948-.8666-2.15290203-1.5001M2.6522744 8c0-.9667.189683-1.8872.53246728-2.7251.34278427-.8372.83866982-1.5911 1.45175237-2.2246.61308255-.6335 1.34268465-1.1459 2.15290203-1.5001C7.6002909 1.196 8.49112355 1 9.4266672 1c.93554364 0 1.8263763.196 2.6372711.5502.8102174.3542 1.5398195.8666 2.152902 1.5001"></path><path stroke-linejoin="round" d="m4.92576062 6.96092-2.48958935 1.484L1 5.87242m13.0125924 2.93832 2.3886509-1.652L18 9.62694"></path></g></svg>`,
   voiceControl: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 44a12 12 0 0012-12V20a12 12 0 10-24 0v12a12 12 0 0012 12z" fill="#333"/><path d="M20 32h24v4H20z" fill="#555"/><path d="M32 48v8" stroke="#555" stroke-width="4" stroke-linecap="round"/></svg>`,
   fontSelection: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><text x="32" y="40" font-family="serif" font-size="24" text-anchor="middle" fill="#333">Aa</text><path d="M8 48h48v2H8z"/></svg>`,
   colorFilter: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24" fill="none" stroke="#333" stroke-width="2"/><path d="M32 8a24 24 0 000 48V8z" fill="#f00" opacity="0.3"/><path d="M32 8a24 24 0 000 48" fill="none" stroke="#333" stroke-width="2" stroke-dasharray="4,2"/></svg>`,
+  saturation: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="20" cy="32" r="12" fill="#ff0000" opacity="0.7"/><circle cx="32" cy="32" r="12" fill="#00ff00" opacity="0.7"/><circle cx="44" cy="32" r="12" fill="#0000ff" opacity="0.7"/></svg>`,
   reducedMotion: `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="16" y="24" width="8" height="16" fill="#333"/><rect x="28" y="24" width="8" height="16" fill="#333"/><rect x="40" y="24" width="8" height="16" fill="#333"/></svg>`,
 };
 
 // ===========================================
-// CORE UTILITY FUNCTIONS
+// SHADOW DOM SETUP
 // ===========================================
 
-// Inject styles and SVG filters into the document
-function injectStyles() {
+let shadowRoot = null;
+
+// Inject styles into the page (NOT the widget)
+function injectPageStyles() {
   const styleSheet = document.createElement('style');
-  styleSheet.innerText = styles;
+  styleSheet.innerText = pageStyles;
+  styleSheet.id = 'snn-accessibility-page-styles';
   document.head.appendChild(styleSheet);
-  
-  // Add SVG color blindness filters
+
+  // Add SVG color blindness filters to main document
   const svgFilters = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svgFilters.style.position = 'absolute';
   svgFilters.style.width = '0';
+  svgFilters.setAttribute('class', 'snn-accessibility-filters');
   svgFilters.style.height = '0';
   svgFilters.innerHTML = `
     <defs>
@@ -512,8 +1067,25 @@ function injectStyles() {
   document.body.appendChild(svgFilters);
 }
 
+// Create shadow DOM container
+function createShadowContainer() {
+  const container = document.createElement('div');
+  container.id = 'snn-accessibility-widget-container';
+  document.body.appendChild(container);
+
+  // Create shadow root
+  shadowRoot = container.attachShadow({ mode: 'open' });
+
+  // Add widget styles to shadow DOM
+  const styleElement = document.createElement('style');
+  styleElement.textContent = widgetStyles;
+  shadowRoot.appendChild(styleElement);
+
+  return shadowRoot;
+}
+
 // ===========================================
-// PERFORMANCE OPTIMIZATION
+// CORE UTILITY FUNCTIONS
 // ===========================================
 
 // Cache for DOM elements to improve performance
@@ -522,7 +1094,7 @@ const domCache = {
   documentElement: document.documentElement,
   images: null,
   lastImageUpdate: 0,
-  getImages: function() {
+  getImages: function () {
     const now = Date.now();
     if (!this.images || now - this.lastImageUpdate > 5000) {
       this.images = document.querySelectorAll('img');
@@ -537,13 +1109,10 @@ function applySettings() {
   const settings = [
     { key: 'biggerCursor', className: 'snn-bigger-cursor' },
     { key: 'biggerText', className: 'snn-bigger-text' },
-    { key: 'highContrast', className: 'snn-high-contrast', target: domCache.documentElement },
+    { key: 'highContrast', className: 'snn-high-contrast' },
     { key: 'dyslexiaFont', className: 'snn-dyslexia-font' },
-    { key: 'lineHeight', className: 'snn-line-height' },
     { key: 'textAlign', className: 'snn-text-align' },
     { key: 'pauseAnimations', className: 'snn-pause-animations' },
-    { key: 'textSpacing', className: 'snn-text-spacing' },
-    { key: 'reducedMotion', className: 'snn-reduced-motion' },
   ];
 
   // Batch DOM operations for better performance
@@ -601,6 +1170,14 @@ function applySettings() {
     domCache.documentElement.classList.add(`snn-filter-${selectedFilter}`);
   }
 
+  // Handle saturation filters
+  const saturationClasses = ['snn-saturation-low', 'snn-saturation-high', 'snn-saturation-none'];
+  domCache.documentElement.classList.remove(...saturationClasses);
+  const selectedSaturation = localStorage.getItem('saturation');
+  if (selectedSaturation) {
+    domCache.documentElement.classList.add(`snn-saturation-${selectedSaturation}`);
+  }
+
   // Handle text alignment
   const alignClasses = ['snn-text-align-left', 'snn-text-align-center', 'snn-text-align-right'];
   domCache.body.classList.remove(...alignClasses);
@@ -619,10 +1196,26 @@ function applySettings() {
 
   // Handle high contrast
   const contrastClasses = ['snn-high-contrast-medium', 'snn-high-contrast-high', 'snn-high-contrast-ultra'];
-  domCache.documentElement.classList.remove(...contrastClasses);
+  domCache.body.classList.remove(...contrastClasses);
   const selectedContrast = localStorage.getItem('highContrast');
   if (selectedContrast) {
-    domCache.documentElement.classList.add(`snn-high-contrast-${selectedContrast}`);
+    domCache.body.classList.add(`snn-high-contrast-${selectedContrast}`);
+  }
+
+  // Handle Text Spacing (3 Levels)
+  const spacingClasses = ['snn-text-spacing-light', 'snn-text-spacing-medium', 'snn-text-spacing-heavy'];
+  domCache.body.classList.remove(...spacingClasses);
+  const selectedSpacing = localStorage.getItem('textSpacing');
+  if (selectedSpacing) {
+    domCache.body.classList.add(`snn-text-spacing-${selectedSpacing}`);
+  }
+
+  // Handle Line Height (3 Levels)
+  const lineHeightClasses = ['snn-line-height-2em', 'snn-line-height-3em', 'snn-line-height-4em'];
+  domCache.body.classList.remove(...lineHeightClasses);
+  const selectedLineHeight = localStorage.getItem('lineHeight');
+  if (selectedLineHeight) {
+    domCache.body.classList.add(`snn-line-height-${selectedLineHeight}`);
   }
 
   // Handle images with cached query
@@ -653,12 +1246,12 @@ function createAccessibilityButton() {
   const button = document.createElement('button');
   button.id = 'snn-accessibility-button';
   button.innerHTML = icons.buttonsvg;
-  button.setAttribute('aria-label', WIDGET_CONFIG.lang.accessibilityMenu);
+  button.setAttribute('aria-label', getTranslation('accessibilityMenu'));
 
   button.addEventListener('click', function () {
     toggleMenu();
   });
-  
+
   button.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -667,7 +1260,7 @@ function createAccessibilityButton() {
   });
 
   buttonContainer.appendChild(button);
-  document.body.appendChild(buttonContainer);
+  shadowRoot.appendChild(buttonContainer);
 }
 
 // Reset all accessibility settings
@@ -684,9 +1277,9 @@ function resetAccessibilitySettings() {
     'textSpacing',
     'highContrast',
     'voiceControl',
-    'reducedMotion',
     'fontSelection',
     'colorFilter',
+    'saturation',
   ];
   keys.forEach((key) => localStorage.removeItem(key));
 
@@ -696,25 +1289,45 @@ function resetAccessibilitySettings() {
     'snn-bigger-text',
     'snn-dyslexia-font',
     'snn-pause-animations',
-    'snn-text-spacing',
-    'snn-line-height',
     'snn-text-align',
-    'snn-reduced-motion',
     'snn-font-arial',
     'snn-font-times',
     'snn-font-verdana'
   ];
   cssClasses.forEach(cls => document.body.classList.remove(cls));
 
+  const bodyClasses2 = [
+    'snn-high-contrast-medium',
+    'snn-high-contrast-high',
+    'snn-high-contrast-ultra'
+  ];
+  bodyClasses2.forEach(cls => document.body.classList.remove(cls));
+
   const documentClasses = [
-    'snn-high-contrast',
     'snn-filter-protanopia',
     'snn-filter-deuteranopia',
     'snn-filter-tritanopia',
-    'snn-filter-grayscale'
+    'snn-filter-grayscale',
+    'snn-saturation-low',
+    'snn-saturation-high',
+    'snn-saturation-none'
   ];
   documentClasses.forEach(cls => document.documentElement.classList.remove(cls));
 
+  const textSizeClasses = [
+    'snn-bigger-text-medium',
+    'snn-bigger-text-large',
+    'snn-bigger-text-xlarge'
+  ];
+  textSizeClasses.forEach(cls => document.body.classList.remove(cls));
+
+  // Clear Multi-level classes
+  const spacingClasses = ['snn-text-spacing-light', 'snn-text-spacing-medium', 'snn-text-spacing-heavy'];
+  spacingClasses.forEach(cls => document.body.classList.remove(cls));
+
+  const lineHeightClasses = ['snn-line-height-2em', 'snn-line-height-3em', 'snn-line-height-4em'];
+  lineHeightClasses.forEach(cls => document.body.classList.remove(cls));
+
   domCache.getImages().forEach((img) => (img.style.display = ''));
 
   if (screenReader.active) {
@@ -727,10 +1340,14 @@ function resetAccessibilitySettings() {
 
   applySettings();
 
-  const buttons = document.querySelectorAll('#snn-accessibility-menu .snn-accessibility-option');
+  const buttons = shadowRoot.querySelectorAll('#snn-accessibility-menu .snn-accessibility-option');
   buttons.forEach((button) => {
     button.classList.remove('active');
     button.setAttribute('aria-pressed', 'false');
+    
+    // Reset step indicators
+    const steps = button.querySelectorAll('.snn-option-step');
+    steps.forEach(step => step.classList.remove('active'));
   });
 }
 
@@ -742,18 +1359,25 @@ function createToggleButton(
   targetElement = document.body,
   customToggleFunction = null,
   iconSVG = '',
-  requiresFeature = null
+  requiresFeature = null,
+  optionId = null
 ) {
   const button = document.createElement('button');
-  button.innerHTML = `<span class="snn-icon">${iconSVG}</span><span class="snn-button-text">${buttonText}</span>`;
+  button.innerHTML = `
+    <span class="snn-icon">${iconSVG}</span>
+    <span class="snn-button-text">${buttonText}</span>
+  `;
   button.setAttribute('data-key', localStorageKey);
   button.setAttribute('aria-label', buttonText);
   button.classList.add('snn-accessibility-option');
+  if (optionId) {
+    button.setAttribute('data-accessibility-option-id', optionId);
+  }
 
   // Check if feature is supported
   if (requiresFeature && !requiresFeature.isSupported) {
     button.disabled = true;
-    button.setAttribute('title', `${buttonText} ${WIDGET_CONFIG.lang.notSupportedBrowser}`);
+    button.setAttribute('title', `${buttonText} ${getTranslation('notSupportedBrowser')}`);
     button.style.opacity = '0.5';
     return button;
   }
@@ -768,17 +1392,17 @@ function createToggleButton(
   button.addEventListener('click', function () {
     handleToggle();
   });
-  
+
   button.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       handleToggle();
     }
   });
-  
+
   function handleToggle() {
     const newIsActive = localStorage.getItem(localStorageKey) !== 'true';
-    
+
     // If there's a custom toggle function, call it and check if it succeeded
     if (customToggleFunction) {
       const success = customToggleFunction(newIsActive);
@@ -787,7 +1411,7 @@ function createToggleButton(
         return;
       }
     }
-    
+
     localStorage.setItem(localStorageKey, newIsActive);
     button.setAttribute('aria-pressed', newIsActive);
 
@@ -808,56 +1432,111 @@ function createToggleButton(
 }
 
 // Create special action buttons (for cycling through options)
-function createActionButton(buttonText, actionFunction, iconSVG) {
+function createActionButton(buttonText, actionFunction, iconSVG, optionsConfig = null, optionId = null) {
   const button = document.createElement('button');
-  button.innerHTML = `<span class="snn-icon">${iconSVG}</span><span class="snn-button-text">${buttonText}: <span class="snn-status">${WIDGET_CONFIG.lang.default}</span></span>`;
+  
+  let buttonHTML = `
+    <span class="snn-icon">${iconSVG}</span>
+    <span class="snn-button-text">${buttonText}</span>
+  `;
+  
+  // Add option steps if configured
+  if (optionsConfig) {
+    buttonHTML += '<div class="snn-option-steps">';
+    for (let i = 0; i < optionsConfig.count; i++) {
+      buttonHTML += '<div class="snn-option-step"></div>';
+    }
+    buttonHTML += '</div>';
+  }
+  
+  button.innerHTML = buttonHTML;
   button.setAttribute('aria-label', buttonText);
   button.classList.add('snn-accessibility-option');
-  
+  button.setAttribute('data-options-config', optionsConfig ? JSON.stringify(optionsConfig) : '');
+  if (optionId) {
+    button.setAttribute('data-accessibility-option-id', optionId);
+  }
+
   // Update initial status
-  updateActionButtonStatus(button, buttonText, actionFunction);
-  
+  updateActionButtonStatus(button, optionId, optionsConfig);
+
   button.addEventListener('click', function () {
     const result = actionFunction();
     if (result) {
-      const statusSpan = button.querySelector('.snn-status');
-      statusSpan.textContent = result;
+      updateActionButtonStatus(button, optionId, optionsConfig);
     }
   });
-  
+
   button.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       const result = actionFunction();
       if (result) {
-        const statusSpan = button.querySelector('.snn-status');
-        statusSpan.textContent = result;
+        updateActionButtonStatus(button, optionId, optionsConfig);
       }
     }
   });
-  
+
   return button;
 }
 
 // Update action button status on page load
-function updateActionButtonStatus(button, buttonText, actionFunction) {
-  const statusSpan = button.querySelector('.snn-status');
+function updateActionButtonStatus(button, optionId, optionsConfig) {
+  if (!optionsConfig) return;
+  
+  const steps = button.querySelectorAll('.snn-option-step');
+  let currentIndex = -1;
   
-  if (buttonText.includes('Font')) {
+  if (optionId === 'fontSelection') {
     const currentFont = localStorage.getItem('fontSelection');
-    statusSpan.textContent = currentFont ? currentFont.charAt(0).toUpperCase() + currentFont.slice(1) : WIDGET_CONFIG.lang.default;
-  } else if (buttonText.includes('Color')) {
+    const fonts = ['arial', 'times', 'verdana'];
+    currentIndex = currentFont ? fonts.indexOf(currentFont) : -1;
+  } else if (optionId === 'colorFilter') {
     const currentFilter = localStorage.getItem('colorFilter');
-    statusSpan.textContent = currentFilter ? currentFilter.charAt(0).toUpperCase() + currentFilter.slice(1) : WIDGET_CONFIG.lang.noFilter;
-  } else if (buttonText.includes('Text Align')) {
+    const filters = ['protanopia', 'deuteranopia', 'tritanopia', 'grayscale'];
+    currentIndex = currentFilter ? filters.indexOf(currentFilter) : -1;
+  } else if (optionId === 'textAlign') {
     const currentAlign = localStorage.getItem('textAlign');
-    statusSpan.textContent = currentAlign ? currentAlign.charAt(0).toUpperCase() + currentAlign.slice(1) : WIDGET_CONFIG.lang.default;
-  } else if (buttonText.includes('Text Size')) {
+    const alignments = ['left', 'center', 'right'];
+    currentIndex = currentAlign ? alignments.indexOf(currentAlign) : -1;
+  } else if (optionId === 'biggerText') {
     const currentSize = localStorage.getItem('biggerText');
-    statusSpan.textContent = currentSize ? (currentSize === 'xlarge' ? 'X-Large' : currentSize.charAt(0).toUpperCase() + currentSize.slice(1)) : WIDGET_CONFIG.lang.default;
-  } else if (buttonText.includes('High Contrast')) {
+    const sizes = ['medium', 'large', 'xlarge'];
+    currentIndex = currentSize ? sizes.indexOf(currentSize) : -1;
+  } else if (optionId === 'highContrast') {
     const currentContrast = localStorage.getItem('highContrast');
-    statusSpan.textContent = currentContrast ? currentContrast.charAt(0).toUpperCase() + currentContrast.slice(1) : WIDGET_CONFIG.lang.default;
+    const contrasts = ['medium', 'high', 'ultra'];
+    currentIndex = currentContrast ? contrasts.indexOf(currentContrast) : -1;
+  } else if (optionId === 'textSpacing') {
+    const currentSpacing = localStorage.getItem('textSpacing');
+    const spacings = ['light', 'medium', 'heavy'];
+    currentIndex = currentSpacing ? spacings.indexOf(currentSpacing) : -1;
+  } else if (optionId === 'lineHeight') {
+    const currentLineHeight = localStorage.getItem('lineHeight');
+    const heights = ['2em', '3em', '4em'];
+    currentIndex = currentLineHeight ? heights.indexOf(currentLineHeight) : -1;
+  } else if (optionId === 'saturation') {
+    const currentSaturation = localStorage.getItem('saturation');
+    const saturations = ['low', 'high', 'none'];
+    currentIndex = currentSaturation ? saturations.indexOf(currentSaturation) : -1;
+  }
+  
+  // Update step indicators - show all previous steps as active
+  steps.forEach((step, index) => {
+    if (index <= currentIndex) {
+      step.classList.add('active');
+    } else {
+      step.classList.remove('active');
+    }
+  });
+
+  // Toggle active class on button itself if any option is selected
+  if (currentIndex !== -1) {
+    button.classList.add('active');
+    button.setAttribute('aria-pressed', 'true');
+  } else {
+    button.classList.remove('active');
+    button.setAttribute('aria-pressed', 'false');
   }
 }
 
@@ -879,15 +1558,15 @@ function handleFontSelection() {
   const currentFont = localStorage.getItem('fontSelection') || 'default';
   const currentIndex = fonts.indexOf(currentFont);
   const nextIndex = (currentIndex + 1) % (fonts.length + 1); // +1 for default
-  
+
   // Remove all font classes in one operation
   const fontClasses = ['snn-font-arial', 'snn-font-times', 'snn-font-verdana'];
   domCache.body.classList.remove(...fontClasses);
-  
+
   if (nextIndex === fonts.length) {
     // Default font
     localStorage.removeItem('fontSelection');
-    return WIDGET_CONFIG.lang.defaultFont;
+    return getTranslation('defaultFont');
   } else {
     const selectedFont = fonts[nextIndex];
     localStorage.setItem('fontSelection', selectedFont);
@@ -896,21 +1575,47 @@ function handleFontSelection() {
   }
 }
 
+// Saturation handler with 3 states (low, high, none/grayscale)
+function handleSaturation() {
+  const saturations = ['low', 'high', 'none'];
+  const currentSaturation = localStorage.getItem('saturation') || 'default';
+  const currentIndex = saturations.indexOf(currentSaturation);
+  const nextIndex = (currentIndex + 1) % (saturations.length + 1); // +1 for default
+
+  // Remove all saturation classes in one operation
+  const saturationClasses = ['snn-saturation-low', 'snn-saturation-high', 'snn-saturation-none'];
+  domCache.documentElement.classList.remove(...saturationClasses);
+
+  if (nextIndex === saturations.length) {
+    // Default saturation
+    localStorage.removeItem('saturation');
+    return 'Default';
+  } else {
+    const selectedSaturation = saturations[nextIndex];
+    localStorage.setItem('saturation', selectedSaturation);
+    domCache.documentElement.classList.add(`snn-saturation-${selectedSaturation}`);
+    if (selectedSaturation === 'none') {
+      return 'No Saturation';
+    }
+    return selectedSaturation.charAt(0).toUpperCase() + selectedSaturation.slice(1) + ' Saturation';
+  }
+}
+
 // Color filter handler (optimized)
 function handleColorFilter() {
   const filters = ['protanopia', 'deuteranopia', 'tritanopia', 'grayscale'];
   const currentFilter = localStorage.getItem('colorFilter') || 'none';
   const currentIndex = filters.indexOf(currentFilter);
   const nextIndex = (currentIndex + 1) % (filters.length + 1); // +1 for none
-  
+
   // Remove all filter classes in one operation
   const filterClasses = ['snn-filter-protanopia', 'snn-filter-deuteranopia', 'snn-filter-tritanopia', 'snn-filter-grayscale'];
   domCache.documentElement.classList.remove(...filterClasses);
-  
+
   if (nextIndex === filters.length) {
     // No filter
     localStorage.removeItem('colorFilter');
-    return WIDGET_CONFIG.lang.noFilter;
+    return getTranslation('noFilter');
   } else {
     const selectedFilter = filters[nextIndex];
     localStorage.setItem('colorFilter', selectedFilter);
@@ -925,15 +1630,15 @@ function handleTextAlign() {
   const currentAlign = localStorage.getItem('textAlign') || 'none';
   const currentIndex = alignments.indexOf(currentAlign);
   const nextIndex = (currentIndex + 1) % (alignments.length + 1); // +1 for none
-  
+
   // Remove all alignment classes
   const alignClasses = ['snn-text-align-left', 'snn-text-align-center', 'snn-text-align-right'];
   domCache.body.classList.remove(...alignClasses);
-  
+
   if (nextIndex === alignments.length) {
     // Default alignment
     localStorage.removeItem('textAlign');
-    return WIDGET_CONFIG.lang.default;
+    return getTranslation('default');
   } else {
     const selectedAlign = alignments[nextIndex];
     localStorage.setItem('textAlign', selectedAlign);
@@ -948,15 +1653,15 @@ function handleBiggerText() {
   const currentSize = localStorage.getItem('biggerText') || 'none';
   const currentIndex = textSizes.indexOf(currentSize);
   const nextIndex = (currentIndex + 1) % (textSizes.length + 1); // +1 for none
-  
+
   // Remove all text size classes
   const textClasses = ['snn-bigger-text-medium', 'snn-bigger-text-large', 'snn-bigger-text-xlarge'];
   domCache.body.classList.remove(...textClasses);
-  
+
   if (nextIndex === textSizes.length) {
     // Default text size
     localStorage.removeItem('biggerText');
-    return WIDGET_CONFIG.lang.default;
+    return getTranslation('default');
   } else {
     const selectedSize = textSizes[nextIndex];
     localStorage.setItem('biggerText', selectedSize);
@@ -971,23 +1676,69 @@ function handleHighContrast() {
   const currentContrast = localStorage.getItem('highContrast') || 'none';
   const currentIndex = contrastLevels.indexOf(currentContrast);
   const nextIndex = (currentIndex + 1) % (contrastLevels.length + 1); // +1 for none
-  
+
   // Remove all contrast classes
   const contrastClasses = ['snn-high-contrast-medium', 'snn-high-contrast-high', 'snn-high-contrast-ultra'];
-  domCache.documentElement.classList.remove(...contrastClasses);
-  
+  domCache.body.classList.remove(...contrastClasses);
+
   if (nextIndex === contrastLevels.length) {
     // Default contrast
     localStorage.removeItem('highContrast');
-    return WIDGET_CONFIG.lang.default;
+    return getTranslation('default');
   } else {
     const selectedContrast = contrastLevels[nextIndex];
     localStorage.setItem('highContrast', selectedContrast);
-    domCache.documentElement.classList.add(`snn-high-contrast-${selectedContrast}`);
+    domCache.body.classList.add(`snn-high-contrast-${selectedContrast}`);
     return selectedContrast.charAt(0).toUpperCase() + selectedContrast.slice(1);
   }
 }
 
+// Text Spacing Handler with 3 states (1em, 2em, 4em equivalents)
+function handleTextSpacing() {
+  const spacings = ['light', 'medium', 'heavy']; // Maps to 1, 2, 4 approx
+  const currentSpacing = localStorage.getItem('textSpacing') || 'none';
+  const currentIndex = spacings.indexOf(currentSpacing);
+  const nextIndex = (currentIndex + 1) % (spacings.length + 1); // +1 for none
+
+  // Remove all spacing classes
+  const spacingClasses = ['snn-text-spacing-light', 'snn-text-spacing-medium', 'snn-text-spacing-heavy'];
+  domCache.body.classList.remove(...spacingClasses);
+
+  if (nextIndex === spacings.length) {
+    // Default
+    localStorage.removeItem('textSpacing');
+    return getTranslation('default');
+  } else {
+    const selectedSpacing = spacings[nextIndex];
+    localStorage.setItem('textSpacing', selectedSpacing);
+    domCache.body.classList.add(`snn-text-spacing-${selectedSpacing}`);
+    return selectedSpacing.charAt(0).toUpperCase() + selectedSpacing.slice(1);
+  }
+}
+
+// Line Height Handler with 3 states (2em, 3em, 4em)
+function handleLineHeight() {
+  const heights = ['2em', '3em', '4em'];
+  const currentHeight = localStorage.getItem('lineHeight') || 'none';
+  const currentIndex = heights.indexOf(currentHeight);
+  const nextIndex = (currentIndex + 1) % (heights.length + 1); // +1 for none
+
+  // Remove all line height classes
+  const heightClasses = ['snn-line-height-2em', 'snn-line-height-3em', 'snn-line-height-4em'];
+  domCache.body.classList.remove(...heightClasses);
+
+  if (nextIndex === heights.length) {
+    // Default
+    localStorage.removeItem('lineHeight');
+    return getTranslation('default');
+  } else{
+    const selectedHeight = heights[nextIndex];
+    localStorage.setItem('lineHeight', selectedHeight);
+    domCache.body.classList.add(`snn-line-height-${selectedHeight}`);
+    return selectedHeight;
+  }
+}
+
 // ===========================================
 // ACCESSIBILITY FEATURES
 // ===========================================
@@ -1004,7 +1755,7 @@ const screenReader = {
           window.speechSynthesis.cancel();
           const speech = new SpeechSynthesisUtterance(content);
           speech.lang = 'en-US';
-          speech.onerror = function(event) {
+          speech.onerror = function (event) {
             console.warn('Speech synthesis error:', event.error);
           };
           window.speechSynthesis.speak(speech);
@@ -1016,28 +1767,28 @@ const screenReader = {
   },
   toggle: function (isActive) {
     if (!screenReader.isSupported) {
-      console.warn(`Speech synthesis ${WIDGET_CONFIG.lang.notSupportedBrowser}`);
+      console.warn(`Speech synthesis ${getTranslation('notSupportedBrowser')}`);
       return false;
     }
-    
+
     screenReader.active = isActive;
     localStorage.setItem('screenReader', isActive);
-    
+
     try {
       if (isActive) {
         document.addEventListener('focusin', screenReader.handleFocus);
-        const feedbackSpeech = new SpeechSynthesisUtterance(WIDGET_CONFIG.lang.screenReaderOn);
+        const feedbackSpeech = new SpeechSynthesisUtterance(getTranslation('screenReaderOn'));
         feedbackSpeech.lang = 'en-US';
-        feedbackSpeech.onerror = function(event) {
+        feedbackSpeech.onerror = function (event) {
           console.warn('Speech synthesis feedback error:', event.error);
         };
         window.speechSynthesis.speak(feedbackSpeech);
       } else {
         document.removeEventListener('focusin', screenReader.handleFocus);
         window.speechSynthesis.cancel();
-        const feedbackSpeech = new SpeechSynthesisUtterance(WIDGET_CONFIG.lang.screenReaderOff);
+        const feedbackSpeech = new SpeechSynthesisUtterance(getTranslation('screenReaderOff'));
         feedbackSpeech.lang = 'en-US';
-        feedbackSpeech.onerror = function(event) {
+        feedbackSpeech.onerror = function (event) {
           console.warn('Speech synthesis feedback error:', event.error);
         };
         window.speechSynthesis.speak(feedbackSpeech);
@@ -1046,7 +1797,7 @@ const screenReader = {
       console.warn('Screen reader toggle error:', error);
       return false;
     }
-    
+
     return true;
   },
 };
@@ -1060,13 +1811,13 @@ const voiceControl = {
   maxRetries: 3,
   toggle: function (isActive) {
     if (!voiceControl.isSupported) {
-      console.warn(`Speech Recognition API ${WIDGET_CONFIG.lang.notSupportedBrowser}`);
+      console.warn(`Speech Recognition API ${getTranslation('notSupportedBrowser')}`);
       return false;
     }
-    
+
     voiceControl.isActive = isActive;
     localStorage.setItem('voiceControl', isActive);
-    
+
     try {
       if (isActive) {
         voiceControl.startListening();
@@ -1081,14 +1832,14 @@ const voiceControl = {
       console.warn('Voice control toggle error:', error);
       return false;
     }
-    
+
     return true;
   },
   startListening: function () {
     if (!voiceControl.isSupported) {
       return;
     }
-    
+
     try {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       voiceControl.recognition = new SpeechRecognition();
@@ -1097,7 +1848,7 @@ const voiceControl = {
       voiceControl.recognition.continuous = false;
 
       voiceControl.recognition.onstart = function () {
-        console.log(WIDGET_CONFIG.lang.voiceControlActivated);
+        console.log(getTranslation('voiceControlActivated'));
         voiceControl.retryCount = 0;
       };
 
@@ -1139,10 +1890,10 @@ const voiceControl = {
   },
   handleVoiceCommand: function (command) {
     console.log(`Received command: ${command}`);
-    
+
     try {
       // Check for show menu commands
-      if (WIDGET_CONFIG.voiceCommands.showMenu.includes(command)) {
+      if (WIDGET_CONFIG.voiceCommands.showMenu.some(cmd => command.includes(cmd))) {
         if (!menuCache.button) menuCache.init();
         if (menuCache.button) {
           menuCache.button.click();
@@ -1151,36 +1902,36 @@ const voiceControl = {
       }
 
       // Check for reset all commands
-      if (WIDGET_CONFIG.voiceCommands.resetAll.includes(command)) {
+      if (WIDGET_CONFIG.voiceCommands.resetAll.some(cmd => command.includes(cmd))) {
         resetAccessibilitySettings();
         return;
       }
 
       // Build dynamic command map based on configuration
       let localStorageKey = null;
-      
+
       // Check each command group
-      if (WIDGET_CONFIG.voiceCommands.highContrast.includes(command)) {
+      if (WIDGET_CONFIG.voiceCommands.highContrast.some(cmd => command.includes(cmd))) {
         localStorageKey = 'highContrast';
-      } else if (WIDGET_CONFIG.voiceCommands.biggerText.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.biggerText.some(cmd => command.includes(cmd))) {
         localStorageKey = 'biggerText';
-      } else if (WIDGET_CONFIG.voiceCommands.textSpacing.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.textSpacing.some(cmd => command.includes(cmd))) {
         localStorageKey = 'textSpacing';
-      } else if (WIDGET_CONFIG.voiceCommands.pauseAnimations.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.pauseAnimations.some(cmd => command.includes(cmd))) {
         localStorageKey = 'pauseAnimations';
-      } else if (WIDGET_CONFIG.voiceCommands.hideImages.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.hideImages.some(cmd => command.includes(cmd))) {
         localStorageKey = 'hideImages';
-      } else if (WIDGET_CONFIG.voiceCommands.dyslexiaFont.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.dyslexiaFont.some(cmd => command.includes(cmd))) {
         localStorageKey = 'dyslexiaFont';
-      } else if (WIDGET_CONFIG.voiceCommands.biggerCursor.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.biggerCursor.some(cmd => command.includes(cmd))) {
         localStorageKey = 'biggerCursor';
-      } else if (WIDGET_CONFIG.voiceCommands.lineHeight.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.lineHeight.some(cmd => command.includes(cmd))) {
         localStorageKey = 'lineHeight';
-      } else if (WIDGET_CONFIG.voiceCommands.textAlign.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.textAlign.some(cmd => command.includes(cmd))) {
         localStorageKey = 'textAlign';
-      } else if (WIDGET_CONFIG.voiceCommands.screenReader.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.screenReader.some(cmd => command.includes(cmd))) {
         localStorageKey = 'screenReader';
-      } else if (WIDGET_CONFIG.voiceCommands.voiceControl.includes(command)) {
+      } else if (WIDGET_CONFIG.voiceCommands.voiceControl.some(cmd => command.includes(cmd))) {
         localStorageKey = 'voiceControl';
       }
 
@@ -1216,20 +1967,28 @@ function createAccessibilityMenu() {
   const header = document.createElement('div');
   header.classList.add('snn-header');
 
-  const title = document.createElement('h2');
+  const title = document.createElement('div');
   title.classList.add('snn-title');
   title.id = 'snn-accessibility-title';
-  title.textContent = WIDGET_CONFIG.lang.accessibilityTools;
+  title.textContent = getTranslation('accessibilityTools');
 
+  // Create reset button
+  const resetButton = document.createElement('button');
+  resetButton.classList.add('snn-reset-button');
+  resetButton.innerHTML = `${icons.resetAll}<span class="snn-tooltip">${getTranslation('reset')}</span>`;
+  resetButton.setAttribute('aria-label', getTranslation('resetAllSettings'));
+  resetButton.addEventListener('click', resetAccessibilitySettings);
+
+  // Create close button
   const closeButton = document.createElement('button');
   closeButton.className = 'snn-close';
-  closeButton.innerHTML = '';
-  closeButton.setAttribute('title', WIDGET_CONFIG.lang.closeAccessibilityMenu);
+  closeButton.innerHTML = `<span class="snn-tooltip">${getTranslation('close')}</span>`;
+  closeButton.setAttribute('aria-label', getTranslation('closeAccessibilityMenu'));
 
   closeButton.addEventListener('click', function () {
     closeMenu();
   });
-  
+
   closeButton.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -1238,6 +1997,7 @@ function createAccessibilityMenu() {
   });
 
   header.appendChild(title);
+  header.appendChild(resetButton);
   header.appendChild(closeButton);
   menu.appendChild(header);
 
@@ -1245,136 +2005,271 @@ function createAccessibilityMenu() {
   const content = document.createElement('div');
   content.classList.add('snn-content');
 
-  // Create reset button (outside grid, full width)
-  const resetButton = document.createElement('button');
-  resetButton.innerHTML = `<span class="snn-icon">${icons.resetAll}</span><span class="snn-button-text">${WIDGET_CONFIG.lang.resetAllSettings}</span>`;
-  resetButton.setAttribute('aria-label', WIDGET_CONFIG.lang.resetAllSettings);
-  resetButton.classList.add('snn-reset-button');
-  resetButton.addEventListener('click', resetAccessibilitySettings);
-  content.appendChild(resetButton);
+  // Create language selector dropdown
+  const languageSelector = document.createElement('select');
+  languageSelector.classList.add('snn-language-selector');
+  languageSelector.setAttribute('aria-label', getTranslation('selectLanguage'));
+  
+  const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'de', name: 'Deutsch' },
+    { code: 'es', name: 'Español' },
+    { code: 'it', name: 'Italiano' },
+    { code: 'fr', name: 'Français' },
+    { code: 'ru', name: 'Русский' },
+    { code: 'tr', name: 'Türkçe' },
+    { code: 'ar', name: 'العربية' },
+    { code: 'hi', name: 'हिन्दी' },
+    { code: 'zh-cn', name: '简体中文' },
+    { code: 'jp', name: '日本語' }
+  ];
+  
+  languages.forEach(lang => {
+    const option = document.createElement('option');
+    option.value = lang.code;
+    option.textContent = lang.name;
+    if (lang.code === currentLanguage) {
+      option.selected = true;
+    }
+    languageSelector.appendChild(option);
+  });
+  
+  languageSelector.addEventListener('change', function(e) {
+    const newLang = e.target.value;
+    if (setLanguage(newLang)) {
+      // Recreate the menu with new language
+      updateMenuLanguage();
+    }
+  });
+  
+  content.appendChild(languageSelector);
 
   // Create grid wrapper for accessibility options
   const optionsGrid = document.createElement('div');
   optionsGrid.classList.add('snn-options-grid');
 
-  // Add accessibility options based on configuration
-  const options = [
+  // ===================================================================
+  // UNIFIED BUTTON CONFIGURATION WITH EXPLICIT ORDERING
+  // Add/remove/reorder buttons by changing the 'order' property
+  // Lower order numbers appear first, higher numbers appear last
+  // ===================================================================
+  const allButtonConfigs = [
+    // Order 1-4: Primary accessibility features
     {
-      text: WIDGET_CONFIG.lang.screenReader,
-      key: 'screenReader',
-      customToggleFunction: screenReader.toggle,
-      icon: icons.screenReader,
-      requiresFeature: screenReader,
-      enabled: WIDGET_CONFIG.enableScreenReader,
+      order: 1,
+      type: 'action',
+      text: getTranslation('textSize'),
+      actionFunction: handleBiggerText,
+      icon: icons.biggerText,
+      enabled: WIDGET_CONFIG.enableBiggerText,
+      optionsConfig: { count: 3 },
+      optionId: 'biggerText'
     },
     {
-      text: WIDGET_CONFIG.lang.voiceCommand,
-      key: 'voiceControl',
-      customToggleFunction: voiceControl.toggle,
-      icon: icons.voiceControl,
-      requiresFeature: voiceControl,
-      enabled: WIDGET_CONFIG.enableVoiceControl,
+      order: 2,
+      type: 'action',
+      text: getTranslation('highContrast'),
+      actionFunction: handleHighContrast,
+      icon: icons.highContrast,
+      enabled: WIDGET_CONFIG.enableHighContrast,
+      optionsConfig: { count: 3 },
+      optionId: 'highContrast'
     },
     {
-      text: WIDGET_CONFIG.lang.textSpacing,
-      key: 'textSpacing',
-      className: 'snn-text-spacing',
+      order: 3,
+      type: 'action',
+      text: getTranslation('textAlign'),
+      actionFunction: handleTextAlign,
+      icon: icons.textAlign,
+      enabled: WIDGET_CONFIG.enableTextAlign,
+      optionsConfig: { count: 3 },
+      optionId: 'textAlign'
+    },
+    {
+      order: 4,
+      type: 'action',
+      text: getTranslation('colorFilter'),
+      actionFunction: handleColorFilter,
+      icon: icons.colorFilter,
+      enabled: WIDGET_CONFIG.enableColorFilter,
+      optionsConfig: { count: 4 },
+      optionId: 'colorFilter'
+    },
+    
+    // Order 5-11: Other visual/text features
+    {
+      order: 5,
+      type: 'action', // Changed from toggle to action
+      text: getTranslation('textSpacing'),
+      actionFunction: handleTextSpacing,
       icon: icons.textSpacing,
       enabled: WIDGET_CONFIG.enableTextSpacing,
+      optionsConfig: { count: 3 },
+      optionId: 'textSpacing'
     },
     {
-      text: WIDGET_CONFIG.lang.pauseAnimations,
-      key: 'pauseAnimations',
-      className: 'snn-pause-animations',
-      icon: icons.pauseAnimations,
-      enabled: WIDGET_CONFIG.enablePauseAnimations,
+      order: 6,
+      type: 'action', // Changed from toggle to action
+      text: getTranslation('lineHeight'),
+      actionFunction: handleLineHeight,
+      icon: icons.lineHeight,
+      enabled: WIDGET_CONFIG.enableLineHeight,
+      optionsConfig: { count: 3 },
+      optionId: 'lineHeight'
     },
     {
-      text: WIDGET_CONFIG.lang.hideImages,
-      key: 'hideImages',
-      icon: icons.hideImages,
-      customToggleFunction: toggleHideImages,
-      enabled: WIDGET_CONFIG.enableHideImages,
+      order: 7,
+      type: 'action',
+      text: getTranslation('fontSelection'),
+      actionFunction: handleFontSelection,
+      icon: icons.fontSelection,
+      enabled: WIDGET_CONFIG.enableFontSelection,
+      optionsConfig: { count: 3 },
+      optionId: 'fontSelection'
+    },
+    {
+      order: 7.5,
+      type: 'action',
+      text: getTranslation('saturation'),
+      actionFunction: handleSaturation,
+      icon: icons.saturation,
+      enabled: true,
+      optionsConfig: { count: 3 },
+      optionId: 'saturation'
     },
     {
-      text: WIDGET_CONFIG.lang.dyslexiaFriendly,
+      order: 8,
+      type: 'toggle',
+      text: getTranslation('dyslexiaFriendly'),
       key: 'dyslexiaFont',
       className: 'snn-dyslexia-font',
       icon: icons.dyslexiaFont,
       enabled: WIDGET_CONFIG.enableDyslexiaFont,
+      optionId: 'dyslexiaFont'
     },
     {
-      text: WIDGET_CONFIG.lang.biggerCursor,
+      order: 9,
+      type: 'toggle',
+      text: getTranslation('biggerCursor'),
       key: 'biggerCursor',
       className: 'snn-bigger-cursor',
       icon: icons.biggerCursor,
       enabled: WIDGET_CONFIG.enableBiggerCursor,
+      optionId: 'biggerCursor'
     },
     {
-      text: WIDGET_CONFIG.lang.lineHeight,
-      key: 'lineHeight',
-      className: 'snn-line-height',
-      icon: icons.lineHeight,
-      enabled: WIDGET_CONFIG.enableLineHeight,
+      order: 10,
+      type: 'toggle',
+      text: getTranslation('hideImages'),
+      key: 'hideImages',
+      icon: icons.hideImages,
+      customToggleFunction: toggleHideImages,
+      enabled: WIDGET_CONFIG.enableHideImages,
+      optionId: 'hideImages'
+    },
+    
+    // Order 11: Animation controls (Reduced Motion merged here)
+    {
+      order: 11,
+      type: 'toggle',
+      text: getTranslation('pauseAnimations'),
+      key: 'pauseAnimations',
+      className: 'snn-pause-animations',
+      icon: icons.pauseAnimations,
+      enabled: WIDGET_CONFIG.enablePauseAnimations,
+      optionId: 'pauseAnimations'
+    },
+    
+    // Order 98-99: Screen Reader and Voice Control (always last)
+    {
+      order: 98,
+      type: 'toggle',
+      text: getTranslation('screenReader'),
+      key: 'screenReader',
+      customToggleFunction: screenReader.toggle,
+      icon: icons.screenReader,
+      requiresFeature: screenReader,
+      enabled: WIDGET_CONFIG.enableScreenReader,
+      optionId: 'screenReader'
     },
     {
-      text: WIDGET_CONFIG.lang.reducedMotion,
-      key: 'reducedMotion',
-      className: 'snn-reduced-motion',
-      icon: icons.reducedMotion,
-      enabled: WIDGET_CONFIG.enableReducedMotion,
+      order: 99,
+      type: 'toggle',
+      text: getTranslation('voiceCommand'),
+      key: 'voiceControl',
+      customToggleFunction: voiceControl.toggle,
+      icon: icons.voiceControl,
+      requiresFeature: voiceControl,
+      enabled: WIDGET_CONFIG.enableVoiceControl,
+      optionId: 'voiceControl'
     },
   ];
+
+  // Sort buttons by order and add only enabled ones to the grid
+  allButtonConfigs
+    .filter(config => config.enabled)
+    .sort((a, b) => a.order - b.order)
+    .forEach((config) => {
+      let button;
+      
+      if (config.type === 'action') {
+        button = createActionButton(config.text, config.actionFunction, config.icon, config.optionsConfig, config.optionId);
+      } else if (config.type === 'toggle') {
+        button = createToggleButton(
+          config.text,
+          config.key,
+          config.className,
+          config.target || document.body,
+          config.customToggleFunction,
+          config.icon,
+          config.requiresFeature,
+          config.optionId
+        );
+      }
+      
+      if (button) {
+        optionsGrid.appendChild(button);
+      }
+    });
+
+  // Add grid to content
+  content.appendChild(optionsGrid);
+
+  // Add content to menu
+  menu.appendChild(content);
+
+  shadowRoot.appendChild(menu);
+}
+
+// Update menu language without recreating everything
+function updateMenuLanguage() {
+  const menu = shadowRoot.getElementById('snn-accessibility-menu');
+  if (!menu) return;
   
-  // Add enabled toggle options to grid
-  options.forEach((option) => {
-    if (option.enabled) {
-      const button = createToggleButton(
-        option.text,
-        option.key,
-        option.className,
-        option.target,
-        option.customToggleFunction,
-        option.icon,
-        option.requiresFeature
-      );
-      optionsGrid.appendChild(button);
-    }
-  });
+  const wasOpen = menu.style.display === 'block';
   
-  // Add action buttons (font selection and color filters) to grid if enabled
-  if (WIDGET_CONFIG.enableFontSelection) {
-    const fontButton = createActionButton(WIDGET_CONFIG.lang.fontSelection, handleFontSelection, icons.fontSelection);
-    optionsGrid.appendChild(fontButton);
-  }
+  // Remove old menu
+  menu.remove();
   
-  if (WIDGET_CONFIG.enableColorFilter) {
-    const colorButton = createActionButton(WIDGET_CONFIG.lang.colorFilter, handleColorFilter, icons.colorFilter);
-    optionsGrid.appendChild(colorButton);
-  }
+  // Clear cache
+  menuCache.menu = null;
+  menuCache.closeButton = null;
+  keyboardCache.focusableElements = null;
   
-  if (WIDGET_CONFIG.enableTextAlign) {
-    const textAlignButton = createActionButton(WIDGET_CONFIG.lang.textAlign, handleTextAlign, icons.textAlign);
-    optionsGrid.appendChild(textAlignButton);
-  }
+  // Recreate menu
+  createAccessibilityMenu();
   
-  if (WIDGET_CONFIG.enableBiggerText) {
-    const biggerTextButton = createActionButton(WIDGET_CONFIG.lang.textSize, handleBiggerText, icons.biggerText);
-    optionsGrid.appendChild(biggerTextButton);
+  // Update button aria-label
+  const mainButton = shadowRoot.getElementById('snn-accessibility-button');
+  if (mainButton) {
+    mainButton.setAttribute('aria-label', getTranslation('accessibilityMenu'));
   }
   
-  if (WIDGET_CONFIG.enableHighContrast) {
-    const highContrastButton = createActionButton(WIDGET_CONFIG.lang.highContrast, handleHighContrast, icons.highContrast);
-    optionsGrid.appendChild(highContrastButton);
+  // Reopen if it was open
+  if (wasOpen) {
+    menuCache.init();
+    openMenu();
   }
-
-  // Add grid to content
-  content.appendChild(optionsGrid);
-  
-  // Add content to menu
-  menu.appendChild(content);
-
-  document.body.appendChild(menu);
 }
 
 // ===========================================
@@ -1386,9 +2281,9 @@ const menuCache = {
   menu: null,
   button: null,
   closeButton: null,
-  init: function() {
-    this.menu = document.getElementById('snn-accessibility-menu');
-    this.button = document.getElementById('snn-accessibility-button');
+  init: function () {
+    this.menu = shadowRoot.getElementById('snn-accessibility-menu');
+    this.button = shadowRoot.getElementById('snn-accessibility-button');
     this.closeButton = this.menu?.querySelector('.snn-close');
   }
 };
@@ -1397,7 +2292,7 @@ const menuCache = {
 function toggleMenu() {
   if (!menuCache.menu) menuCache.init();
   const isOpen = menuCache.menu.style.display === 'block';
-  
+
   if (isOpen) {
     closeMenu();
   } else {
@@ -1409,11 +2304,15 @@ function openMenu() {
   if (!menuCache.menu) menuCache.init();
   menuCache.menu.style.display = 'block';
   menuCache.menu.setAttribute('aria-hidden', 'false');
-  
-  if (menuCache.closeButton) {
+
+  // UPDATED: Now focuses on the first tool button instead of the Close button
+  const firstOption = menuCache.menu.querySelector('.snn-accessibility-option');
+  if (firstOption) {
+    firstOption.focus();
+  } else if (menuCache.closeButton) {
     menuCache.closeButton.focus();
   }
-  
+
   // Add keyboard navigation
   document.addEventListener('keydown', handleMenuKeyboard);
 }
@@ -1422,11 +2321,11 @@ function closeMenu() {
   if (!menuCache.menu) menuCache.init();
   menuCache.menu.style.display = 'none';
   menuCache.menu.setAttribute('aria-hidden', 'true');
-  
+
   if (menuCache.button) {
     menuCache.button.focus();
   }
-  
+
   // Remove keyboard navigation
   document.removeEventListener('keydown', handleMenuKeyboard);
 }
@@ -1435,13 +2334,13 @@ function closeMenu() {
 let keyboardCache = {
   focusableElements: null,
   lastUpdate: 0,
-  getFocusableElements: function() {
+  getFocusableElements: function () {
     const now = Date.now();
     if (!this.focusableElements || now - this.lastUpdate > 1000) {
       if (menuCache.menu) {
         this.focusableElements = {
           all: menuCache.menu.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
-          options: Array.from(menuCache.menu.querySelectorAll('.snn-accessibility-option, .snn-close'))
+          options: Array.from(menuCache.menu.querySelectorAll('.snn-accessibility-option, .snn-close, .snn-reset-button'))
         };
         this.lastUpdate = now;
       }
@@ -1452,20 +2351,20 @@ let keyboardCache = {
 
 function handleMenuKeyboard(e) {
   if (!menuCache.menu || menuCache.menu.style.display !== 'block') return;
-  
+
   if (e.key === 'Escape') {
     e.preventDefault();
     closeMenu();
     return;
   }
-  
+
   const elements = keyboardCache.getFocusableElements();
   if (!elements) return;
-  
+
   if (e.key === 'Tab') {
     const firstElement = elements.all[0];
     const lastElement = elements.all[elements.all.length - 1];
-    
+
     if (e.shiftKey) {
       if (document.activeElement === firstElement) {
         e.preventDefault();
@@ -1478,18 +2377,18 @@ function handleMenuKeyboard(e) {
       }
     }
   }
-  
+
   if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
     e.preventDefault();
-    const currentIndex = elements.options.indexOf(document.activeElement);
+    const currentIndex = elements.options.indexOf(shadowRoot.activeElement);
     let nextIndex;
-    
+
     if (e.key === 'ArrowDown') {
       nextIndex = currentIndex === elements.options.length - 1 ? 0 : currentIndex + 1;
     } else {
       nextIndex = currentIndex === 0 ? elements.options.length - 1 : currentIndex - 1;
     }
-    
+
     elements.options[nextIndex].focus();
   }
 }
@@ -1500,8 +2399,16 @@ function handleMenuKeyboard(e) {
 
 // Initialize the widget
 function initAccessibilityWidget() {
-  injectStyles();
+  // Create shadow DOM first
+  createShadowContainer();
+  
+  // Inject page styles (for accessibility features)
+  injectPageStyles();
+  
+  // Apply saved settings
   applySettings();
+  
+  // Create widget UI inside shadow DOM
   createAccessibilityButton();
   createAccessibilityMenu();
 }
@@ -1515,103 +2422,4 @@ if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initAccessibilityWidget);
 } else {
   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>
-  
-===========================================
-*/
+}