Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 01:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

👐 a11y: New Chat button - focus, mobile label, collapsed sidebar label (#4069)

Browse source
This commit is contained in:
Vesna Tan 2024-09-19 20:32:04 -04:00 • committed by GitHub
parent 94d1afee84
commit d096c281ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/Chat/Menus/HeaderNewChat.tsx
View file

@ -1,18 +1,20 @@
import { NewChatIcon } from '~/components/svg'; import { NewChatIcon } from '~/components/svg';
import { useChatContext } from '~/Providers'; import { useChatContext } from '~/Providers';
import { useMediaQuery } from '~/hooks'; import { useMediaQuery, useLocalize } from '~/hooks';
export default function HeaderNewChat() { export default function HeaderNewChat() {
const { newConversation } = useChatContext(); const { newConversation } = useChatContext();
const isSmallScreen = useMediaQuery('(max-width: 768px)'); const isSmallScreen = useMediaQuery('(max-width: 768px)');
const localize = useLocalize();
if (isSmallScreen) { if (isSmallScreen) {
return null; return null;
} }
return ( return (
<button <button
data-testid="wide-header-new-chat-button" data-testid="wide-header-new-chat-button"
aria-label={localize("com_ui_new_chat")}
type="button" type="button"
className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex" className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:border-black-500 dark:focus:border-white-500 md:flex"
onClick={() => newConversation()} onClick={() => newConversation()}
> >
<div className="flex w-full items-center justify-center gap-2"> <div className="flex w-full items-center justify-center gap-2">

4
client/src/components/Conversations/Convo.tsx
View file

@ -151,10 +151,10 @@ export default function Conversation({
aria-label={`${localize('com_ui_rename')} ${localize('com_ui_chat')}`} aria-label={`${localize('com_ui_rename')} ${localize('com_ui_chat')}`}
/> />
<div className="flex gap-1"> <div className="flex gap-1">
<button onClick={cancelRename} aria-label='cancel new name'> <button onClick={cancelRename} aria-label={`${localize('com_ui_cancel')} ${localize('com_ui_rename')}`}>
<X aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" /> <X aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
</button> </button>
<button onClick={onRename} aria-label='submit new name'> <button onClick={onRename} aria-label={`${localize('com_ui_submit')} ${localize('com_ui_rename')}`}>
<Check aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" /> <Check aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
</button> </button>
</div> </div>

6
client/src/components/Nav/MobileNav.tsx
View file

@ -19,7 +19,8 @@ export default function MobileNav({
<button <button
type="button" type="button"
data-testid="mobile-header-new-chat-button" data-testid="mobile-header-new-chat-button"
className="inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover" aria-label={localize('com_nav_open_sidebar')}
className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
onClick={() => onClick={() =>
setNavVisible((prev) => { setNavVisible((prev) => {
localStorage.setItem('navVisible', JSON.stringify(!prev)); localStorage.setItem('navVisible', JSON.stringify(!prev));
@ -49,7 +50,8 @@ export default function MobileNav({
</h1> </h1>
<button <button
type="button" type="button"
className="inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover" aria-label={localize('com_ui_new_chat')}
className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
onClick={() => newConversation()} onClick={() => newConversation()}
> >
<svg <svg