Changes for readability and 508

USEPA · Sep 23, 2024 · 7a63ea8 · 7a63ea8
1 parent f2491c6
commit 7a63ea8
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 11 deletions.
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
@@ -427,7 +427,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
               </>
             ) : (
               <>
-                <div className="sticky top-0 z-10 flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-500 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
+                <div className="sticky top-0 z-10 flex justify-center border border-b-neutral-300 bg-neutral-100 py-2 text-sm text-neutral-700 dark:border-none dark:bg-[#444654] dark:text-neutral-200">
                   {t('Temp')}
                   : {selectedConversation?.temperature} |
 

diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
@@ -303,6 +303,8 @@ export const ChatInput = ({
             onCompositionEnd={() => setIsTyping(false)}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
+            id="ChatInput"
+            autoFocus
           />
 
           <button

diff --git a/components/Chat/Temperature.tsx b/components/Chat/Temperature.tsx
@@ -34,20 +34,21 @@ export const TemperatureSlider: FC<Props> = ({
       <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
         {label}
       </label>
-      <span className="text-[12px] text-black/50 dark:text-white/50 text-sm">
+      <span className="text-[12px] text-black/70 dark:text-white/50 text-sm">
       Left makes responses more focused and deterministic, right makes it more creative and random.
       </span>
       <span className="mt-2 mb-1 text-center text-neutral-900 dark:text-neutral-100">
         {temperature.toFixed(1)}
       </span>
       <input
-        className="cursor-pointer"
+        className="cursor-pointer text-black"
         type="range"
         min={0}
         max={1}
         step={0.1}
         value={temperature}
         onChange={handleChange}
+        title="Change Model Temperature"
       />
       <ul className="w mt-2 pb-8 flex justify-between px-[24px] text-neutral-900 dark:text-neutral-100">
         <li className="flex justify-center relative">

diff --git a/components/Chatbar/components/ChatbarSettings.tsx b/components/Chatbar/components/ChatbarSettings.tsx
@@ -36,7 +36,7 @@ export const ChatbarSettings = () => {
   } = useContext(ChatbarContext);
 
   return (
-    <div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
+    <div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm text-black">
       {conversations.length > 0 ? (
         <ClearConversations onClearConversations={handleClearConversations} />
       ) : null}

diff --git a/components/Chatbar/components/ClearConversations.tsx b/components/Chatbar/components/ClearConversations.tsx
@@ -20,16 +20,16 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
   };
 
   return isConfirming ? (
-    <div className="flex w-full cursor-pointer items-center rounded-lg py-3 px-3 hover:bg-gray-500/10">
+    <div className="flex w-full cursor-pointer items-center rounded-lg py-3 px-3 text-black transition-colors duration-200 hover:bg-gray-500/10">
       <IconTrash size={18} />
 
-      <div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-white">
+      <div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-black transition-colors duration-200 hover:bg-gray-500/10">
         {t('Are you sure?')}
       </div>
 
       <div className="flex w-[40px]">
         <IconCheck
-          className="ml-auto mr-1 min-w-[20px] text-neutral-400 hover:text-neutral-100"
+          className="ml-auto mr-1 min-w-[20px] text-neutral-400 hover:text-black"
           size={18}
           onClick={(e) => {
             e.stopPropagation();
@@ -38,7 +38,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
         />
 
         <IconX
-          className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
+          className="ml-auto min-w-[20px] text-neutral-400 hover:text-black"
           size={18}
           onClick={(e) => {
             e.stopPropagation();

diff --git a/components/Markdown/CodeBlock.tsx b/components/Markdown/CodeBlock.tsx
@@ -75,6 +75,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
           <button
             className="flex items-center rounded bg-none p-1 text-xs text-white"
             onClick={downloadAsFile}
+            title="Download as File"
           >
             <IconDownload size={18} />
           </button>

diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
@@ -60,9 +60,9 @@ const Sidebar = <T,>({
       <div
         className={`fixed top-0 ${side}-0 z-40 flex h-full w-[260px] flex-none flex-col space-y-2 bg-white p-2 text-[14px] border border-neutral-200 transition-all sm:relative sm:top-0`}
       >
-        <div className="w-full bg-white flex justify-center my-2">
+        <a aria-label="Skip to Text Prompt Input" href="#ChatInput" className="w-full bg-white flex justify-center my-2">
             <Logo />
-        </div>
+        </a>
         <div className="flex items-center">
           <button
             className="text-sidebar flex h-[42px] w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-neutral-200 p-3 text-black  transition-colors duration-200 hover:bg-gray-500/10"

diff --git a/components/Sidebar/SidebarButton.tsx b/components/Sidebar/SidebarButton.tsx
@@ -9,7 +9,7 @@ interface Props {
 export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
   return (
     <button
-      className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[14px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
+      className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[14px] leading-3 border border-neutral-200 p-3 text-black transition-colors duration-200 hover:bg-gray-500/10"
       onClick={onClick}
     >
       <div>{icon}</div>