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

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

View file

@ -1,18 +1,20 @@
import { NewChatIcon } from '~/components/svg';
import { useChatContext } from '~/Providers';
import { useMediaQuery } from '~/hooks';
import { useMediaQuery, useLocalize } from '~/hooks';
export default function HeaderNewChat() {
const { newConversation } = useChatContext();
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const localize = useLocalize();
if (isSmallScreen) {
return null;
}
return (
<button
data-testid="wide-header-new-chat-button"
aria-label={localize("com_ui_new_chat")}
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()}
>
<div className="flex w-full items-center justify-center gap-2">