Playwright audit and browser console confirm invalid HTML: the close button inside each file tab is rendered as <button> inside <button>, which is forbidden in the HTML spec and triggers a React hydration error on every load.
Console error:
In HTML, <button> cannot be a descendant of <button>.
This will cause a hydration error.
Location: FileTabs component — the tab element is a <button> and the close (×) icon inside it is also a <button>.
Fix: Change the outer tab element to a <div> with role="tab" and appropriate keyboard handling, keeping the inner close <button>. Or change the close icon to a <span> with an onClick.
Playwright test: 07 - button nesting HTML bug — currently failing.
Playwright audit and browser console confirm invalid HTML: the close button inside each file tab is rendered as
<button>inside<button>, which is forbidden in the HTML spec and triggers a React hydration error on every load.Console error:
Location:
FileTabscomponent — the tab element is a<button>and the close (×) icon inside it is also a<button>.Fix: Change the outer tab element to a
<div>withrole="tab"and appropriate keyboard handling, keeping the inner close<button>. Or change the close icon to a<span>with anonClick.Playwright test:
07 - button nesting HTML bug— currently failing.