From d35af73dc7f7dafb42564f247cfe6ec71f8de397 Mon Sep 17 00:00:00 2001 From: sinanisler Date: Mon, 23 Jun 2025 12:38:17 +0300 Subject: [PATCH] Add customizable voice commands and grid layout configuration to enhance accessibility widget --- README.md | 61 +++++++++++++++++++--- widget.js | 151 +++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 174 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 51d4cd7..e1852cb 100644 --- a/README.md +++ b/README.md @@ -301,6 +301,29 @@ window.ACCESSIBILITY_WIDGET_CONFIG = { screenReaderOff: 'Screen reader off', voiceControlActivated: 'Voice control activated', notSupportedBrowser: 'is not supported in this browser' + }, + + // Voice Command Configuration - Customize voice commands for different languages + voiceCommands: { + showMenu: ['show menu', 'open menu', 'accessibility menu'], + highContrast: ['high contrast'], + biggerText: ['bigger text', 'large text'], + textSpacing: ['text spacing'], + pauseAnimations: ['pause animations', 'stop animations'], + hideImages: ['hide images'], + dyslexiaFont: ['dyslexia friendly', 'dyslexia font'], + biggerCursor: ['bigger cursor', 'large cursor'], + lineHeight: ['line height'], + textAlign: ['align text', 'text align'], + screenReader: ['screen reader'], + voiceControl: ['voice command', 'voice control'], + resetAll: ['reset all', 'reset everything'] + }, + + // Grid Layout Configuration - Customize button grid layout + gridLayout: { + columns: '1fr 1fr', // Default 2-column layout (change to '1fr 1fr 1fr' for 3 columns, etc.) + gap: '10px' // Gap between grid items } }; @@ -340,7 +363,7 @@ window.ACCESSIBILITY_WIDGET_CONFIG = { ``` ### Internationalization (i18n) -The widget supports full internationalization. You can customize all text strings: +The widget supports full internationalization. You can customize all text strings and voice commands: ```html @@ -362,18 +402,23 @@ window.ACCESSIBILITY_WIDGET_CONFIG = { ## Voice Commands -When voice control is enabled, users can activate features using these commands: +When voice control is enabled, users can activate features using these commands (default English commands shown - fully customizable via `voiceCommands` configuration): -- "show menu" / "open menu" - Opens the accessibility menu +- "show menu" / "open menu" / "accessibility menu" - Opens the accessibility menu - "high contrast" - Toggles high contrast mode -- "bigger text" - Toggles larger text size +- "bigger text" / "large text" - Toggles larger text size - "text spacing" - Toggles text spacing -- "pause animations" - Toggles animation pausing +- "pause animations" / "stop animations" - Toggles animation pausing - "hide images" - Toggles image hiding -- "dyslexia font" - Toggles dyslexia-friendly font -- "bigger cursor" - Toggles larger cursor +- "dyslexia friendly" / "dyslexia font" - Toggles dyslexia-friendly font +- "bigger cursor" / "large cursor" - Toggles larger cursor +- "line height" - Toggles line height adjustment +- "align text" / "text align" - Cycles through text alignment options - "screen reader" - Toggles screen reader -- "reset all" - Resets all accessibility settings +- "voice command" / "voice control" - Toggles voice control +- "reset all" / "reset everything" - Resets all accessibility settings + +**Note:** All voice commands can be customized for different languages using the `voiceCommands` configuration option. ## Browser Compatibility diff --git a/widget.js b/widget.js index 486cb27..c052526 100644 --- a/widget.js +++ b/widget.js @@ -115,6 +115,29 @@ const DEFAULT_WIDGET_CONFIG = { voiceControlActivated: 'Voice control activated', notSupportedBrowser: 'is not supported in this browser', close: 'Close' + }, + + // Voice Command Configuration - Developers can customize commands for different languages + voiceCommands: { + showMenu: ['show menu', 'open menu', 'accessibility menu'], + highContrast: ['high contrast'], + biggerText: ['bigger text', 'large text'], + textSpacing: ['text spacing'], + pauseAnimations: ['pause animations', 'stop animations'], + hideImages: ['hide images'], + dyslexiaFont: ['dyslexia friendly', 'dyslexia font'], + biggerCursor: ['bigger cursor', 'large cursor'], + lineHeight: ['line height'], + textAlign: ['align text', 'text align'], + screenReader: ['screen reader'], + voiceControl: ['voice command', 'voice control'], + resetAll: ['reset all', 'reset everything'] + }, + + // Grid Layout Configuration + gridLayout: { + columns: '1fr 1fr', // Default 2-column layout (can be changed to '1fr 1fr 1fr' for 3 columns, etc.) + gap: '10px' // Gap between grid items } }; @@ -294,8 +317,8 @@ const styles = ` .snn-options-grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: ${WIDGET_CONFIG.menu.optionMargin}; + grid-template-columns: ${WIDGET_CONFIG.gridLayout.columns}; + gap: ${WIDGET_CONFIG.gridLayout.gap}; margin-bottom: 20px; } @@ -1118,32 +1141,8 @@ const voiceControl = { console.log(`Received command: ${command}`); try { - const commandMap = { - 'show menu': 'snn-accessibility-button', - 'open menu': 'snn-accessibility-button', - 'accessibility menu': 'snn-accessibility-button', - 'high contrast': 'highContrast', - 'bigger text': 'biggerText', - 'large text': 'biggerText', - 'text spacing': 'textSpacing', - 'pause animations': 'pauseAnimations', - 'stop animations': 'pauseAnimations', - 'hide images': 'hideImages', - 'dyslexia friendly': 'dyslexiaFont', - 'dyslexia font': 'dyslexiaFont', - 'bigger cursor': 'biggerCursor', - 'large cursor': 'biggerCursor', - 'line height': 'lineHeight', - 'align text': 'textAlign', - 'text align': 'textAlign', - 'screen reader': 'screenReader', - 'voice command': 'voiceControl', - 'voice control': 'voiceControl', - 'reset all': 'resetAll', - 'reset everything': 'resetAll', - }; - - if (command === 'show menu' || command === 'open menu' || command === 'accessibility menu') { + // Check for show menu commands + if (WIDGET_CONFIG.voiceCommands.showMenu.includes(command)) { if (!menuCache.button) menuCache.init(); if (menuCache.button) { menuCache.button.click(); @@ -1151,12 +1150,40 @@ const voiceControl = { return; } - if (command === 'reset all' || command === 'reset everything') { + // Check for reset all commands + if (WIDGET_CONFIG.voiceCommands.resetAll.includes(command)) { resetAccessibilitySettings(); return; } - const localStorageKey = commandMap[command]; + // Build dynamic command map based on configuration + let localStorageKey = null; + + // Check each command group + if (WIDGET_CONFIG.voiceCommands.highContrast.includes(command)) { + localStorageKey = 'highContrast'; + } else if (WIDGET_CONFIG.voiceCommands.biggerText.includes(command)) { + localStorageKey = 'biggerText'; + } else if (WIDGET_CONFIG.voiceCommands.textSpacing.includes(command)) { + localStorageKey = 'textSpacing'; + } else if (WIDGET_CONFIG.voiceCommands.pauseAnimations.includes(command)) { + localStorageKey = 'pauseAnimations'; + } else if (WIDGET_CONFIG.voiceCommands.hideImages.includes(command)) { + localStorageKey = 'hideImages'; + } else if (WIDGET_CONFIG.voiceCommands.dyslexiaFont.includes(command)) { + localStorageKey = 'dyslexiaFont'; + } else if (WIDGET_CONFIG.voiceCommands.biggerCursor.includes(command)) { + localStorageKey = 'biggerCursor'; + } else if (WIDGET_CONFIG.voiceCommands.lineHeight.includes(command)) { + localStorageKey = 'lineHeight'; + } else if (WIDGET_CONFIG.voiceCommands.textAlign.includes(command)) { + localStorageKey = 'textAlign'; + } else if (WIDGET_CONFIG.voiceCommands.screenReader.includes(command)) { + localStorageKey = 'screenReader'; + } else if (WIDGET_CONFIG.voiceCommands.voiceControl.includes(command)) { + localStorageKey = 'voiceControl'; + } + if (localStorageKey) { // Use cached menu reference if available if (!menuCache.menu) menuCache.init(); @@ -1522,5 +1549,69 @@ if (document.readyState === 'loading') { - 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: + + + + =========================================== */ \ No newline at end of file