From a5c6db096b2706eed371c28dd7456793995b559a Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Fri, 16 Jun 2023 08:20:57 -0700
Subject: [PATCH] Set aria-selected property for chat colors

---
 ts/components/ChatColorPicker.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ts/components/ChatColorPicker.tsx b/ts/components/ChatColorPicker.tsx
index 9d709bd7a8a5..6f94601417dd 100644
--- a/ts/components/ChatColorPicker.tsx
+++ b/ts/components/ChatColorPicker.tsx
@@ -179,6 +179,7 @@ export function ChatColorPicker({
         {ConversationColors.map((color, i) => (
           <div
             aria-label={color}
+            aria-selected={color === selectedColor}
             className={classNames(
               `ChatColorPicker__bubble ChatColorPicker__bubble--${color}`,
               {
@@ -192,7 +193,7 @@ export function ChatColorPicker({
                 onSelectColor(color);
               }
             }}
-            role="button"
+            role="option"
             tabIndex={0}
             ref={i === 0 ? focusRef : undefined}
           />
@@ -311,6 +312,7 @@ function CustomColorBubble({
   const bubble = (
     <div
       aria-label={colorId}
+      aria-selected={isSelected}
       className={classNames({
         ChatColorPicker__bubble: true,
         'ChatColorPicker__bubble--custom-selected': isSelected,
@@ -322,7 +324,7 @@ function CustomColorBubble({
           handleClick(ev);
         }
       }}
-      role="button"
+      role="option"
       tabIndex={0}
       style={{
         ...getCustomColorStyle(color),