accessibility #3872
accessibility #3872
Conversation
Signed-off-by: ale <ale@manalejandro.com>
|
Hola @manalejandro Muchísimas gracias por tu solicitud de incorporación de cambios y el esfuerzo que le dedicaste. Las grabaciones de voz son una función fantástica que he echado de menos en Converse durante mucho tiempo, y la accesibilidad es una característica importante. Sin embargo, nuestro idioma de trabajo es el inglés. Todos los comentarios del código y la documentación deben estar en inglés. Actualiza esta solicitud de incorporación de cambios para traducir todo el texto en español al inglés, incluida la descripción de la solicitud. Hello @manalejandro Thank you very much for your pull request and you effort you've made. Voice recordings is a great feature I've been missing in Converse since a long time and accessibility is an important feature. However, our working language is English. All code comments and documentation should be in English. Please update this pull request to translate all the Spanish text to English, including the PR description. |
Signed-off-by: ale <ale@manalejandro.com>
Build and Integration Guide - Accessibility and Voice Messages🚀 Build1. Install Dependenciesnpm install2. Build the Project# Development build (with watch)
npm run dev
# Or production build
npm run build3. Serve Locally (for testing)npm run serveThen open ✅ Verify It Works1. Open Browser ConsoleAfter Converse.js has initialized, run: // Verify accessibility is enabled
console.log('Accessibility:', converse.api.settings.get('enable_accessibility'));
// → true
// Verify voice messages are enabled
console.log('Voice messages:', converse.api.settings.get('enable_voice_messages'));
// → true
// Verify accessibility API is available
console.log('Accessibility API:', typeof converse.api.accessibility);
// → "object"
// Verify voice messages API is available
console.log('Voice messages API:', typeof converse.api.voice_messages);
// → "object"
// Verify browser support for voice messages
console.log('Recording support:', converse.api.voice_messages.isSupported());
// → true (if your browser supports MediaRecorder)2. Look for the Microphone ButtonIn any open chat, you should see:
3. Test Recording
4. Test Keyboard ShortcutsPress Main shortcuts:
🔧 Custom Configuration (Optional)If you need to customize the configuration, you can do so in your initialization file: converse.initialize({
// ... your other options ...
// Accessibility (already enabled by default)
enable_accessibility: true,
enable_keyboard_shortcuts: true,
enable_screen_reader_announcements: true,
announce_new_messages: true,
high_contrast_mode: false,
// Voice messages (already enabled by default)
enable_voice_messages: true,
max_voice_message_duration: 300, // 5 minutes
voice_message_bitrate: 128000, // 128 kbps
voice_message_mime_type: 'audio/webm;codecs=opus',
// Button visibility in toolbar
visible_toolbar_buttons: {
'emoji': true,
'call': false,
'spoiler': false,
'voice_message': true // ← Voice messages button
}
});📱 Using the InterfaceRecording a Voice MessageMethod 1: With Mouse
Method 2: With Keyboard
Controls During Recording
Playing Received Voice MessagesVoice messages are automatically displayed with a player:
♿ AccessibilityScreen ReadersAll controls have:
Supported readers:
Complete Keyboard ShortcutsGlobal
In Chat
During Recording
During Playback
🐛 TroubleshootingMicrophone Button Doesn't AppearPossible causes:
Solution: // In browser console:
console.log('Support:', converse.api.voice_messages?.isSupported());
console.log('Enabled:', converse.api.settings.get('enable_voice_messages'));
console.log('Toolbar:', converse.api.settings.get('visible_toolbar_buttons'));Microphone Doesn't WorkPossible causes:
Solution:
Voice Messages Don't SendPossible causes:
Solution: // Check server support:
const domain = converse.session.get('domain');
converse.api.disco.supports(Strophe.NS.HTTPUPLOAD, domain).then(
supported => console.log('HTTP Upload supported:', supported)
);
// Reduce maximum duration if necessary:
converse.initialize({
max_voice_message_duration: 60 // 1 minute instead of 5
});Keyboard Shortcuts Don't WorkPossible causes:
Solution: // Check status:
console.log('Shortcuts enabled:',
converse.api.settings.get('enable_keyboard_shortcuts'));
// Check for conflicts:
// Press Alt+Shift+? to see full list📚 Additional Documentation
🎯 Modified FilesCreated Files:
Modified Files:
✨ Implemented Features✅ Complete accessibility plugin with WCAG 2.1 AA 🎉 Ready to Use!After building, everything will work automatically. Users will be able to:
No additional configuration required! 🚀♿🎤 |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| * Show the recorder when the user presses the button | ||
| */ | ||
|
|
||
| import AudioRecorder from '../voice-messages/audio-recorder.js'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
|
|
||
| import AudioRecorder from '../voice-messages/audio-recorder.js'; | ||
|
|
||
| class ChatBoxView extends ElementView { |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| * Mark voice messages when sent | ||
| */ | ||
|
|
||
| class ChatBox extends Model { |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| */ | ||
|
|
||
| export { | ||
| tplVoiceMessageButton, |
Check notice
Code scanning / CodeQL
Syntax error Note
|
|
||
| export { | ||
| tplVoiceMessageButton, | ||
| tplVoiceMessage, |
Check notice
Code scanning / CodeQL
Syntax error Note
Signed-off-by: ale <ale@manalejandro.com>
|
Thank you for making and adding the translations. I have another request. This PR is too big and should be split up into two separate and smaller PRs. One for the voice messages feature, and another for the accessibility plugin. |
2 participants
Configuración de Accesibilidad y Mensajes de Voz Habilitada por Defecto
✅ Cambios Realizados
Se han habilitado por defecto las siguientes características en Converse.js:
1. Plugin de Accesibilidad (
converse-accessibility)src/plugins/accessibility/enable_accessibility: trueCaracterísticas incluidas:
2. Plugin de Mensajes de Voz (
converse-voice-messages)src/plugins/voice-messages/enable_voice_messages: trueCaracterísticas incluidas:
📝 Archivos Modificados
1.
/src/shared/constants.jsSe agregaron los plugins a la lista
VIEW_PLUGINS:2.
/src/index.jsSe importaron los plugins para que se carguen automáticamente:
🚀 Resultado
Al Compilar
Cuando se compile Converse.js, estos plugins estarán activos automáticamente sin necesidad de configuración adicional.
Al Inicializar
Para Deshabilitarlos (si es necesario)
Si en algún caso específico se desean deshabilitar:
⚙️ Configuración Automática
Plugin de Accesibilidad
Plugin de Mensajes de Voz
🎯 Beneficios
Para Usuarios Finales
Para Desarrolladores
Para Administradores
📊 Compatibilidad
Navegadores Soportados
Lectores de Pantalla
🔍 Verificación
Comprobar que está habilitado
Ver atajos de teclado
Probar grabación de voz
📚 Documentación Adicional
/docs/source/accessibility.rst/src/plugins/voice-messages/README.md/src/plugins/voice-messages/IMPLEMENTATION.md/src/plugins/voice-messages/INTEGRATION_EXAMPLE.js🐛 Solución de Problemas
Los plugins no se cargan
blacklisted_pluginsMensajes de voz no funcionan
converse.api.voice_messages.isSupported()Atajos de teclado no responden
enable_keyboard_shortcuts: trueAlt+Shift+?🎉 Resumen
Los plugins de accesibilidad y mensajes de voz ahora están:
¡Todo funcionará automáticamente al compilar Converse.js! 🚀♿🎤