Small fixes, add more accessiblity

ephemeraHQ · Oct 25, 2024 · ae5cf8d · ae5cf8d
1 parent 391f117
commit ae5cf8d
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/components/Chat/Message/MessageReactions/MessageReactionsDrawer/MessageReactionsDrawer.tsx b/components/Chat/Message/MessageReactions/MessageReactionsDrawer/MessageReactionsDrawer.tsx
@@ -1,3 +1,4 @@
+import { BottomSheetContentContainer } from "@design-system/BottomSheet/BottomSheetContentContainer";
 import { BottomSheetHeader } from "@design-system/BottomSheet/BottomSheetHeader";
 import { BottomSheetModal } from "@design-system/BottomSheet/BottomSheetModal";
 import { HStack } from "@design-system/HStack";
@@ -14,7 +15,6 @@ import {
   resetMessageReactionsDrawer,
   useMessageReactionsRolledUpReactions,
 } from "./MessageReactionsDrawer.service";
-import { BottomSheetContentContainer } from "../../../../../design-system/BottomSheet/BottomSheetContentContainer";
 
 export const MessageReactionsDrawer = memo(function MessageReactionsDrawer() {
   const { theme } = useAppTheme();
@@ -43,7 +43,6 @@ export const MessageReactionsDrawer = memo(function MessageReactionsDrawer() {
             style={{
               paddingLeft: theme.spacing.lg,
               flexDirection: "row",
-              gap: 20,
             }}
           >
             <Text>All {rolledUpReactions.totalReactions}</Text>
@@ -60,6 +59,9 @@ export const MessageReactionsDrawer = memo(function MessageReactionsDrawer() {
                       : theme.colors.background.raised,
                   }}
                   underlayColor={theme.colors.border.subtle}
+                  accessible
+                  accessibilityRole="button"
+                  accessibilityLabel={`${details.count} ${emoji} reactions`}
                 >
                   <HStack style={{ alignItems: "center" }}>
                     <Text>{emoji}</Text>