random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-24 22:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [3100036]: [Programmatic Access - Azure Cosmos DB - Data Explorer]: Close button is nested under 'Home' tab control under 'Data Explorer' pane.

* Fabric-Less updated.

* Added specific width for contentWrapper.

* less update.

* Fixed out-scope space issue

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB 2024-06-05 20:42:48 +05:30 committed by GitHub
parent b76d83d8e1
commit 52c2cfe419
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 109 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
less/Common/Constants.less
View File

@ -130,6 +130,7 @@
@ActiveTabWidth: 141px;
@TabsHeight: 30px;
@TabsWidth: 140px;
@ContentWrapper: 111px;
@StatusIconContainerSize: 18px;
@LoadingErrorIconSize: 14px;
@ErrorIconContainer: 16px;

8
less/documentDB.less
View File

@ -2671,7 +2671,7 @@ a:link {
width: @ActiveTabWidth;
}
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper> .tabNavText {
font-weight: bolder;
border-bottom: 2px solid rgba(0, 120, 212, 1);
}
@ -2707,6 +2707,9 @@ a:link {
width: @TabsWidth;
border-right: @ButtonBorderWidth solid @BaseMedium;
white-space: nowrap;
.contentWrapper {
.flex-display();
width: @ContentWrapper;
.statusIconContainer {
width: @StatusIconContainerSize;
@ -2765,9 +2768,10 @@ a:link {
white-space: nowrap;
flex-grow: 1;
}
}
.tabIconSection {
width: 30px;
width: 29px;
position: relative;
padding-top: 2px;

4
less/documentDBFabric.less
View File

@ -75,7 +75,7 @@ a:focus {
border-bottom: 2px solid @FabricAccentMedium;
}
.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.tabNavText {
.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
border-bottom: 0px none transparent;
}
@ -93,9 +93,11 @@ a:focus {
width: calc(@TabsWidth - (@SmallSpace * 2));
padding-bottom: @SmallSpace;
.contentWrapper {
.statusIconContainer {
margin-left: 0px;
}
}
.tabIconSection {
.cancelButton {

14
src/Explorer/Tabs/Tabs.tsx
View File

@ -153,6 +153,13 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
<li
onMouseOver={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
className={active ? "active tabList" : "tabList"}
style={active ? { fontWeight: "bolder" } : {}}
>
<span className="tabNavContentContainer">
<div className="tab_Content">
<span
className="contentWrapper"
onClick={() => {
if (tab) {
tab.onTabClick();
@ -167,8 +174,6 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
onKeyPressReactTab(e, tabKind);
}
}}
className={active ? "active tabList" : "tabList"}
style={active ? { fontWeight: "bolder" } : {}}
title={useObservable(tab?.tabPath || ko.observable(""))}
aria-selected={active}
aria-expanded={active}
@ -177,8 +182,6 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
role="tab"
ref={focusTab}
>
<span className="tabNavContentContainer">
<div className="tab_Content">
<span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
{useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
{isTabExecuting(tab, tabKind) && (
@ -194,6 +197,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
)}
</span>
<span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
</span>
<span className="tabIconSection">
<CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
</span>
@ -280,7 +284,7 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
}
const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
if (e.key === "Enter" || e.key === "Space") {
if (e.key === "Enter" || e.code === "Space") {
useTabs.getState().activateReactTab(tabKind);
e.stopPropagation();
}