make all chat area components tabbable (accessibility) (#246)

* make all chat area components tabbable * align message role description * remove inline styles on icons * remove inline styles on icons
2023-03-28 01:35:57 -07:00
parent 5d31947ab9
commit a78a8c4a94
12 changed files with 83 additions and 96 deletions
@@ -217,16 +217,17 @@ export const Chat: FC<Props> = memo(
                <>
                  <div className="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">
                    {t('Model')}: {conversation.model.name}
-                    <IconSettings
+                    <button
                      className="ml-2 cursor-pointer hover:opacity-50"
                      onClick={handleSettings}
-                      size={18}
-                    />
-                    <IconClearAll
+                    >
+                    <IconSettings size={18} />
+                    </button>
+                    <button
                      className="ml-2 cursor-pointer hover:opacity-50"
-                      onClick={onClearAll}
-                      size={18}
-                    />
+                      onClick={onClearAll}>
+                    <IconClearAll size={18} />
+                    </button>
                  </div>
                  {showSettings && (
                    <div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">