Complete 4.5.2: Screen Reader Support - Implement comprehensive ARIA live regions, attributes, and dynamic announcements
This commit is contained in:
parent
4a9941aa9a
commit
8d7b7dfe80
4 changed files with 382 additions and 2 deletions
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue