jandres/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-02-24 18:05:11 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(web): harden document query-state and icon button a11y

Browse Source
This commit is contained in:
yyh
2026-02-15 17:41:06 +08:00
parent b0bae39696
commit 5bb4110f85
4 changed files with 69 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
View File

@@ -296,6 +296,16 @@ describe('DocumentDetail', () => {
expect(screen.queryByTestId('metadata')).not.toBeInTheDocument()
})
it('should expose aria semantics for metadata toggle button', () => {
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
const toggle = screen.getByTestId('document-detail-metadata-toggle')
expect(toggle).toHaveAttribute('aria-label')
expect(toggle).toHaveAttribute('aria-pressed', 'true')
fireEvent.click(toggle)
expect(toggle).toHaveAttribute('aria-pressed', 'false')
})
it('should pass correct props to Metadata', () => {
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
const metadata = screen.getByTestId('metadata')
@@ -311,6 +321,11 @@ describe('DocumentDetail', () => {
expect(mocks.push).toHaveBeenCalledWith('/datasets/ds-1/documents')
})
it('should expose aria label for back button', () => {
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
expect(screen.getByTestId('document-detail-back-button')).toHaveAttribute('aria-label')
})
it('should preserve query params when navigating back', () => {
mocks.state.searchParams = 'page=2&status=active'
render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)

19
web/app/components/datasets/documents/detail/index.tsx
View File

@@ -149,6 +149,11 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
return chunkMode === ChunkingMode.parentChild && parentMode === 'full-doc'
}, [documentDetail?.doc_form, parentMode])
const backButtonLabel = t('operation.back', { ns: 'common' })
const metadataToggleLabel = `${showMetadata
? t('operation.close', { ns: 'common' })
: t('operation.view', { ns: 'common' })} ${t('metadata.title', { ns: 'datasetDocuments' })}`
return (
<DocumentContext.Provider value={{
datasetId,
@@ -162,10 +167,15 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
<button
type="button"
data-testid="document-detail-back-button"
aria-label={backButtonLabel}
title={backButtonLabel}
onClick={backToPrev}
className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg"
>
<span className="i-ri-arrow-left-line h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary" />
<span
aria-hidden="true"
className="i-ri-arrow-left-line h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary"
/>
</button>
<DocumentTitle
datasetId={datasetId}
@@ -219,13 +229,16 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
<button
type="button"
data-testid="document-detail-metadata-toggle"
aria-label={metadataToggleLabel}
aria-pressed={showMetadata}
title={metadataToggleLabel}
className={style.layoutRightIcon}
onClick={() => setShowMetadata(!showMetadata)}
>
{
showMetadata
? <span className="i-ri-layout-left-2-line h-4 w-4 text-components-button-secondary-text" />
: <span className="i-ri-layout-right-2-line h-4 w-4 text-components-button-secondary-text" />
? <span aria-hidden="true" className="i-ri-layout-left-2-line h-4 w-4 text-components-button-secondary-text" />
: <span aria-hidden="true" className="i-ri-layout-right-2-line h-4 w-4 text-components-button-secondary-text" />
}
</button>
</div>

26
web/app/components/datasets/documents/hooks/__tests__/use-document-list-query-state.spec.tsx
View File

@@ -320,6 +320,32 @@ describe('useDocumentListQueryState', () => {
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('limit')).toBe('25')
})
it('should sanitize invalid page to default and omit page from URL', async () => {
const { result, onUrlUpdate } = renderWithAdapter()
act(() => {
result.current.updateQuery({ page: -1 })
})
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has('page')).toBe(false)
expect(result.current.query.page).toBe(1)
})
it('should sanitize invalid limit to default and omit limit from URL', async () => {
const { result, onUrlUpdate } = renderWithAdapter()
act(() => {
result.current.updateQuery({ limit: 999 })
})
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has('limit')).toBe(false)
expect(result.current.query.limit).toBe(10)
})
})
describe('resetQuery', () => {

12
web/app/components/datasets/documents/hooks/use-document-list-query-state.ts
View File

@@ -12,6 +12,14 @@ const sanitizeSortValue = (value?: string | null): SortType => {
return (ALLOWED_SORT_VALUES.includes(value as SortType) ? value : '-created_at') as SortType
}
const sanitizePageValue = (value: number): number => {
return Number.isInteger(value) && value > 0 ? value : 1
}
const sanitizeLimitValue = (value: number): number => {
return Number.isInteger(value) && value > 0 && value <= 100 ? value : 10
}
export type DocumentListQuery = {
page: number
limit: number
@@ -76,6 +84,10 @@ function useDocumentListQueryState() {
const updateQuery = useCallback((updates: Partial<DocumentListQuery>) => {
const patch = { ...updates }
if ('page' in patch && patch.page !== undefined)
patch.page = sanitizePageValue(patch.page)
if ('limit' in patch && patch.limit !== undefined)
patch.limit = sanitizeLimitValue(patch.limit)
if ('status' in patch)
patch.status = sanitizeStatusValue(patch.status)
if ('sort' in patch)