opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 10:38:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): improve marketplace install dialog accessibility (#38798)

Browse Source
This commit is contained in:
yyh 2026-07-12 22:18:39 +08:00 committed by GitHub
parent 6e5ba18d65
commit 3defd50709
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/app/components/plugins/install-plugin/install-from-marketplace/__tests__/index.spec.tsx
View File

@ -198,6 +198,20 @@ describe('InstallFromMarketplace', () => {
expect(screen.getByText('plugin.installModal.installPlugin')).toBeInTheDocument()
})
it('should expose the current step title as the dialog name', () => {
render(<InstallFromMarketplace {...defaultProps} />)
expect(screen.getByRole('dialog', { name: 'plugin.installModal.installPlugin' })).toBeInTheDocument()
})
it('should initially focus the safe cancel action', async () => {
render(<InstallFromMarketplace {...defaultProps} />)
await waitFor(() => {
expect(screen.getByRole('button', { name: 'Cancel' })).toHaveFocus()
})
})
it('should render with bundle step when isBundle is true', () => {
const dependencies = createMockDependencies()
render(
@ -293,7 +307,7 @@ describe('InstallFromMarketplace', () => {
fireEvent.click(screen.getByTestId('install-fail-btn'))
await waitFor(() => {
expect(screen.getByText('plugin.installModal.installFailed')).toBeInTheDocument()
expect(screen.getByRole('dialog', { name: 'plugin.installModal.installFailed' })).toBeInTheDocument()
})
})
})

9
web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
View File

@ -2,7 +2,7 @@
import type { Dependency, Plugin, PluginCategoryEnum, PluginManifestInMarket } from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -84,12 +84,10 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
backdropProps={{ forceRender: true }}
className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex max-h-[calc(100dvh-48px)] min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}
>
<DialogCloseButton />
<div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
<div className="self-stretch title-2xl-semi-bold text-text-primary">
<DialogTitle className="self-stretch title-2xl-semi-bold text-text-primary">
{getTitle()}
</div>
</DialogTitle>
</div>
{
isBundle
@ -134,6 +132,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
</>
)
}
<DialogCloseButton />
</DialogContent>
</Dialog>
)