From 0bf3416431ceb9bca34fd0c8ce388f6a3a07f57e Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 5 Aug 2026 14:52:41 +0800
Subject: [PATCH] fix(web): remove misleading ARIA states (#40015)

---
 .../__tests__/configuration-view.spec.tsx     |  3 ++-
 .../app/configuration/configuration-view.tsx  |  1 -
 .../apps/__tests__/app-card.spec.tsx          |  4 ++--
 web/app/components/apps/app-card.tsx          |  1 -
 web/app/components/apps/starred-app-card.tsx  |  1 -
 .../__tests__/audio-preview.spec.tsx          |  1 +
 .../__tests__/pdf-preview.spec.tsx            |  1 +
 .../__tests__/video-preview.spec.tsx          |  1 +
 .../base/file-uploader/audio-preview.tsx      |  2 +-
 .../base/file-uploader/pdf-preview.tsx        |  1 -
 .../base/file-uploader/video-preview.tsx      |  2 +-
 .../__tests__/image-preview.spec.tsx          |  1 +
 .../base/image-uploader/image-preview.tsx     |  1 -
 .../dataset-card/__tests__/index.spec.tsx     |  2 +-
 .../datasets/list/dataset-card/index.tsx      |  1 -
 .../__tests__/popup-item.spec.tsx             |  4 +++-
 .../model-selector/popup-item.tsx             |  2 +-
 web/app/signin/__tests__/normal-form.spec.tsx | 21 ++++++++++++++++++-
 .../components/mail-and-password-auth.tsx     |  1 -
 .../continue-work/__tests__/item.spec.tsx     |  4 ++--
 web/features/home/continue-work/item.tsx      |  1 -
 .../__tests__/home-content.spec.tsx           |  2 +-
 22 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/web/app/components/app/configuration/__tests__/configuration-view.spec.tsx b/web/app/components/app/configuration/__tests__/configuration-view.spec.tsx
index 0a8e09172d8..32dd02f928b 100644
--- a/web/app/components/app/configuration/__tests__/configuration-view.spec.tsx
+++ b/web/app/components/app/configuration/__tests__/configuration-view.spec.tsx
@@ -352,8 +352,9 @@ describe('ConfigurationView', () => {
 
     render(<ConfigurationView {...createViewModel({ contextValue })} />)
 
-    const badge = screen.getByRole('button', { name: 'appDebug.legacyAgentBadge.description' })
+    const badge = screen.getByRole('button', { name: 'appDebug.legacyAgentBadge.label' })
     expect(badge).toHaveTextContent('appDebug.legacyAgentBadge.label')
+    expect(badge).not.toHaveAttribute('aria-label')
 
     fireEvent.click(badge)
 
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index 7eee83fda08..317f2a5e011 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -54,7 +54,6 @@ function LegacyAgentBadge() {
         delay={300}
         closeDelay={200}
         type="button"
-        aria-label={description}
         className="inline-flex h-5 shrink-0 cursor-pointer items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1.25 system-2xs-medium-uppercase whitespace-nowrap text-text-warning outline-hidden hover:bg-state-warning-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
       >
         <span aria-hidden className="i-ri-alert-fill size-3 shrink-0" />
diff --git a/web/app/components/apps/__tests__/app-card.spec.tsx b/web/app/components/apps/__tests__/app-card.spec.tsx
index 4f4a9dcca9c..94d7548960d 100644
--- a/web/app/components/apps/__tests__/app-card.spec.tsx
+++ b/web/app/components/apps/__tests__/app-card.spec.tsx
@@ -456,7 +456,7 @@ describe('AppCard', () => {
 
       const card = screen.getByRole('button', { name: 'Preview Only App' })
       expect(card).toHaveClass('opacity-60')
-      expect(card).toHaveAttribute('aria-disabled', 'true')
+      expect(card).not.toHaveAttribute('aria-disabled')
       expect(screen.getByText('Only visible metadata')).toBeInTheDocument()
       expect(screen.getByText('Readonly Author')).toBeInTheDocument()
       const tagSelector = screen.getByLabelText('tag-selector')
@@ -495,7 +495,7 @@ describe('AppCard', () => {
 
       const card = screen.getByRole('button', { name: 'Preview Only Starred App' })
       expect(card).toHaveClass('opacity-60')
-      expect(card).toHaveAttribute('aria-disabled', 'true')
+      expect(card).not.toHaveAttribute('aria-disabled')
       expect(screen.getByText('Readonly Author')).toBeInTheDocument()
       expect(
         screen.queryByRole('link', { name: 'Preview Only Starred App' }),
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 44d74c6d966..bd41defa080 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -1204,7 +1204,6 @@ export function AppCard({
           <article
             role="button"
             tabIndex={0}
-            aria-disabled="true"
             aria-labelledby={appNameId}
             aria-describedby={app.description ? appDescriptionId : undefined}
             data-step-by-step-tour-target={stepByStepTourCardTarget}
diff --git a/web/app/components/apps/starred-app-card.tsx b/web/app/components/apps/starred-app-card.tsx
index 60212e7160b..86b9ae80c37 100644
--- a/web/app/components/apps/starred-app-card.tsx
+++ b/web/app/components/apps/starred-app-card.tsx
@@ -106,7 +106,6 @@ export function StarredAppCard({
         <div
           role="button"
           tabIndex={0}
-          aria-disabled="true"
           aria-label={app.name}
           data-step-by-step-tour-target={stepByStepTourCardTarget}
           data-step-by-step-tour-highlight-part={stepByStepTourCardHighlightPart}
diff --git a/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
index 5a27fc58646..a055d521ede 100644
--- a/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
@@ -14,6 +14,7 @@ describe('AudioPreview', () => {
     const audio = document.querySelector('audio')
     expect(audio).toBeInTheDocument()
     expect(audio).toHaveAttribute('title', 'Test Audio')
+    expect(audio?.parentElement).not.toHaveAttribute('aria-label')
   })
 
   it('should render source element with correct src and type', () => {
diff --git a/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx
index 4e3ea68db2a..a8ca6438749 100644
--- a/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/pdf-preview.spec.tsx
@@ -64,6 +64,7 @@ describe('PdfPreview', () => {
     render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)
 
     expect(document.querySelector('[tabindex="-1"]')).toBeInTheDocument()
+    expect(getScaleContainer()).not.toHaveAttribute('aria-label')
     expect(screen.getByTestId('pdf-loader')).toBeInTheDocument()
     expect(screen.getByTestId('pdf-highlighter')).toBeInTheDocument()
     expect(screen.getByRole('status')).toBeInTheDocument()
diff --git a/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
index 2fbf8c2f783..5e951886816 100644
--- a/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
@@ -14,6 +14,7 @@ describe('VideoPreview', () => {
     const video = document.querySelector('video')
     expect(video).toBeInTheDocument()
     expect(video).toHaveAttribute('title', 'Test Video')
+    expect(video?.parentElement).not.toHaveAttribute('aria-label')
   })
 
   it('should render source element with correct src and type', () => {
diff --git a/web/app/components/base/file-uploader/audio-preview.tsx b/web/app/components/base/file-uploader/audio-preview.tsx
index 2f731f85344..6c2741d5fa3 100644
--- a/web/app/components/base/file-uploader/audio-preview.tsx
+++ b/web/app/components/base/file-uploader/audio-preview.tsx
@@ -22,7 +22,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({ url, title, onCancel }) => {
         className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
         backdropClassName="bg-transparent!"
       >
-        <div aria-label={title} tabIndex={-1} onClick={(e) => e.stopPropagation()}>
+        <div tabIndex={-1} onClick={(e) => e.stopPropagation()}>
           <audio controls title={title} autoPlay={false} preload="metadata">
             <source type="audio/mpeg" src={url} className="max-h-full max-w-full" />
           </audio>
diff --git a/web/app/components/base/file-uploader/pdf-preview.tsx b/web/app/components/base/file-uploader/pdf-preview.tsx
index fe4f77c2346..54cc9264a57 100644
--- a/web/app/components/base/file-uploader/pdf-preview.tsx
+++ b/web/app/components/base/file-uploader/pdf-preview.tsx
@@ -57,7 +57,6 @@ const PdfPreview: FC<PdfPreviewProps> = ({ url, onCancel }) => {
         backdropClassName="bg-transparent!"
       >
         <div
-          aria-label={url}
           tabIndex={-1}
           onClick={(e) => e.stopPropagation()}
           className="h-[95vh] max-h-full w-screen max-w-full overflow-hidden"
diff --git a/web/app/components/base/file-uploader/video-preview.tsx b/web/app/components/base/file-uploader/video-preview.tsx
index 31696d085ce..37f833bbd26 100644
--- a/web/app/components/base/file-uploader/video-preview.tsx
+++ b/web/app/components/base/file-uploader/video-preview.tsx
@@ -22,7 +22,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({ url, title, onCancel }) => {
         className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
         backdropClassName="bg-transparent!"
       >
-        <div aria-label={title} tabIndex={-1} onClick={(e) => e.stopPropagation()}>
+        <div tabIndex={-1} onClick={(e) => e.stopPropagation()}>
           <video controls title={title} autoPlay={false} preload="metadata">
             <source type="video/mp4" src={url} className="max-h-full max-w-full" />
           </video>
diff --git a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
index ae1018bb19f..8f00b5ee456 100644
--- a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
@@ -99,6 +99,7 @@ describe('ImagePreview', () => {
 
       const overlay = getOverlay()
       expect(overlay).toBeInTheDocument()
+      expect(screen.getByTestId('image-preview-container')).not.toHaveAttribute('aria-label')
       expect(overlay.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
       expect(screen.getByRole('img', { name: 'Preview Image' })).toHaveAttribute(
         'src',
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index 401b877e008..e3562402ad0 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -185,7 +185,6 @@ const ImagePreview: FC<ImagePreviewProps> = ({ url, title, onCancel, onPrev, onN
         backdropClassName="bg-transparent!"
       >
         <div
-          aria-label={title}
           data-testid="image-preview-container"
           tabIndex={-1}
           className="flex size-full items-center justify-center"
diff --git a/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx b/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
index bad3ea21884..990c13c5c38 100644
--- a/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/__tests__/index.spec.tsx
@@ -383,7 +383,7 @@ describe('DatasetCard Component', () => {
 
     const card = screen.getByRole('button', { name: 'Preview Only Dataset' })
     expect(card).toHaveClass('opacity-60')
-    expect(card).toHaveAttribute('aria-disabled', 'true')
+    expect(card).not.toHaveAttribute('aria-disabled')
     expect(screen.getByText('Preview Only Dataset')).toBeInTheDocument()
     const tagArea = screen.getByTestId('tag-area')
     expect(tagArea).toHaveAttribute('data-can-bind-or-unbind-tags', 'false')
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index 6a8591614bf..df280b6e2de 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -120,7 +120,6 @@ const DatasetCard = ({
       <div
         role={isPreviewOnly ? 'button' : undefined}
         tabIndex={isPreviewOnly ? 0 : undefined}
-        aria-disabled={isPreviewOnly ? 'true' : undefined}
         aria-label={isPreviewOnly ? dataset.name : undefined}
         className={cardClassName}
         data-disable-nprogress={true}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx
index b4e5faa49de..9085ae9dfc9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx
@@ -307,7 +307,9 @@ describe('PopupItem', () => {
     )
 
     fireEvent.click(screen.getByText('GPT-4'))
-    fireEvent.click(screen.getByText('COMMON.OPERATION.ADD'))
+    const addButton = screen.getByRole('button', { name: 'COMMON.OPERATION.ADD' })
+    expect(addButton.closest('[aria-disabled="true"]')).toBeNull()
+    fireEvent.click(addButton)
 
     expect(onValueChange).not.toHaveBeenCalled()
     expect(mockSetShowModelModal).toHaveBeenCalled()
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index 490f4fd80e5..ab86ca366fc 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -225,7 +225,7 @@ function PopupItem({
           )
           const itemRender =
             modelItem.status === ModelStatusEnum.noConfigure ? (
-              <div className={rowClassName} aria-disabled="true" onPointerDown={onPreviewCardClose}>
+              <div className={rowClassName} onPointerDown={onPreviewCardClose}>
                 {rowContent}
                 {canCreateCredential && (
                   <button
diff --git a/web/app/signin/__tests__/normal-form.spec.tsx b/web/app/signin/__tests__/normal-form.spec.tsx
index 5d36aa5ed38..fffae8ecc1c 100644
--- a/web/app/signin/__tests__/normal-form.spec.tsx
+++ b/web/app/signin/__tests__/normal-form.spec.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { screen, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { renderWithConsoleQuery as render } from '@/test/console/query-data'
@@ -205,4 +205,23 @@ describe('NormalForm', () => {
       )
     })
   })
+
+  it('should describe password visibility through its changing action name', () => {
+    mockQueryResults(
+      nonInviteQueryResult as unknown as ReturnType<typeof useQuery>,
+      nonInviteQueryResult as unknown as ReturnType<typeof useQuery>,
+    )
+
+    render(<NormalForm />)
+
+    const showPasswordButton = screen.getByRole('button', { name: 'login.showPassword' })
+    expect(showPasswordButton).not.toHaveAttribute('aria-pressed')
+
+    fireEvent.click(showPasswordButton)
+
+    expect(screen.getByRole('button', { name: 'login.hidePassword' })).not.toHaveAttribute(
+      'aria-pressed',
+    )
+    expect(screen.getByLabelText('login.password')).toHaveAttribute('type', 'text')
+  })
 })
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 82c575347de..8e223955b7d 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -156,7 +156,6 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup }: MailAndP
               aria-label={t(($) => $[showPassword ? 'hidePassword' : 'showPassword'], {
                 ns: 'login',
               })}
-              aria-pressed={showPassword}
               className="mr-1 size-8 p-0 text-text-tertiary hover:text-text-secondary"
               onClick={() => setShowPassword(!showPassword)}
             >
diff --git a/web/features/home/continue-work/__tests__/item.spec.tsx b/web/features/home/continue-work/__tests__/item.spec.tsx
index be3aaf7fc17..0669f7f3362 100644
--- a/web/features/home/continue-work/__tests__/item.spec.tsx
+++ b/web/features/home/continue-work/__tests__/item.spec.tsx
@@ -138,14 +138,14 @@ describe('ContinueWorkItem', () => {
     )
   })
 
-  it('should render preview-only apps as disabled buttons and warn on click', async () => {
+  it('should render preview-only apps as action buttons that explain the access restriction', async () => {
     const user = userEvent.setup()
     renderItem(createApp({ permission_keys: [AppACLPermission.Preview] }))
 
     const card = screen.getByRole('button', { name: /Continue App.*app\.types\.chatbot/i })
 
     expect(card).toHaveAttribute('type', 'button')
-    expect(card).toHaveAttribute('aria-disabled', 'true')
+    expect(card).not.toHaveAttribute('aria-disabled')
     expect(card).toHaveAccessibleDescription(/Alice.*5 minutes ago/)
     expect(screen.queryByRole('link', { name: /Continue App/ })).not.toBeInTheDocument()
 
diff --git a/web/features/home/continue-work/item.tsx b/web/features/home/continue-work/item.tsx
index a1e1f4944bc..93dc847c1b0 100644
--- a/web/features/home/continue-work/item.tsx
+++ b/web/features/home/continue-work/item.tsx
@@ -110,7 +110,6 @@ export function ContinueWorkItem({ app }: ContinueWorkItemProps) {
           type="button"
           aria-labelledby={`${appNameId} ${appModeId}`}
           aria-describedby={appMetadataId}
-          aria-disabled="true"
           className="absolute inset-0 z-10 cursor-not-allowed touch-manipulation appearance-none rounded-xl border-0 bg-transparent p-0 outline-hidden focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid"
           onClick={showPreviewOnlyAccessWarning}
         />
diff --git a/web/features/home/home-content/__tests__/home-content.spec.tsx b/web/features/home/home-content/__tests__/home-content.spec.tsx
index 339e530e0a0..c2b2e8ab421 100644
--- a/web/features/home/home-content/__tests__/home-content.spec.tsx
+++ b/web/features/home/home-content/__tests__/home-content.spec.tsx
@@ -770,7 +770,7 @@ describe('HomeContent', () => {
       renderHomeContent()
 
       const card = screen.getByRole('button', { name: /Preview Only App.*app\.types\.chatbot/ })
-      expect(card).toHaveAttribute('aria-disabled', 'true')
+      expect(card).not.toHaveAttribute('aria-disabled')
       expect(screen.queryByRole('link', { name: /Preview Only App/ })).not.toBeInTheDocument()
       expect(screen.getByText('Readonly Author')).toBeInTheDocument()