KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Sidebar Setting elements to be buttons (improve accessibility) (#130) 

* update sidebar elements to be buttons so they are keyboard navigatable

* rollback whitespace change
This commit is contained in:
Brad Ullman 2023-03-25 03:21:58 -07:00 committed by GitHub
parent bc3b6d3355
commit c73f604819
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/Sidebar/Import.tsx
View File

@ -2,6 +2,7 @@ import { ChatFolder, Conversation } from "@/types";
import { cleanConversationHistory } from "@/utils/app/clean"; import { cleanConversationHistory } from "@/utils/app/clean";
import { IconFileImport } from "@tabler/icons-react"; import { IconFileImport } from "@tabler/icons-react";
import { FC } from "react"; import { FC } from "react";
import { SidebarButton } from "./SidebarButton";
interface Props { interface Props {
onImport: (data: { conversations: Conversation[]; folders: ChatFolder[] }) => void; onImport: (data: { conversations: Conversation[]; folders: ChatFolder[] }) => void;
@ -9,9 +10,11 @@ interface Props {
export const Import: FC<Props> = ({ onImport }) => { export const Import: FC<Props> = ({ onImport }) => {
return ( return (
<div className="flex py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer w-full items-center"> <>
<input <input
className="opacity-0 absolute w-[200px] cursor-pointer" id="import-file"
className="sr-only"
tabIndex={-1}
type="file" type="file"
accept=".json" accept=".json"
onChange={(e) => { onChange={(e) => {
@ -31,10 +34,17 @@ export const Import: FC<Props> = ({ onImport }) => {
reader.readAsText(file); reader.readAsText(file);
}} }}
/> />
<div className="flex items-center gap-3 text-left">
<IconFileImport size={16} /> <SidebarButton
<div>Import conversations</div> text="Import conversations"
</div> icon={<IconFileImport size={16} />}
</div> onClick={() => {
const importFile = document.querySelector("#import-file") as HTMLInputElement;
if (importFile) {
importFile.click();
}
}}
/>
</>
); );
}; };

4
components/Sidebar/SidebarButton.tsx
View File

@ -8,12 +8,12 @@ interface Props {
export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => { export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
return ( return (
<div <button
className="flex py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer w-full items-center" className="flex py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer w-full items-center"
onClick={onClick} onClick={onClick}
> >
<div>{icon}</div> <div>{icon}</div>
<div>{text}</div> <div>{text}</div>
</div> </button>
); );
}; };