Fix SDK timeout and improve text contrast

SDK Loading Improvements:
- Increased timeout from 5 to 15 seconds for slower connections
- Added progressive status messages during SDK loading
- Enhanced console logging for debugging
- Added fallback SDK loading mechanism with inline script
- Better error diagnostics showing Twilio object status

Text Contrast Fixes:
- Updated all #333 colors to #212529 for better readability
- Fixed browser phone title, dial buttons, timer, queue headings
- Enhanced dark mode support for all text elements
- Improved readability on both light and dark backgrounds

Technical Changes:
- waitForTwilioSDK() now waits 150 attempts (15 seconds)
- Progressive status updates at 3s, 6s, 10s intervals
- Backup SDK loading via document.createElement
- Comprehensive dark mode color coverage
- Better error messaging for network issues

Accessibility Improvements:
- Higher contrast ratios for WCAG compliance
- Consistent text color hierarchy
- Better visibility in all lighting conditions
- Enhanced mobile readability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-08-13 14:22:37 -07:00
parent 24e3a3fcc2
commit e3fab38d01
3 changed files with 49 additions and 10 deletions

View File

@@ -26,7 +26,7 @@ class TWP_Shortcodes {
global $post;
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'twp_browser_phone')) {
// Enqueue Twilio Voice SDK
// Enqueue Twilio Voice SDK with multiple fallbacks
wp_enqueue_script(
'twilio-voice-sdk',
'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js',
@@ -35,6 +35,23 @@ class TWP_Shortcodes {
false // Load in head to ensure it's available
);
// Add backup SDK loading
wp_add_inline_script('twilio-voice-sdk', "
window.twpLoadTwilioSDK = function() {
if (typeof Twilio === 'undefined') {
console.warn('Primary Twilio SDK failed, attempting fallback load');
var script = document.createElement('script');
script.src = 'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js';
script.onload = function() { console.log('Fallback Twilio SDK loaded'); };
script.onerror = function() { console.error('Fallback Twilio SDK failed'); };
document.head.appendChild(script);
}
};
// Try loading after a delay if not available
setTimeout(window.twpLoadTwilioSDK, 2000);
", 'after');
// Enqueue our browser phone script
wp_enqueue_script(
'twp-browser-phone-frontend',