From fdd2fe51a3766e8a09ac201711cdc0fe76fc81b1 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Sun, 10 May 2026 23:24:54 +0800
Subject: [PATCH] fix(web): name emoji picker actions

---
 .../app-icon-picker/__tests__/index.spec.tsx  |  4 +-
 .../components/base/emoji-picker/Inner.tsx    | 58 +++++++++++++------
 .../emoji-picker/__tests__/Inner.spec.tsx     | 24 ++++----
 .../emoji-picker/__tests__/index.spec.tsx     |  4 +-
 4 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx b/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx
index 7f452e64e9..589ad5554e 100644
--- a/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx
@@ -195,10 +195,10 @@ describe('AppIconPicker', () => {
       const { onSelect } = renderPicker()
 
       await waitFor(() => {
-        expect(screen.queryAllByTestId(/emoji-container-/i).length).toBeGreaterThan(0)
+        expect(document.querySelector('em-emoji')?.closest('button'))!.toBeInTheDocument()
       })
 
-      const firstEmoji = screen.queryAllByTestId(/emoji-container-/i)[0]
+      const firstEmoji = document.querySelector('em-emoji')?.closest('button')
       if (!firstEmoji)
         throw new Error('Could not find emoji option')
 
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index 36a98f7dd1..8deae05bbb 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -57,6 +57,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
 
   const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
   const [isSearching, setIsSearching] = useState(false)
+  const styleColorsLabelId = React.useId()
 
   React.useEffect(() => {
     if (selectedEmoji) {
@@ -101,18 +102,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
               <div className="grid h-full w-full grid-cols-8 gap-1">
                 {searchedEmojis.map((emoji: string, index: number) => {
                   return (
-                    <div
+                    <button
+                      type="button"
                       key={`emoji-search-${index}`}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg"
+                      aria-label={emoji}
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
                       onClick={() => {
                         setSelectedEmoji(emoji)
                         setShowStyleColors(true)
                       }}
                     >
-                      <div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1" data-testid={`emoji-search-result-${emoji}`}>
+                      <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
                         <em-emoji id={emoji} />
-                      </div>
-                    </div>
+                      </span>
+                    </button>
                   )
                 })}
               </div>
@@ -127,18 +130,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
               <div className="grid h-full w-full grid-cols-8 gap-1">
                 {category.emojis.map((emoji, index: number) => {
                   return (
-                    <div
+                    <button
+                      type="button"
                       key={`emoji-${index}`}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg"
+                      aria-label={emoji}
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
                       onClick={() => {
                         setSelectedEmoji(emoji)
                         setShowStyleColors(true)
                       }}
                     >
-                      <div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1" data-testid={`emoji-container-${emoji}`}>
+                      <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
                         <em-emoji id={emoji} />
-                      </div>
-                    </div>
+                      </span>
+                    </button>
                   )
                 })}
 
@@ -150,20 +155,39 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
 
       {/* Color Select */}
       <div className={cn('flex items-center justify-between p-3 pb-0')}>
-        <p className="mb-2 system-xs-medium-uppercase text-text-primary">Choose Style</p>
+        <p id={styleColorsLabelId} className="mb-2 system-xs-medium-uppercase text-text-primary">Choose Style</p>
         {showStyleColors
-          ? <span className="i-heroicons-chevron-down h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />
-          : <span className="i-heroicons-chevron-up h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />}
+          ? (
+              <button
+                type="button"
+                aria-labelledby={styleColorsLabelId}
+                aria-expanded="true"
+                className="i-heroicons-chevron-down h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
+                onClick={() => setShowStyleColors(!showStyleColors)}
+              />
+            )
+          : (
+              <button
+                type="button"
+                aria-labelledby={styleColorsLabelId}
+                aria-expanded="false"
+                className="i-heroicons-chevron-up h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
+                onClick={() => setShowStyleColors(!showStyleColors)}
+              />
+            )}
       </div>
       {showStyleColors && (
         <div className="grid w-full grid-cols-8 gap-1 px-3">
           {backgroundColors.map((color) => {
             return (
-              <div
+              <button
+                type="button"
                 key={color}
+                aria-label={color}
                 className={
                   cn(
                     'cursor-pointer',
+                    'border-none bg-transparent p-0',
                     'ring-offset-1 hover:ring-1',
                     'inline-flex h-10 w-10 items-center justify-center rounded-lg',
                     color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
@@ -173,15 +197,15 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
                   setSelectedBackground(color)
                 }}
               >
-                <div
+                <span
                   className={cn(
                     'flex h-8 w-8 items-center justify-center rounded-lg p-1',
                   )}
                   style={{ background: color }}
                 >
                   {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
-                </div>
-              </div>
+                </span>
+              </button>
             )
           })}
         </div>
diff --git a/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx b/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx
index 41683d7af3..c2f4bce55c 100644
--- a/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx
+++ b/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx
@@ -75,10 +75,10 @@ describe('EmojiPickerInner', () => {
 
     it('updates selected emoji and calls onSelect when an emoji is clicked', async () => {
       render(<EmojiPickerInner onSelect={mockOnSelect} />)
-      const emojiContainers = screen.getAllByTestId(/^emoji-container-/)
+      const emojiButton = screen.getByRole('button', { name: 'rabbit' })
 
       await act(async () => {
-        fireEvent.click(emojiContainers[0]!)
+        fireEvent.click(emojiButton)
       })
 
       expect(mockOnSelect).toHaveBeenCalledWith('rabbit', expect.any(String))
@@ -89,7 +89,7 @@ describe('EmojiPickerInner', () => {
 
       expect(screen.queryByText('#FFEAD5')).not.toBeInTheDocument()
 
-      const toggleButton = screen.getByTestId('toggle-colors')
+      const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
       expect(toggleButton)!.toBeInTheDocument()
 
       await act(async () => {
@@ -104,21 +104,21 @@ describe('EmojiPickerInner', () => {
     it('updates background color and calls onSelect when a color is clicked', async () => {
       render(<EmojiPickerInner onSelect={mockOnSelect} />)
 
-      const toggleButton = screen.getByTestId('toggle-colors')
+      const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
       await act(async () => {
         fireEvent.click(toggleButton!)
       })
 
-      const emojiContainers = screen.getAllByTestId(/^emoji-container-/)
+      const emojiButton = screen.getByRole('button', { name: 'rabbit' })
       await act(async () => {
-        fireEvent.click(emojiContainers[0]!)
+        fireEvent.click(emojiButton)
       })
 
       mockOnSelect.mockClear()
 
-      const colorOptions = document.querySelectorAll('[style^="background:"]')
+      const colorOptions = screen.getAllByRole('button', { name: /^#/ })
       await act(async () => {
-        fireEvent.click(colorOptions[1]!.parentElement!)
+        fireEvent.click(colorOptions[1]!)
       })
 
       expect(mockOnSelect).toHaveBeenCalledWith('rabbit', '#E4FBCC')
@@ -134,9 +134,9 @@ describe('EmojiPickerInner', () => {
 
       await screen.findByText('Search')
 
-      const searchEmojis = screen.getAllByTestId(/^emoji-search-result-/)
+      const searchEmoji = screen.getByRole('button', { name: 'dog' })
       await act(async () => {
-        fireEvent.click(searchEmojis![0]!)
+        fireEvent.click(searchEmoji)
       })
 
       expect(mockOnSelect).toHaveBeenCalledWith('dog', expect.any(String))
@@ -145,7 +145,7 @@ describe('EmojiPickerInner', () => {
     it('toggles style colors display back and forth', async () => {
       render(<EmojiPickerInner onSelect={mockOnSelect} />)
 
-      const toggleButton = screen.getByTestId('toggle-colors')
+      const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
 
       await act(async () => {
         fireEvent.click(toggleButton!)
@@ -153,7 +153,7 @@ describe('EmojiPickerInner', () => {
       expect(screen.getByText('Choose Style'))!.toBeInTheDocument()
 
       await act(async () => {
-        fireEvent.click(screen.getByTestId('toggle-colors')!) // It should be the other icon now
+        fireEvent.click(screen.getByRole('button', { name: 'Choose Style' }))
       })
       expect(screen.queryByText('#FFEAD5')).not.toBeInTheDocument()
     })
diff --git a/web/app/components/base/emoji-picker/__tests__/index.spec.tsx b/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
index 36b161b7c7..ed5f9bed75 100644
--- a/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
@@ -81,10 +81,8 @@ describe('EmojiPicker', () => {
         )
       })
 
-      const emojiWrappers = screen.getAllByTestId(/^emoji-container-/)
-      expect(emojiWrappers.length).toBeGreaterThan(0)
       await act(async () => {
-        fireEvent.click(emojiWrappers[0]!)
+        fireEvent.click(screen.getByRole('button', { name: 'emoji1' }))
       })
 
       const okButton = screen.getByText(/OK/i)