random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-24 14:36:54 +00:00
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)

Browse Source 
* [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]); return ko.observable(ReactTabKind[tabKind]);
}; };
const tabTitle = useObservable(tab?.tabTitle || getReactTabTitle());
useEffect(() => { useEffect(() => {
if (active && focusTab.current) { if (active && focusTab.current) {
focusTab.current.focus(); focusTab.current.focus();
@ -156,6 +158,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
onMouseLeave={() => setHovering(false)} onMouseLeave={() => setHovering(false)}
className={active ? "active tabList" : "tabList"} className={active ? "active tabList" : "tabList"}
style={active ? { fontWeight: "bolder" } : {}} style={active ? { fontWeight: "bolder" } : {}}
role="presentation"
> >
<span className="tabNavContentContainer"> <span className="tabNavContentContainer">
<div className="tab_Content"> <div className="tab_Content">
@ -197,10 +200,10 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
/> />
)} )}
</span> </span>
<span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span> <span className="tabNavText">{tabTitle}</span>
</span> </span>
<span className="tabIconSection"> <span className="tabIconSection">
<CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} /> <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} ariaLabel={tabTitle} />
</span> </span>
</div> </div>
</span> </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 = ({ const CloseButton = ({
tab, tab,
active, active,
hovering, hovering,
tabKind, tabKind,
ariaLabel,
}: { }: {
tab: Tab; tab: Tab;
active: boolean; active: boolean;
hovering: boolean; hovering: boolean;
tabKind?: ReactTabKind; tabKind?: ReactTabKind;
ariaLabel: string;
}) => ( }) => (
<span <span
style={{ display: hovering || active ? undefined : "none" }} style={{ display: hovering || active ? undefined : "none" }}
title="Close" title="Close"
role="button" role="button"
aria-label="Close Tab" aria-label={ariaLabel}
className="cancelButton" className="cancelButton"
onClick={(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => { onClick={(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
event.stopPropagation(); event.stopPropagation();
@ -231,10 +243,10 @@ const CloseButton = ({
// tabKind === ReactTabKind.QueryCopilot && useQueryCopilot.getState().resetQueryCopilotStates(); // tabKind === ReactTabKind.QueryCopilot && useQueryCopilot.getState().resetQueryCopilotStates();
}} }}
tabIndex={active ? 0 : undefined} 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"> <span className="tabIcon close-Icon">
<img src={errorIcon} title="Close" alt="Close" /> <img src={errorIcon} title="Close" alt="Close" role="none" />
</span> </span>
</span> </span>
); );