Complete 4.5.2: Screen Reader Support - Implement comprehensive ARIA live regions, attributes, and dynamic announcements

This commit is contained in:
VinnyNC 2025-09-30 19:08:23 -04:00
parent 4a9941aa9a
commit 8d7b7dfe80
4 changed files with 382 additions and 2 deletions

View file

@ -4,7 +4,7 @@
(function() {
'use strict';
AppModules.require('api', 'ui-controls');
AppModules.require('api', 'ui-controls', 'screen-reader');
AppModules.register('chat');
// Initialize chat system
@ -21,6 +21,9 @@
UIControls.showToast('Admin mode activated');
}
// Announce chat initialization to screen readers
ScreenReader.connectionStatus('connected');
// Set up nickname handling
const nicknameInput = document.getElementById('nickname');
if (nicknameInput) {
@ -163,10 +166,20 @@
const nicknameValidation = validateNickname(nickname);
updateValidationUI('nickname', nicknameErrorElement, nicknameValidation.valid, nicknameValidation.message);
// Announce validation errors
if (!nicknameValidation.valid) {
ScreenReader.formValidation('nickname', false, nicknameValidation.message);
}
// Validate message
const messageValidation = validateMessage(message);
updateValidationUI('messageInput', messageErrorElement, messageValidation.valid, messageValidation.message);
// Announce validation errors
if (!messageValidation.valid) {
ScreenReader.formValidation('messageInput', false, messageValidation.message);
}
// If either validation failed, focus the appropriate field and stop
if (!nicknameValidation.valid) {
nicknameInput.focus();
@ -193,6 +206,9 @@
updateValidationUI('nickname', nicknameErrorElement, true);
updateValidationUI('messageInput', messageErrorElement, true);
// Announce successful message send
ScreenReader.formSuccess('Message sent successfully');
UIControls.showToast('Message sent successfully!');
// Clear success state after a delay
@ -206,12 +222,14 @@
// Show server error
updateValidationUI('messageInput', messageErrorElement, false, 'Failed to send message: ' + data.error);
UIControls.updateConnectionStatus(false);
ScreenReader.connectionStatus('error', data.error);
}
})
.catch(error => {
AppLogger.error('Error sending message:', error);
updateValidationUI('messageInput', messageErrorElement, false, 'Failed to send message. Please try again.');
UIControls.updateConnectionStatus(false);
ScreenReader.connectionStatus('error', 'Network error while sending message');
})
.finally(() => {
// End loading state
@ -232,6 +250,7 @@
if (data.success) {
removeMessageFromUI(messageId);
UIControls.showToast('Message deleted');
ScreenReader.systemMessage('Message deleted by admin', 'normal');
} else {
UIControls.showToast('Failed to delete message');
}
@ -252,6 +271,7 @@
.then(data => {
if (data.success) {
UIControls.showToast('User banned');
ScreenReader.systemMessage('User banned from chat by admin', 'normal');
} else {
UIControls.showToast('Failed to ban user');
}
@ -273,6 +293,7 @@
if (data.success) {
clearMessagesUI();
UIControls.showToast('Chat cleared');
ScreenReader.systemMessage('Chat was cleared by admin', 'high');
AppState.lastMessageId = '';
API.sendHeartbeat(); // Force refresh all users
} else {
@ -333,6 +354,12 @@
// Handle initial message load
function handleInitialMessageLoad(data) {
AppState.allMessages = data.all_messages || [];
// Announce message group if loading multiple messages
if (AppState.allMessages.length > 0) {
ScreenReader.messageGroup(AppState.allMessages, 'added');
}
displayAllMessages();
}