From 5763e4053bde8d31861a5e5955e6fe81208c2db3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Mon, 9 Feb 2026 18:27:30 +0100 Subject: [PATCH] pl-fe: chat accessibility improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- .../chat-widget/chat-pane-header.tsx | 15 +++++++-- .../components/chat-widget/chat-settings.tsx | 33 +++++++++---------- .../components/chat-widget/chat-window.tsx | 15 ++++++--- .../headers/chat-search-header.tsx | 7 ++-- .../src/features/chats/components/ui/pane.tsx | 1 + packages/pl-fe/src/locales/en.json | 6 +++- 6 files changed, 50 insertions(+), 27 deletions(-) diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx index 6bd1788ae..52ba08333 100644 --- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx @@ -1,8 +1,14 @@ import React, { HTMLAttributes } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import IconButton from '@/components/ui/icon-button'; import { useSettings } from '@/stores/settings'; +const messages = defineMessages({ + expand: { id: 'chat_pane.header.expand', defaultMessage: 'Expand chats' }, + collapse: { id: 'chat_pane.header.collapse', defaultMessage: 'Collapse chats' }, +}); + interface IChatPaneHeader { isOpen: boolean; isToggleable?: boolean; @@ -11,6 +17,7 @@ interface IChatPaneHeader { unreadCount?: number; secondaryAction?(): void; secondaryActionIcon?: string; + secondaryActionTitle?: string; } const ChatPaneHeader = (props: IChatPaneHeader) => { @@ -20,11 +27,13 @@ const ChatPaneHeader = (props: IChatPaneHeader) => { onToggle, secondaryAction, secondaryActionIcon, + secondaryActionTitle, title, unreadCount, ...rest } = props; + const intl = useIntl(); const { demetricator } = useSettings(); const ButtonComp = isToggleable ? 'button' : 'div'; @@ -54,10 +63,11 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
- {secondaryAction ? ( + {secondaryAction && secondaryActionIcon ? ( ) : null} @@ -65,6 +75,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => { onClick={onToggle} src={require('@phosphor-icons/core/regular/caret-up.svg')} className='⁂-chat-widget__header__open-button' + title={isOpen ? intl.formatMessage(messages.collapse) : intl.formatMessage(messages.expand)} />
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx index 817b7938f..09bf232d6 100644 --- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { defineMessages, useIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import Avatar from '@/components/ui/avatar'; import HStack from '@/components/ui/hstack'; @@ -15,19 +15,12 @@ import { useModalsActions } from '@/stores/modals'; import ChatPaneHeader from './chat-pane-header'; const messages = defineMessages({ - blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' }, - blockHeading: { id: 'chat_settings.block.heading', defaultMessage: 'Block @{acct}' }, - blockConfirm: { id: 'chat_settings.block.confirm', defaultMessage: 'Block' }, - unblockMessage: { id: 'chat_settings.unblock.message', defaultMessage: 'Unblocking will allow this profile to direct message you and view your content.' }, + back: { id: 'card.back.label', defaultMessage: 'Back' }, unblockHeading: { id: 'chat_settings.unblock.heading', defaultMessage: 'Unblock @{acct}' }, unblockConfirm: { id: 'chat_settings.unblock.confirm', defaultMessage: 'Unblock' }, leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' }, leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave chat' }, leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave chat' }, - title: { id: 'chat_settings.title', defaultMessage: 'Chat Details' }, - blockUser: { id: 'chat_settings.options.block_user', defaultMessage: 'Block @{acct}' }, - unblockUser: { id: 'chat_settings.options.unblock_user', defaultMessage: 'Unblock @{acct}' }, - leaveChat: { id: 'chat_settings.options.leave_chat', defaultMessage: 'Leave chat' }, }); const ChatSettings = () => { @@ -61,7 +54,7 @@ const ChatSettings = () => { const handleUnblockUser = () => { openModal('CONFIRM', { heading: intl.formatMessage(messages.unblockHeading, { acct: chat?.account.acct }), - message: intl.formatMessage(messages.unblockMessage), + message: , confirm: intl.formatMessage(messages.unblockConfirm), onConfirm: () => unblockAccount(), }); @@ -70,7 +63,7 @@ const ChatSettings = () => { const handleLeaveChat = () => { openModal('CONFIRM', { heading: intl.formatMessage(messages.leaveHeading), - message: intl.formatMessage(messages.leaveMessage), + message: , confirm: intl.formatMessage(messages.leaveConfirm), onConfirm: () => deleteChat.mutate(), }); @@ -88,7 +81,7 @@ const ChatSettings = () => { onToggle={minimizeChatPane} title={ - - {intl.formatMessage(messages.title)} + } @@ -113,14 +106,20 @@ const ChatSettings = () => { {features.chatsDelete && ( )} diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx index 38d571ca8..9650fe7d2 100644 --- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx @@ -1,5 +1,6 @@ import { Link, type LinkProps } from '@tanstack/react-router'; import React, { useRef } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import Avatar from '@/components/ui/avatar'; import HStack from '@/components/ui/hstack'; @@ -14,6 +15,12 @@ import Chat from '../chat'; import ChatPaneHeader from './chat-pane-header'; import ChatSettings from './chat-settings'; +const messages = defineMessages({ + back: { id: 'card.back.label', defaultMessage: 'Back' }, + chatInfo: { id: 'chat_pane.header.chat_info', defaultMessage: 'Chat info' }, + newChat: { id: 'chat_pane.header.new_chat', defaultMessage: 'New chat' }, +}); + const LinkWrapper = ({ enabled, children, ...rest }: LinkProps & { enabled: boolean; children: React.ReactNode }): JSX.Element => { if (!enabled) { return <>{children}; @@ -29,6 +36,7 @@ const LinkWrapper = ({ enabled, children, ...rest }: LinkProps & { enabled: bool /** Floating desktop chat window. */ const ChatWindow = () => { const { chat, currentChatId, screen, changeScreen, isOpen, toggleChatPane } = useChatContext(); + const intl = useIntl(); const inputRef = useRef(null); @@ -45,8 +53,6 @@ const ChatWindow = () => { changeScreen(ChatWidgetScreens.CHAT_SETTINGS, currentChatId); }; - const secondaryAction = () => isOpen ? openChatSettings : openSearch; - if (!chat) return null; if (screen === ChatWidgetScreens.CHAT_SETTINGS) { @@ -59,7 +65,7 @@ const ChatWindow = () => { title={ {isOpen && ( - - {intl.formatMessage(messages.title)} + } diff --git a/packages/pl-fe/src/features/chats/components/ui/pane.tsx b/packages/pl-fe/src/features/chats/components/ui/pane.tsx index e358a9192..3f86c9e47 100644 --- a/packages/pl-fe/src/features/chats/components/ui/pane.tsx +++ b/packages/pl-fe/src/features/chats/components/ui/pane.tsx @@ -13,6 +13,7 @@ const Pane: React.FC = ({ isOpen = false, children }) => (
{children}
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index dc1a21665..274f52856 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -336,6 +336,10 @@ "chat_pane.blankslate.action": "Message someone", "chat_pane.blankslate.body": "Search for someone to chat with.", "chat_pane.blankslate.title": "No messages yet", + "chat_pane.header.chat_info": "Chat info", + "chat_pane.header.collapse": "Collapse chats", + "chat_pane.header.expand": "Expand chats", + "chat_pane.header.new_chat": "New chat", "chat_search.blankslate.body": "Search for someone to chat with.", "chat_search.blankslate.title": "Start a chat", "chat_search.empty_results_blankslate.body": "Try searching for another name.", @@ -351,7 +355,7 @@ "chat_settings.options.block_user": "Block @{acct}", "chat_settings.options.leave_chat": "Leave chat", "chat_settings.options.unblock_user": "Unblock @{acct}", - "chat_settings.title": "Chat Details", + "chat_settings.title": "Chat details", "chat_settings.unblock.confirm": "Unblock", "chat_settings.unblock.heading": "Unblock @{acct}", "chat_settings.unblock.message": "Unblocking will allow this profile to direct message you and view your content.",