fix(web): name custom and notice actions

web/app/components/custom/custom-page/__tests__/index.spec.tsx

@@ -133,7 +133,7 @@ describe('CustomPage', () => {
       expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
       expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
 
-      await user.click(screen.getByText('billing.upgradeBtn.encourageShort'))
+      await user.click(screen.getByRole('button', { name: 'billing.upgradeBtn.encourageShort' }))
 
       expect(setShowPricingModal).toHaveBeenCalledTimes(1)
     })

web/app/components/custom/custom-page/index.tsx

@@ -20,7 +20,13 @@ const CustomPage = () => {
             <div className="title-xl-semi-bold">{t('upgradeTip.title', { ns: 'custom' })}</div>
             <div className="system-sm-regular">{t('upgradeTip.des', { ns: 'custom' })}</div>
           </div>
-          <div className="flex h-10 w-[120px] cursor-pointer items-center justify-center rounded-3xl bg-white system-md-semibold text-text-accent shadow-xs hover:opacity-95" onClick={() => setShowPricingModal()}>{t('upgradeBtn.encourageShort', { ns: 'billing' })}</div>
+          <button
+            type="button"
+            className="flex h-10 w-[120px] cursor-pointer items-center justify-center rounded-3xl border-none bg-white p-0 system-md-semibold text-text-accent shadow-xs hover:opacity-95"
+            onClick={() => setShowPricingModal()}
+          >
+            {t('upgradeBtn.encourageShort', { ns: 'billing' })}
+          </button>
         </div>
       )}
       <CustomWebAppBrand />

web/app/components/header/__tests__/maintenance-notice.spec.tsx

@@ -5,7 +5,7 @@ import { NOTICE_I18N } from '@/i18n-config/language'
 import MaintenanceNotice from '../maintenance-notice'
 
 vi.mock('@/app/components/base/icons/src/vender/line/general', () => ({
-  X: ({ onClick }: { onClick?: () => void }) => <button type="button" aria-label="close notice" onClick={onClick} />,
+  X: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
 }))
 
 vi.mock(
@@ -78,7 +78,7 @@ describe('MaintenanceNotice', () => {
       render(<MaintenanceNotice />)
       expect(screen.getByText('Notice Title')).toBeInTheDocument()
 
-      fireEvent.click(screen.getByRole('button', { name: /close notice/i }))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(screen.queryByText('Notice Title')).not.toBeInTheDocument()
       expect(localStorage.getItem('hide-maintenance-notice')).toBe('1')
@@ -88,7 +88,7 @@ describe('MaintenanceNotice', () => {
       setNoticeHref('https://dify.ai/notice')
       render(<MaintenanceNotice />)
 
-      const desc = screen.getByText('Notice Description')
+      const desc = screen.getByRole('button', { name: 'Notice Description' })
       fireEvent.click(desc)
 
       expect(windowOpenSpy).toHaveBeenCalledWith(

web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx

@@ -48,10 +48,15 @@ const InstallFromMarketplace = ({
     <div className="mb-2">
       <Divider className="mt-4! h-px" />
       <div className="flex items-center justify-between">
-        <div className="flex cursor-pointer items-center gap-1 system-md-semibold text-text-primary" onClick={() => setCollapse(!collapse)}>
-          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
+        <button
+          type="button"
+          aria-expanded={!collapse}
+          className="flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left system-md-semibold text-text-primary"
+          onClick={() => setCollapse(!collapse)}
+        >
+          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} aria-hidden="true" />
           {t('modelProvider.installDataSourceProvider', { ns: 'common' })}
-        </div>
+        </button>
         <div className="mb-2 flex items-center pt-2">
           <span className="pr-1 system-sm-regular text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
           <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="inline-flex items-center system-sm-medium text-text-accent">

web/app/components/header/maintenance-notice.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { X } from '@/app/components/base/icons/src/vender/line/general'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { NOTICE_I18N } from '@/i18n-config/language'
 
 const MaintenanceNotice = () => {
+  const { t } = useTranslation()
   const locale = useLanguage()
 
   const [showNotice, setShowNotice] = useState(() => localStorage.getItem('hide-maintenance-notice') !== '1')
@@ -27,10 +29,25 @@ const MaintenanceNotice = () => {
       <div className="mr-2 flex h-[22px] shrink-0 items-center rounded-xl bg-[#F79009] px-2 text-[11px] font-medium text-white">{titleByLocale[locale]}</div>
       {
         (NOTICE_I18N.href && NOTICE_I18N.href !== '#')
-          ? <div className="grow cursor-pointer text-xs font-medium text-gray-700" onClick={handleJumpNotice}>{descByLocale[locale]}</div>
+          ? (
+              <button
+                type="button"
+                className="grow cursor-pointer border-none bg-transparent p-0 text-left text-xs font-medium text-gray-700"
+                onClick={handleJumpNotice}
+              >
+                {descByLocale[locale]}
+              </button>
+            )
           : <div className="grow text-xs font-medium text-gray-700">{descByLocale[locale]}</div>
       }
-      <X className="h-4 w-4 shrink-0 cursor-pointer text-gray-500" onClick={handleCloseNotice} />
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="h-4 w-4 shrink-0 cursor-pointer border-none bg-transparent p-0 text-gray-500"
+        onClick={handleCloseNotice}
+      >
+        <X className="h-4 w-4" aria-hidden="true" />
+      </button>
     </div>
   )
 }