Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 16:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

👐 a11y: Misc. Improvements (#3910)

Browse source 
* fix focus for cancel button in convo delete modal window #3829

* add aria-hidden and aria-label to X and Check svg/button respectively and updated OGDialogClose focus color

* update rename, newchat, newchat icon, ConvoOptions icon
This commit is contained in:
Vesna Tan 2024-09-05 14:30:17 -04:00 • committed by GitHub
parent 9ec665dd2c
commit b9197f90c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@ import { useToastContext } from '~/Providers';
import { ConvoOptions } from './ConvoOptions';
import { cn } from '~/utils';
import store from '~/store';
import { useLocalize } from '~/hooks'
type KeyEvent = KeyboardEvent<HTMLInputElement>;
@ -44,6 +45,7 @@ export default function Conversation({
const [renaming, setRenaming] = useState(false);
const [isPopoverActive, setIsPopoverActive] = useState(false);
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const localize = useLocalize();
const clickHandler = async (event: MouseEvent<HTMLAnchorElement>) => {
if (event.button === 0 && (event.ctrlKey || event.metaKey)) {
@ -146,13 +148,14 @@ export default function Conversation({
value={titleInput ?? ''}
onChange={(e) => setTitleInput(e.target.value)}
onKeyDown={handleKeyDown}
aria-label={`${localize('com_ui_rename')} ${localize('com_ui_chat')}`}
/>
<div className="flex gap-1">
<button onClick={cancelRename}>
<X className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
<button onClick={cancelRename} aria-label='cancel new name'>
<X aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
</button>
<button onClick={onRename}>
<Check className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
<button onClick={onRename} aria-label='submit new name'>
<Check aria-hidden={true} className="transition-colors h-4 w-4 duration-200 ease-in-out hover:opacity-70" />
</button>
</div>
</div>

2
client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
View file

@ -76,7 +76,7 @@ export default function ConvoOptions({
: 'opacity-0 focus:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 data-[open]:opacity-100',
)}
>
<Ellipsis className="icon-md text-text-secondary" />
<Ellipsis className="icon-md text-text-secondary" aria-hidden={true}/>
</Ariakit.MenuButton>
}
items={dropdownItems}

2
client/src/components/Nav/NewChat.tsx
View file

@ -101,7 +101,7 @@ export default function NewChat({
<TooltipTrigger asChild>
<button
id="nav-new-chat-btn"
aria-label="nav-new-chat-btn"
aria-label={localize('com_ui_new_chat')}
className="text-text-primary"
>
<NewChatIcon className="size-5" />

1
client/src/components/svg/NewChatIcon.tsx
View file

@ -8,6 +8,7 @@ export default function NewChatIcon({ className = '' }: { className?: string })
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cn('text-black dark:text-white', className)}
aria-hidden={true}
>
<path
fillRule="evenodd"

2
client/src/components/ui/OGDialogTemplate.tsx
View file

@ -71,7 +71,7 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
<div>{leftButtons ? leftButtons : null}</div>
<div className="flex h-auto gap-3">
{showCancelButton && (
<OGDialogClose className="btn btn-neutral border-token-border-light relative rounded-lg text-sm">
<OGDialogClose className="btn btn-neutral border-token-border-light relative rounded-lg text-sm ring-offset-2 dark:ring-offset-0 focus:ring-2 focus:ring-black">
{Cancel}
</OGDialogClose>
)}