diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx index 4e64f242..fd519dc9 100644 --- a/src/TabNavList/index.tsx +++ b/src/TabNavList/index.tsx @@ -611,8 +611,6 @@ const TabNavList = React.forwardRef((props, ref
{ @@ -635,6 +633,8 @@ const TabNavList = React.forwardRef((props, ref
{ expect(queryByRole('tab', { name: /Tab1/i })).toBeInTheDocument(); expect(queryByRole('tab', { name: /Tab3/i })).toBeInTheDocument(); }); + + it('should scope tablist role to the nav list so extra content is not owned by the tablist', () => { + const { container, getByRole } = render( + createTabs({ + tabBarExtraContent: { + left: , + right: , + }, + }), + ); + + const navList = getByRole('tablist'); + expect(navList).toHaveClass('rc-tabs-nav-list'); + expect(container.querySelector('.rc-tabs-nav')).not.toHaveAttribute('role'); + + // Extra content and operations buttons live outside the tablist element, + // so the tablist only owns tab nodes (axe: aria-required-children). + // Confirm both extra buttons rendered first, so the querySelector below + // cannot pass vacuously when extra content fails to mount. + getByRole('button', { name: 'Left Extra' }); + getByRole('button', { name: 'Right Extra' }); + expect(navList.querySelector('button')).toBeNull(); + }); });