[Accessibility-3100036]: Close button is nested under 'Home' tab control under 'Data Explorer' pane.

[satya07sb]

Preview this branch

In the previous implementation within the 'Tabs' section, we provided full clickable access, allowing users to click on tabs containing a close button.

In this update, we've enhanced the user experience by differentiating the 'Home' section and the close button section. We achieved this by enclosing the 'Home' section within its own wrap, while the close button remains separate. As a result, all Home tab controls now exclusively belong to the 'Home' section, providing a more streamlined navigation experience. Additionally, the close button maintains its distinct position, ensuring clarity and intuitive interaction for users.

[sevoku]

Unfortunately this breaks the design in Fabric:

Fabric specific style is here:

cosmos-explorer/less/documentDBFabric.less

Lines 69 to 118 in 77883e7

	.nav-tabs>li>.tabNavContentContainer>.tab_Content:hover {
	border-bottom: 2px solid #e0e0e0;
	}
	.nav-tabs>li.active>.tabNavContentContainer>.tab_Content,
	.nav-tabs>li.active>.tabNavContentContainer>.tab_Content:hover {
	border-bottom: 2px solid @FabricAccentMedium;
	}
	.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.tabNavText {
	border-bottom: 0px none transparent;
	}
	.tabNavContentContainer {
	padding: @SmallSpace 0px @SmallSpace 0px;
	&:hover {
	background-color: transparent;
	border-color: transparent;
	}
	.tab_Content {
	border-right: 0px none transparent;
	margin: 0px @SmallSpace 0px @SmallSpace;
	width: calc(@TabsWidth - (@SmallSpace * 2));
	padding-bottom: @SmallSpace;
	.statusIconContainer {
	margin-left: 0px;
	}
	.tabIconSection {
	.cancelButton {
	padding: 0px 0px 0px @SmallSpace;
	&:hover {
	background-color: transparent;
	}
	&:focus {
	background-color: transparent;
	}
	&:active {
	background-color: transparent;
	}
	}
	}
	}
	}

[sevoku]

This works, thanks!

[vchske]

This breaks being able to close at least one tab (Scale and Settings). Notice how far out the close button is:

Although you can't see the pointer I am hovering over where the close button should be here:

But because the close button was outside the tab, the tab to the right (Items) now covers the close button.

[vchske]

Change fixed the close button. Thanks!

One more thing, when using the tab key to navigate the tabs, when I tab to, say "....Items", I can hit the spacebar and the Items tab is now focused. But when I tab back to the "Home" tab and I hit the spacebar, the Home tab is not brought to focus, even though the text of tab, "Home" is underlined:

I'm not sure if this is problematic enough to hold this checkin but wanted to point it out.

[satya07sb]

Change fixed the close button. Thanks!

One more thing, when using the tab key to navigate the tabs, when I tab to, say "....Items", I can hit the spacebar and the Items tab is now focused. But when I tab back to the "Home" tab and I hit the spacebar, the Home tab is not brought to focus, even though the text of tab, "Home" is underlined: I'm not sure if this is problematic enough to hold this checkin but wanted to point it out.

You are correct, but this is an existing issue. The code change is not affecting this problem, and it is out of scope for this ticket. However, it will not take much effort to fix it, so let me address it as well.

[sevoku]

Retested with Fabric and everything looks fine.