random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[accessibility-3100032]:[Programmatic Access - Azure Cosmos DB - Data Explorer]: Close button does not have discernible text under 'Data Explorer' pane. (#1872) 

* [accessibility-3100032]:[Programmatic Access - Azure Cosmos DB - Data Explorer]: Close button does not have discernible text under 'Data Explorer' pane.

* [accessibility-3100032]:[Programmatic Access - Azure Cosmos DB - Data Explorer]: Close button does not have discernible text under 'Data Explorer' pane.

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
This commit is contained in:
SATYA SB 2024-07-31 20:42:19 +05:30 committed by GitHub
parent 77c758714d
commit 2ef036ee94
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -145,6 +145,8 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
return ko.observable(ReactTabKind[tabKind]);
};
const tabTitle = useObservable(tab?.tabTitle || getReactTabTitle());
useEffect(() => {
if (active && focusTab.current) {
focusTab.current.focus();
@ -156,6 +158,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
onMouseLeave={() => setHovering(false)}
className={active ? "active tabList" : "tabList"}
style={active ? { fontWeight: "bolder" } : {}}
role="presentation"
>
<span className="tabNavContentContainer">
<div className="tab_Content">
@ -197,10 +200,10 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
/>
)}
</span>
<span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
<span className="tabNavText">{tabTitle}</span>
</span>
<span className="tabIconSection">
<CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
<CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} ariaLabel={tabTitle} />
</span>
</div>
</span>
@ -208,22 +211,31 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
);
}
const onKeyPressReactTabClose = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
if (e.key === "Enter" || e.code === "Space") {
useTabs.getState().closeReactTab(tabKind);
e.stopPropagation();
}
};
const CloseButton = ({
tab,
active,
hovering,
tabKind,
ariaLabel,
}: {
tab: Tab;
active: boolean;
hovering: boolean;
tabKind?: ReactTabKind;
ariaLabel: string;
}) => (
<span
style={{ display: hovering || active ? undefined : "none" }}
title="Close"
role="button"
aria-label="Close Tab"
aria-label={ariaLabel}
className="cancelButton"
onClick={(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
event.stopPropagation();
@ -231,10 +243,10 @@ const CloseButton = ({
// tabKind === ReactTabKind.QueryCopilot && useQueryCopilot.getState().resetQueryCopilotStates();
}}
tabIndex={active ? 0 : undefined}
onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
onKeyPress={({ nativeEvent: e }) => (tab ? tab.onKeyPressClose(undefined, e) : onKeyPressReactTabClose(e, tabKind))}
>
<span className="tabIcon close-Icon">
<img src={errorIcon} title="Close" alt="Close" />
<img src={errorIcon} title="Close" alt="Close" role="none" />
</span>
</span>
);