random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-12-01 09:57:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

info button in stats tab is made accessible with keyboard (#1503)

Browse Source 
* arialabel has been added to close button of invitational youtube video

* heading role has been addedd and tag has been changed to h1

* outline has been restored to choose columns link in entities page

* Update QuickstartCarousel.tsx

* Update SplashScreen.tsx

* Update TableEntity.tsx

* outline for edit entity has been added on focus

* keyboard accessibility added to rows in table entities

* learn more link under analytical store

* Column header is populated with text

* aria label has been changed for  the screen readers to read placeholder text along with label text

* Update queryBuilder.less

* Update TableEntity.tsx

* Update ThroughputInputAutoPilotV3Component.tsx

* Update ThroughputInputAutoPilotV3Component.tsx

* Update ThroughputInputAutoPilotV3Component.test.tsx.snap

* Update ThroughputInput.less

* Update PanelComponent.less

* Update DataTableBindingManager.ts

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.test.tsx.snap

* spec.ts files updated for the tests

* update to container.spec files

* info button in stats tab is made accessible with keyboard

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.test.tsx.snap

* Update container.spec.ts

* Update container.spec.ts

* Update container.spec.ts

* Update container32.spec.ts

* Update container.spec.ts

* Update container.spec.ts

* info icons are added as a column item and keyboard focus has been added to them

* Update QueryTabComponent.tsx
This commit is contained in:
MokireddySampath 2023-09-27 20:47:10 +05:30 committed by GitHub
parent e48402ae1b
commit 492c42ccda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
View File

@ -2,15 +2,17 @@ import {
DetailsList, DetailsList,
DetailsListLayoutMode, DetailsListLayoutMode,
IColumn, IColumn,
Icon,
Link,
Pivot, Pivot,
PivotItem, PivotItem,
SelectionMode, SelectionMode,
Stack, Stack,
Text, Text,
TooltipHost,
} from "@fluentui/react"; } from "@fluentui/react";
import { HttpHeaders, NormalizedEventKey } from "Common/Constants"; import { HttpHeaders, NormalizedEventKey } from "Common/Constants";
import MongoUtility from "Common/MongoUtility"; import MongoUtility from "Common/MongoUtility";
import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
import { QueryMetrics } from "Contracts/DataModels"; import { QueryMetrics } from "Contracts/DataModels";
import { EditorReact } from "Explorer/Controls/Editor/EditorReact"; import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent"; import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
@ -51,11 +53,33 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
const onRender = (item: IDocument): JSX.Element => ( const onRender = (item: IDocument): JSX.Element => (
<> <>
<InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
<Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text> <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
</> </>
); );
const columns: IColumn[] = [ const columns: IColumn[] = [
{
key: "column1",
name: "",
minWidth: 10,
maxWidth: 12,
data: String,
fieldName: "",
onRender: (item: IDocument) => {
if (item.toolTip !== "") {
return (
<>
<TooltipHost content={`${item.toolTip}`}>
<Link style={{ color: "#323130" }}>
<Icon iconName="Info" ariaLabel={`${item.toolTip}`} className="panelInfoIcon" tabIndex={0} />
</Link>
</TooltipHost>
</>
);
} else {
return undefined;
}
},
},
{ {
key: "column2", key: "column2",
name: "METRIC", name: "METRIC",