fix(a11y): WCAG 2.1 AA fixes (#2219)

apps/client/src/ee/ai-chat/styles/ai-chat.module.css

@@ -106,6 +106,7 @@
   font-size: 1.5rem;
   font-weight: 600;
   color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  margin-top: 0;
   margin-bottom: var(--mantine-spacing-xl);
   text-align: center;
 }
@@ -128,6 +129,7 @@
   color: var(--mantine-color-dimmed);
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  margin-top: 0;
   margin-bottom: var(--mantine-spacing-sm);
 }
 

apps/client/src/ee/ai-chat/styles/chat-input.module.css

@@ -114,7 +114,7 @@
   }
 
   :global(.ProseMirror p.is-editor-empty:first-child::before) {
-    color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+    color: var(--mantine-color-placeholder);
     content: attr(data-placeholder);
     float: left;
     height: 0;
@@ -183,7 +183,7 @@
   border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
   background: none;
   cursor: pointer;
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
   transition: color 150ms, background-color 150ms;
 
   @mixin hover {

apps/client/src/ee/ai-chat/styles/chat-sidebar.module.css

@@ -15,6 +15,7 @@
 }
 
 .title {
+  margin: 0;
   font-weight: 600;
   font-size: var(--mantine-font-size-sm);
 }
@@ -33,6 +34,7 @@
 }
 
 .chatGroupLabel {
+  margin: 0;
   padding: 4px var(--mantine-spacing-xs);
   font-size: var(--mantine-font-size-xs);
   font-weight: 600;
@@ -118,7 +120,8 @@
   color: inherit;
 }
 
-.chatItem:hover .chatItemDate {
+.chatItem:hover .chatItemDate,
+.chatItem:focus-within .chatItemDate {
   opacity: 0;
 }
 
@@ -133,6 +136,12 @@
   position: relative;
 }
 
-.chatItem:hover .chatItemActions {
+.chatItem:hover .chatItemActions,
+.chatItem:focus-within .chatItemActions {
   opacity: 1;
 }
+
+.chatItemActions :global(.mantine-ActionIcon-root):focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}