feat(web): improve a11y and remove data-testid (#35999)

web/app/components/develop/__tests__/ApiServer.spec.tsx

@@ -5,7 +5,13 @@ import ApiServer from '../ApiServer'
 
 vi.mock('@/app/components/develop/secret-key/secret-key-modal', () => ({
   default: ({ isShow, onClose }: { isShow: boolean, onClose: () => void }) => (
-    isShow ? <div data-testid="secret-key-modal"><button onClick={onClose}>Close Modal</button></div> : null
+    isShow
+      ? (
+          <div role="dialog" aria-label="Secret key">
+            <button type="button" onClick={onClose}>Close Modal</button>
+          </div>
+        )
+      : null
   ),
 }))
 
@@ -81,7 +87,7 @@ describe('ApiServer', () => {
         await user.click(apiKeyButton)
       })
 
-      expect(screen.getByTestId('secret-key-modal')).toBeInTheDocument()
+      expect(screen.getByRole('dialog', { name: 'Secret key' })).toBeInTheDocument()
     })
 
     it('should close modal when close button is clicked', async () => {
@@ -93,14 +99,14 @@ describe('ApiServer', () => {
         await user.click(apiKeyButton)
       })
 
-      expect(screen.getByTestId('secret-key-modal')).toBeInTheDocument()
+      expect(screen.getByRole('dialog', { name: 'Secret key' })).toBeInTheDocument()
 
-      const closeButton = screen.getByText('Close Modal')
+      const closeButton = screen.getByRole('button', { name: 'Close Modal' })
       await act(async () => {
         await user.click(closeButton)
       })
 
-      expect(screen.queryByTestId('secret-key-modal')).not.toBeInTheDocument()
+      expect(screen.queryByRole('dialog', { name: 'Secret key' })).not.toBeInTheDocument()
     })
   })
 

web/app/components/develop/secret-key/__tests__/input-copy.spec.tsx

@@ -158,8 +158,9 @@ describe('InputCopy', () => {
     it('should have cursor-pointer on clickable area', async () => {
       await renderAndFlush(<InputCopy value="test" />)
       const valueText = screen.getByText('test')
-      const clickableArea = valueText.closest('div[class*="cursor-pointer"]')
+      const clickableArea = valueText.closest('button')
       expect(clickableArea).toBeInTheDocument()
+      expect(clickableArea?.className).toContain('cursor-pointer')
     })
   })
 
@@ -188,8 +189,9 @@ describe('InputCopy', () => {
     it('should have truncate class for long values', async () => {
       await renderAndFlush(<InputCopy value="very-long-api-key-value-that-might-overflow" />)
       const valueText = screen.getByText('very-long-api-key-value-that-might-overflow')
-      const container = valueText.closest('div[class*="truncate"]')
+      const container = valueText.closest('button')
       expect(container).toBeInTheDocument()
+      expect(container?.className).toContain('truncate')
     })
 
     it('should have text-secondary color on value', async () => {
@@ -201,8 +203,9 @@ describe('InputCopy', () => {
     it('should have absolute positioning for overlay', async () => {
       await renderAndFlush(<InputCopy value="test" />)
       const valueText = screen.getByText('test')
-      const container = valueText.closest('div[class*="absolute"]')
+      const container = valueText.closest('button')
       expect(container).toBeInTheDocument()
+      expect(container?.className).toContain('absolute')
     })
   })
 

web/app/components/develop/secret-key/input-copy.tsx

@@ -42,18 +42,11 @@ const InputCopy = ({
       <div className="flex h-5 grow items-center">
         {children}
         <div className="relative h-full grow text-[13px]">
-          <div
-            className="r-0 absolute top-0 left-0 w-full cursor-pointer truncate pr-2 pl-2"
-            role="button"
+          <button
+            type="button"
+            className="r-0 absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent py-0 pr-2 pl-2 text-left"
             aria-label={copyLabel}
-            tabIndex={0}
             onClick={handleCopy}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault()
-                handleCopy()
-              }
-            }}
           >
             <Tooltip>
               <TooltipTrigger
@@ -63,7 +56,7 @@ const InputCopy = ({
                 {copyLabel}
               </TooltipContent>
             </Tooltip>
-          </div>
+          </button>
         </div>
         <div className="h-4 w-px shrink-0 bg-divider-regular" />
         <div className="mx-1"><CopyFeedback content={value} /></div>