fix: Replace nested button with span in folder filter

Fixed React hydration error caused by button nested inside button.

ISSUE:
- Console error: 'In HTML, <button> cannot be a descendant of <button>'
- Folder dropdown button contained a reset filter button inside it
- This is invalid HTML and causes hydration mismatch

SOLUTION:
- Changed inner button to span element
- Added cursor-pointer for visual feedback
- Added role="button" for accessibility
- Added tabIndex={0} for keyboard navigation
- Added onKeyDown handler for Enter/Space key support
- Maintains full functionality and accessibility

LOCATION:
- frontend/src/app/documents/page.tsx:255-267
- Folder filter reset button

The fix ensures proper HTML structure while preserving all interactive functionality and accessibility features.
This commit is contained in:
igor_nadein 2026-02-28 14:00:03 +03:00
parent 4025eb2b19
commit 5b040f663c

View File

@ -252,16 +252,25 @@ export default function DocumentsPage() {
{selectedFolder ? selectedFolder.name : "Все папки"}
</span>
{selectedFolderId && (
<button
<span
onClick={(e) => {
e.stopPropagation();
setSelectedFolderId(null);
}}
className="rounded p-0.5 hover:bg-sky-200"
className="rounded p-0.5 hover:bg-sky-200 cursor-pointer"
title="Сбросить фильтр"
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.stopPropagation();
setSelectedFolderId(null);
}
}}
>
<X size={14} />
</button>
</span>
)}
</button>
{showFolderDropdown && (