From d99e293864fb8fee84a5b670825693a907b7d6c6 Mon Sep 17 00:00:00 2001 From: P_6669 Date: Tue, 24 May 2022 15:22:46 -0300 Subject: [PATCH 01/32] Fix translations keys --- src/i18n/pt-BR.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/i18n/pt-BR.json b/src/i18n/pt-BR.json index 214d18658..5c59d8537 100644 --- a/src/i18n/pt-BR.json +++ b/src/i18n/pt-BR.json @@ -1,8 +1,10 @@ { "translation": { + "accept": "Aceito", "are_you_sure_you_want_to_finish_this_chat": "Tem certeza de que deseja encerrar este chat?", "are_you_sure_you_want_to_remove_all_of_your_person": "Tem certeza de que deseja remover todos os seus dados pessoais?", "are_you_sure_you_want_to_switch_the_department": "Tem certeza de que deseja trocar de departamento?", + "call_end_time": "Chamada encerrada {{time, datetime}} - Duração de {{callDuration, datetime}}", "cancel": "Cancelar", "change_department": "Trocar departamento", "change_department_1": "Trocar Departamento", @@ -15,6 +17,7 @@ "conversation_finished": "Conversa Encerrada", "count_new_messages_since_since_one": "Uma nova mensagem desde {{val, datetime}}", "count_new_messages_since_since_other": "{{count}} novas mensagens desde {{val, datetime}}", + "decline": "Recusar", "department_switched": "Departamento trocado", "departments": "Departamentos", "disable_notifications": "Disabilitar notificações", @@ -23,6 +26,7 @@ "email": "E-mail", "enable_notifications": "Habilitar notificações", "error_closing_chat": "Erro ao fechar o chat.", + "error_getting_call_alert": "Ocorreu um erro ao receber uma notificação de chamada.", "error_removing_user_data": "Erro ao remover os dados do usuário.", "error_starting_a_new_conversation_reason": "Erro ao iniciar nova conversa: {{reason}}", "expand_chat": "Expandir chat", @@ -39,9 +43,12 @@ "i_agree": "Concordo", "i_need_help_with": "Preciso de ajuda com...", "if_you_have_any_other_questions_just_press_the_but": "Se você tiver qualquer outras dúvidas, basta pressionar o botão abaixo para iniciar um novo chat.", + "incoming_video_call": "Recebendo videochamada", "insert_your_field_here": "Entre com o seu {{field}} aqui...", "invalid_email": "E-mail inválido", "invalid_value": "Valor inválido", + "join_call": "Entrar na chamada", + "join_my_room_to_start_the_video_call": "Entre na minha sala para iniciar uma videochamada", "leave_a_message": "Deixe uma mensagem", "livechat_connected": "Livechat conectado.", "livechat_is_not_connected": "Livechat não está conectado ao servidor.", From b8c19a6d9ccdf8fdcb212d1ad7e815d543c087d9 Mon Sep 17 00:00:00 2001 From: P_6669 Date: Tue, 24 May 2022 15:29:06 -0300 Subject: [PATCH 02/32] Add text to aria-label in the load file button and generate translation key --- src/i18n/en.json | 1 + src/i18n/pt-BR.json | 1 + src/routes/Chat/component.js | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index 29451873f..aad5f5a96 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -87,6 +87,7 @@ "user_joined": "User joined", "user_left": "User left", "user_removed_by": "User removed by", + "upload_file": "Upload file", "waiting_queue": "Waiting queue...", "we_are_not_online_right_now_please_leave_a_message": "We are not online right now. Please, leave a message.", "welcome": "Welcome", diff --git a/src/i18n/pt-BR.json b/src/i18n/pt-BR.json index 5c59d8537..56b4e8499 100644 --- a/src/i18n/pt-BR.json +++ b/src/i18n/pt-BR.json @@ -75,6 +75,7 @@ "transcript_success": "Transcrição enviada", "type_your_message_here": "Digite sua mensagem aqui", "unread_messages": "Mensagens não lidas", + "upload_file": "Enviar arquivo", "user_added_by": "Usuário {{user_added}} adicionado à conversa por {{user_by}}.", "user_joined": "Usuário entrou", "user_left": "Usuário saiu", diff --git a/src/routes/Chat/component.js b/src/routes/Chat/component.js index a5ff9ba31..cd861e4f0 100644 --- a/src/routes/Chat/component.js +++ b/src/routes/Chat/component.js @@ -215,7 +215,7 @@ class Chat extends Component { post={( {text.length === 0 && uploads && ( - + )} From 94ca655fa9944f7201d607ba97964ae29bcb8dec Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Tue, 24 May 2022 15:35:40 -0300 Subject: [PATCH 03/32] Add text to aria-label in the send message button and generate translation key --- src/i18n/en.json | 1 + src/i18n/pt-BR.json | 1 + src/routes/Chat/component.js | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index aad5f5a96..93b50b5ac 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -73,6 +73,7 @@ "restore_chat": "Restore chat", "room_name_changed": "Room name changed", "send": "Send", + "send_message": "Send message", "sound_is_off": "Sound is off", "sound_is_on": "Sound is on", "start_chat": "Start chat", diff --git a/src/i18n/pt-BR.json b/src/i18n/pt-BR.json index 56b4e8499..199add097 100644 --- a/src/i18n/pt-BR.json +++ b/src/i18n/pt-BR.json @@ -67,6 +67,7 @@ "restore_chat": "Restaurar o chat", "room_name_changed": "Nome da sala alterado", "send": "Enviar", + "send_message": "Enviar mensagem", "sound_is_off": "O som está desligado", "sound_is_on": "O som está ligado", "start_chat": "Iniciar chat", diff --git a/src/routes/Chat/component.js b/src/routes/Chat/component.js index cd861e4f0..378bd86e3 100644 --- a/src/routes/Chat/component.js +++ b/src/routes/Chat/component.js @@ -220,7 +220,7 @@ class Chat extends Component { )} {text.length > 0 && ( - + )} From 50bcc139a7cdb1066ae4bf878beae1d19e9db6bd Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Tue, 24 May 2022 15:39:40 -0300 Subject: [PATCH 04/32] Add text to aria-label in the emoji button and generate translation key --- src/i18n/en.json | 1 + src/i18n/pt-BR.json | 1 + src/routes/Chat/component.js | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index 93b50b5ac..b37ab3ef4 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -13,6 +13,7 @@ "chat_started": "Chat started", "choose_a_department": "Choose a department...", "choose_a_department_1": "Choose a department", + "choose_an_emoji": "Choose an emoji...", "choose_an_option": "Choose an option...", "conversation_finished": "Conversation finished", "count_new_messages_since_since_one": "One new message since {{val, datetime}}", diff --git a/src/i18n/pt-BR.json b/src/i18n/pt-BR.json index 199add097..7cd391389 100644 --- a/src/i18n/pt-BR.json +++ b/src/i18n/pt-BR.json @@ -13,6 +13,7 @@ "chat_started": "Bate-papo iniciado", "choose_a_department": "Escolha um departamento...", "choose_a_department_1": "Escolha um departamento", + "choose_an_emoji": "Escolha um emoji...", "choose_an_option": "Escolha uma opção...", "conversation_finished": "Conversa Encerrada", "count_new_messages_since_since_one": "Uma nova mensagem desde {{val, datetime}}", diff --git a/src/routes/Chat/component.js b/src/routes/Chat/component.js index 378bd86e3..356a2b33c 100644 --- a/src/routes/Chat/component.js +++ b/src/routes/Chat/component.js @@ -207,7 +207,7 @@ class Chat extends Component { handleEmojiClick={this.handleEmojiClick} pre={( - + From 1238b1deaa0d5864da04d5f7386b60f790cf9e82 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Tue, 24 May 2022 15:54:29 -0300 Subject: [PATCH 05/32] Update pt-BR translations --- src/i18n/pt-BR.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/i18n/pt-BR.json b/src/i18n/pt-BR.json index 7cd391389..c5d86642f 100644 --- a/src/i18n/pt-BR.json +++ b/src/i18n/pt-BR.json @@ -1,10 +1,10 @@ { "translation": { - "accept": "Aceito", + "accept": "Aceitar", "are_you_sure_you_want_to_finish_this_chat": "Tem certeza de que deseja encerrar este chat?", "are_you_sure_you_want_to_remove_all_of_your_person": "Tem certeza de que deseja remover todos os seus dados pessoais?", "are_you_sure_you_want_to_switch_the_department": "Tem certeza de que deseja trocar de departamento?", - "call_end_time": "Chamada encerrada {{time, datetime}} - Duração de {{callDuration, datetime}}", + "call_end_time": "Chamada encerrada às {{time, datetime}} - Duração de {{callDuration, datetime}}", "cancel": "Cancelar", "change_department": "Trocar departamento", "change_department_1": "Trocar Departamento", @@ -73,6 +73,8 @@ "sound_is_on": "O som está ligado", "start_chat": "Iniciar chat", "thanks_for_talking_with_us": "Obrigado por falar conosco", + "the_chat_was_moved_back_to_queue": "O chat foi movido de volta para a fila", + "the_chat_was_transferred_to_another_agent": "O chat foi transferido para outro agente", "the_controller_of_your_personal_data_is_company_na": "O controlador dos seus dados pessoais é [Nome da Empresa], com sede em [Company Address]. Para iniciar o chat, você concorda que seus dados pessoais serão processados e transmitidos de acordo com o Regulamento Geral de Proteção de Dados(GDPR).", "transcript_success": "Transcrição enviada", "type_your_message_here": "Digite sua mensagem aqui", From 4e6533984695ec65101118a1ee16ea8855a05947 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Tue, 24 May 2022 15:56:38 -0300 Subject: [PATCH 06/32] Fix pt-BR translations --- src/i18n/pt-BR.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/i18n/pt-BR.json b/src/i18n/pt-BR.json index c5d86642f..2325227ca 100644 --- a/src/i18n/pt-BR.json +++ b/src/i18n/pt-BR.json @@ -4,13 +4,13 @@ "are_you_sure_you_want_to_finish_this_chat": "Tem certeza de que deseja encerrar este chat?", "are_you_sure_you_want_to_remove_all_of_your_person": "Tem certeza de que deseja remover todos os seus dados pessoais?", "are_you_sure_you_want_to_switch_the_department": "Tem certeza de que deseja trocar de departamento?", - "call_end_time": "Chamada encerrada às {{time, datetime}} - Duração de {{callDuration, datetime}}", + "call_end_time": "Chamada encerrada {{time, datetime}} - Duração de {{callDuration, datetime}}", "cancel": "Cancelar", "change_department": "Trocar departamento", "change_department_1": "Trocar Departamento", - "chat_finished": "Chat Terminado", + "chat_finished": "Chat terminado", "chat_now": "Converse agora", - "chat_started": "Bate-papo iniciado", + "chat_started": "Chat iniciado", "choose_a_department": "Escolha um departamento...", "choose_a_department_1": "Escolha um departamento", "choose_an_emoji": "Escolha um emoji...", @@ -21,7 +21,7 @@ "decline": "Recusar", "department_switched": "Departamento trocado", "departments": "Departamentos", - "disable_notifications": "Disabilitar notificações", + "disable_notifications": "Desabilitar notificações", "dismiss_this_alert": "Ignorar este alerta", "drop_here_to_upload_a_file": "Arraste e solte um aquivo para fazer upload", "email": "E-mail", From 9b96befe755240a235a978101ecaa99c4284f834 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Tue, 24 May 2022 16:34:05 -0300 Subject: [PATCH 07/32] Fix button label and add translation --- src/components/Button/index.js | 3 ++- src/components/Screen/index.js | 6 ++++-- src/i18n/en.json | 1 + src/i18n/pt-BR.json | 1 + 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 1e96a7ced..7cadaaceb 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -23,13 +23,14 @@ export const Button = memo(({ style = {}, children, img, + label, }) => ( @@ -112,7 +114,7 @@ export const Screen = ({ }) => (
- {triggered && } + {triggered && }
{!triggered && Date: Tue, 24 May 2022 16:36:59 -0300 Subject: [PATCH 08/32] Remove 'outline: none' from buttons to indicate visual focus --- src/components/Composer/ComposerAction/styles.scss | 2 +- src/components/Header/styles.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/ComposerAction/styles.scss b/src/components/Composer/ComposerAction/styles.scss index a95ec44c1..9a42f6e40 100644 --- a/src/components/Composer/ComposerAction/styles.scss +++ b/src/components/Composer/ComposerAction/styles.scss @@ -19,7 +19,7 @@ $composer-action-margin: 0 6px; &:focus { transform: scale(1.05); - outline: none; + // outline: none; } @include pressable-button(1px); diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss index ab90e6946..46d5fd206 100644 --- a/src/components/Header/styles.scss +++ b/src/components/Header/styles.scss @@ -98,7 +98,7 @@ $header-action-active-displacement: 2px; color: inherit; border: none; - outline: none; + // outline: none; background: none; justify-content: center; From 7613aa8817f7db8bd41225433c7b8d2784949c55 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Wed, 25 May 2022 14:54:39 -0300 Subject: [PATCH 09/32] Fix color contrast --- src/components/Composer/ComposerAction/styles.scss | 9 +++++++++ src/components/Composer/styles.scss | 4 ++-- src/components/Footer/styles.scss | 7 +++++-- src/routes/Chat/styles.scss | 7 +++++-- src/styles/colors.scss | 6 ++++-- 5 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/Composer/ComposerAction/styles.scss b/src/components/Composer/ComposerAction/styles.scss index 9a42f6e40..8163a63cd 100644 --- a/src/components/Composer/ComposerAction/styles.scss +++ b/src/components/Composer/ComposerAction/styles.scss @@ -1,6 +1,9 @@ @import '../../../styles/helpers'; +@import '../../../styles/colors'; $composer-action-margin: 0 6px; +$composer-action-color: $color-text-dark; +$composer-action-color-hover: $color-black; .composer__action { flex: 0 0 auto; @@ -15,6 +18,7 @@ $composer-action-margin: 0 6px; background: none; font-size: 0; + color: $composer-action-color; &:focus { transform: scale(1.05); @@ -22,5 +26,10 @@ $composer-action-margin: 0 6px; // outline: none; } + &:hover, + &:focus { + color: $composer-action-color-hover; + } + @include pressable-button(1px); } diff --git a/src/components/Composer/styles.scss b/src/components/Composer/styles.scss index 0ee3eb619..48ec7382e 100644 --- a/src/components/Composer/styles.scss +++ b/src/components/Composer/styles.scss @@ -12,11 +12,11 @@ $composer-focused-border-color: $color-text-grey; $composer-input-min-height: 20px; $composer-input-max-height: 150px; $composer-input-padding: 2px 6px; -$composer-input-color: $bg-color-dark; +$composer-input-color: $color-text-darker; $composer-input-font-size: 0.875rem; $composer-input-font-weight: 500; $composer-input-line-height: 1.25rem; -$composer-input-placeholder-color: $color-text-light; +$composer-input-placeholder-color: $color-text-grey; .composer { display: flex; diff --git a/src/components/Footer/styles.scss b/src/components/Footer/styles.scss index 3af8365a2..a45aed487 100644 --- a/src/components/Footer/styles.scss +++ b/src/components/Footer/styles.scss @@ -2,6 +2,9 @@ @import '../../styles/helpers'; @import '../../styles/variables'; +$footer-options-text-color: $color-text-grey; +$footer-options-text-color-hover: $color-black; + .footer { display: flex; flex-direction: column; @@ -31,7 +34,7 @@ text-align: left; letter-spacing: 0.2px; - color: $color-text-grey; + color: $footer-options-text-color; border: none; background: none; @@ -41,7 +44,7 @@ &:hover, &:focus { - color: black; + color: $footer-options-text-color-hover; } @include pressable-button(2px); diff --git a/src/routes/Chat/styles.scss b/src/routes/Chat/styles.scss index ef7d29958..98caf5b4a 100644 --- a/src/routes/Chat/styles.scss +++ b/src/routes/Chat/styles.scss @@ -1,6 +1,9 @@ @import '../../styles/colors'; @import '../../styles/variables'; +$emoji-picker-icon-color: $color-text-dark; +$emoji-picker-icon-color-hover: $color-black; + .chat { &__messages { position: relative; @@ -58,11 +61,11 @@ } .emoji-picker-icon { - color: #696969; + color: $emoji-picker-icon-color; &:hover, &:focus { - color: black; + color: $emoji-picker-icon-color-hover; } } } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index ec1af41ca..a5ed25b4c 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -1,5 +1,6 @@ -$color-text-dark: #2f343d; -$color-text-grey: #9ea2a8; +$color-text-darker: #18191B; +$color-text-dark: #3C3F44; +$color-text-grey: #54585F; $color-text-light: #cbced1; $color-text-lighter: #ffffff; $color-text-grey-system: #6c727a; @@ -21,5 +22,6 @@ $color-yellow: #ffd21f; $color-dark-yellow: #f6c502; $color-green: #2de0a5; $color-dark-green: #26d198; +$color-black: #000000; $overlay-bg-color: rgba(12, 13, 15, 0.2); From 407010cc7c2448749900e77d9026bc8ad45c94a3 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Wed, 25 May 2022 15:00:49 -0300 Subject: [PATCH 10/32] Add keyboard navigation to option menu --- src/components/Menu/index.js | 49 +++++++++++++++++++++++++++++++++ src/components/Menu/styles.scss | 2 +- src/components/Popover/index.js | 19 ++++++++++--- 3 files changed, 65 insertions(+), 5 deletions(-) diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index fb189e352..a68c18528 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -52,6 +52,48 @@ class PopoverMenuWrapper extends Component { dismiss(); } + handleKeyDown = (e) => { + const { key } = e; + + switch (key) { + case 'Tab': + this.handleTabKey(e); + break; + default: + break; + } + } + + handleTabKey = (e) => { + const focusableElements = this.getFocusableElements(); + + if (focusableElements.length > 0) { + const firstElement = focusableElements[0]; + const lastElement = focusableElements[focusableElements.length - 1]; + + if (!e.shiftKey && document.activeElement !== firstElement) { + firstElement.focus(); + return e.preventDefault(); + } + + if (e.shiftKey && document.activeElement !== lastElement) { + lastElement.focus(); + e.preventDefault(); + } + } + }; + + addFocusFirstElement = () => { + const focusableElements = this.getFocusableElements(); + if (focusableElements.length > 0) { + focusableElements[0].focus(); + } + } + + getFocusableElements = () => this.menuRef.base.querySelectorAll( + 'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select', + ) + componentDidMount() { const { triggerBounds, overlayBounds } = this.props; const menuBounds = normalizeDOMRect(this.menuRef.base.getBoundingClientRect()); @@ -70,6 +112,9 @@ class PopoverMenuWrapper extends Component { const placement = `${ menuWidth < rightSpace ? 'right' : 'left' }-${ menuHeight < bottomSpace ? 'bottom' : 'top' }`; + this.addFocusFirstElement(); + window.addEventListener('keydown', this.handleKeyDown, false); + // eslint-disable-next-line react/no-did-mount-set-state this.setState({ position: { left, right, top, bottom }, @@ -77,6 +122,10 @@ class PopoverMenuWrapper extends Component { }); } + componentWillUnmount() { + window.removeEventListener('keydown', this.handleKeyDown, false); + } + render = ({ children }) => ( { - if (key !== 'Escape') { - return; + switch (key) { + case 'Enter': + this.setTriggerElement(); + break; + case 'Escape': + this.state.triggerElement.focus(); + this.dismiss(); + break; + default: + break; } - - this.dismiss(); } handleOverlayRef = (ref) => { this.overlayRef = ref; } + setTriggerElement = () => { + const triggerElement = document.activeElement; + this.setState({ ...this.state, triggerElement }); + } + componentDidMount() { this.mounted = true; window.addEventListener('keydown', this.handleKeyDown, false); From 6bcaa4112a2707376e6afe4fee0dd046c9ca9339 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Wed, 25 May 2022 15:10:35 -0300 Subject: [PATCH 11/32] Fix ARIA to options menu --- src/components/Footer/index.js | 4 ++-- src/components/Menu/index.js | 5 +++-- src/components/Popover/index.js | 11 ++++++----- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index 6fefb9b7e..a1b2e6ce5 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -34,8 +34,8 @@ export const PoweredBy = withTranslation()(({ className, t, ...props }) => ( const handleMouseUp = ({ target }) => target.blur(); -const OptionsTrigger = withTranslation()(({ pop, t }) => ( - )); diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index a68c18528..85b4e671d 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -13,7 +13,7 @@ export const Menu = ({ children, hidden, placement, ...props }) => ( export const Group = ({ children, title, ...props }) => ( -
+
{title &&
{title}
} {children}
@@ -24,6 +24,7 @@ export const Item = ({ children, primary, danger, disabled, icon, ...props }) => }
From a22ddea62cf67a4cfb7171a2f4cf77eb0faeb0cc Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Mon, 30 May 2022 11:34:09 -0300 Subject: [PATCH 16/32] Add Aria to Screen --- src/components/Header/index.js | 2 +- src/components/Screen/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Header/index.js b/src/components/Header/index.js index fef07ed3e..c52dc90e4 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -36,7 +36,7 @@ export const Content = ({ children, className, ...props }) => ( ); export const Title = ({ children, className, ...props }) => ( -
+
{children}
); diff --git a/src/components/Screen/index.js b/src/components/Screen/index.js index 534954cbc..b6c045084 100644 --- a/src/components/Screen/index.js +++ b/src/components/Screen/index.js @@ -117,7 +117,7 @@ export const Screen = ({
{triggered && } -
+
{!triggered && Date: Mon, 30 May 2022 11:48:31 -0300 Subject: [PATCH 17/32] Fix keyboard navigation in screen chat --- src/components/App/App.js | 60 ---------- src/components/Menu/index.js | 5 + src/components/Screen/index.js | 206 ++++++++++++++++++++++----------- 3 files changed, 145 insertions(+), 126 deletions(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index 25b1dbc3e..4c007221f 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -166,62 +166,6 @@ export class App extends Component { } } - handleAppRef = (ref) => { - this.appRef = ref; - } - - getFocusableElements = () => this.appRef.base.querySelectorAll( - 'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, div[contenteditable="true"]', - ) - - addFocusFirstElement = () => { - const focusableElements = this.getFocusableElements(); - if (focusableElements.length > 0) { - focusableElements[0].focus(); - } - } - - handleTabKey = (e) => { - const focusableElements = this.getFocusableElements(); - - if (focusableElements.length > 0) { - const firstElement = focusableElements[0]; - const lastElement = focusableElements[focusableElements.length - 1]; - - if (!e.shiftKey && document.activeElement === lastElement) { - firstElement.focus(); - return e.preventDefault(); - } - - if (e.shiftKey && document.activeElement === firstElement) { - lastElement.focus(); - return e.preventDefault(); - } - } - }; - - handleKeyDown = (e) => { - const { key } = e; - const { minimized } = this.props; - - switch (key) { - case 'Tab': - if (!minimized) { - this.handleTabKey(e); - } - break; - case 'Escape': - if (!minimized && !this.state.poppedOut) { - this.handleMinimize(); - } - break; - default: - break; - } - - e.stopPropagation(); - } - async initialize() { // TODO: split these behaviors into composable components await Connection.init(); @@ -255,9 +199,6 @@ export class App extends Component { if (i18n.t) { document.dir = isRTL(i18n.t('yes')) ? 'rtl' : 'ltr'; } - if (!this.props.minimized) { - this.addFocusFirstElement(); - } } render = ({ @@ -286,7 +227,6 @@ export class App extends Component { onOpenWindow: this.handleOpenWindow, onDismissAlert: this.handleDismissAlert, dismissNotification: this.dismissNotification, - handleKeyDown: this.handleKeyDown, }; return ( diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 95042ede9..438d0e784 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -71,6 +71,11 @@ class PopoverMenuWrapper extends Component { const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; + if (focusableElements.length === 1) { + firstElement.focus(); + return e.preventDefault(); + } + if (!e.shiftKey && document.activeElement !== firstElement) { firstElement.focus(); return e.preventDefault(); diff --git a/src/components/Screen/index.js b/src/components/Screen/index.js index b6c045084..8d1eff40f 100644 --- a/src/components/Screen/index.js +++ b/src/components/Screen/index.js @@ -1,4 +1,4 @@ -import { h } from 'preact'; +import { Component, h } from 'preact'; import { useEffect } from 'preact/hooks'; import i18next from 'i18next'; import ChatIcon from '../../icons/chat.svg'; @@ -87,73 +87,147 @@ const CssVar = ({ theme }) => { `}; }; -export const Screen = ({ - theme = {}, - agent, - title, - notificationsEnabled, - minimized = false, - expanded = false, - windowed = false, - children, - className, - alerts, - modal, - unread, - sound, - onDismissAlert, - onEnableNotifications, - onDisableNotifications, - onMinimize, - onRestore, - onOpenWindow, - onSoundStop, - queueInfo, - dismissNotification, - triggered = false, - handleKeyDown, - handleAppRef, -}) => ( -
- - {triggered && } -
- - {!triggered && } - - {modal} - {children} - -
+export class Screen extends Component { + handleScreenRef = (ref) => { + this.screenRef = ref; + } - - - {sound && } -
-); + handleButtonRef = (ref) => { + this.buttonRef = ref; + } + + getFocusableElements = () => this.screenRef.querySelectorAll( + 'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, div[contenteditable="true"]', + ); + + handleTabKey = (e) => { + const focusableElements = this.getFocusableElements(); + + if (focusableElements.length > 0) { + const firstElement = focusableElements[0]; + const lastElement = focusableElements[focusableElements.length - 1]; + + if (focusableElements.length === 1) { + firstElement.focus(); + return e.preventDefault(); + } + + if (!e.shiftKey && document.activeElement === lastElement) { + firstElement.focus(); + return e.preventDefault(); + } + + if (e.shiftKey && document.activeElement === firstElement) { + lastElement.focus(); + return e.preventDefault(); + } + } + }; + + handleKeyDown = (e) => { + const { key } = e; + const { minimized, windowed } = this.props; + + switch (key) { + case 'Tab': + if (!minimized) { + this.handleTabKey(e); + } + break; + case 'Escape': + if (!minimized && !windowed) { + this.handleOnMinimize(); + } + break; + default: + break; + } + + e.stopPropagation(); + } + + handleOnRestore = () => { + this.props.onRestore(); + this.buttonRef.base.focus(); + } + handleOnMinimize = () => { + this.props.onMinimize(); + this.buttonRef.base.focus(); + } + + componentDidMount() { + if (!this.props.minimized) { + this.buttonRef.base.focus(); + } + } + + render = ({ + theme = {}, + agent, + title, + notificationsEnabled, + minimized = false, + expanded = false, + windowed = false, + children, + className, + alerts, + modal, + unread, + sound, + onDismissAlert, + onEnableNotifications, + onDisableNotifications, + onMinimize, + onRestore, + onOpenWindow, + onSoundStop, + queueInfo, + dismissNotification, + triggered = false, + }) => ( +
+ + {triggered && } +
+ + {!triggered && } + + {modal} + {children} + +
+ + + + {sound && } +
+ ) +} Screen.Content = ScreenContent; Screen.Footer = ScreenFooter; From ce3bcf8cbc7745fe5dbbad68ebd44f4ae85520d4 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Mon, 30 May 2022 14:00:52 -0300 Subject: [PATCH 18/32] Fix focus first element when state change --- src/components/Screen/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Screen/index.js b/src/components/Screen/index.js index 8d1eff40f..33c102066 100644 --- a/src/components/Screen/index.js +++ b/src/components/Screen/index.js @@ -88,6 +88,10 @@ const CssVar = ({ theme }) => { }; export class Screen extends Component { + state = { + opened: false, + } + handleScreenRef = (ref) => { this.screenRef = ref; } @@ -157,9 +161,13 @@ export class Screen extends Component { } componentDidMount() { - if (!this.props.minimized) { + if (!this.props.minimized && !this.props.windowed && this.state.opened !== !this.props.minimized) { this.buttonRef.base.focus(); } + + if (this.state.opened !== !this.props.minimized) { + this.state.opened = !this.props.minimized; + } } render = ({ From b1cc3cbac399226cc459c8e2bb33a5fa49c26fd2 Mon Sep 17 00:00:00 2001 From: Fabio Surrage Date: Mon, 30 May 2022 15:47:59 -0300 Subject: [PATCH 19/32] Add feedback of sent and received messages --- src/components/Avatar/index.js | 1 + src/components/Messages/Message/index.js | 26 ++++++++++++++++++-- src/components/Messages/Message/styles.scss | 10 ++++++++ src/components/Messages/MessageList/index.js | 2 +- src/components/Messages/MessageTime/index.js | 2 +- src/i18n/en.json | 2 ++ src/i18n/pt-BR.json | 2 ++ 7 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 src/components/Messages/Message/styles.scss diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js index e52e8fc56..c5e3727a4 100644 --- a/src/components/Avatar/index.js +++ b/src/components/Avatar/index.js @@ -24,6 +24,7 @@ export class Avatar extends Component { render = ({ small, large, src, description, status, className, style }, { errored }) => ( diff --git a/src/components/Messages/MessageTime/index.js b/src/components/Messages/MessageTime/index.js index c0bf118e4..b8fcc9a6d 100644 --- a/src/components/Messages/MessageTime/index.js +++ b/src/components/Messages/MessageTime/index.js @@ -18,7 +18,7 @@ const parseDate = (ts, t) => { }; const MessageTime = memo(({ ts, normal, inverted, className, style = {}, t }) => ( -
+