mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2024-11-24 22:46:40 +00:00
info button in stats tab is made accessible with keyboard (#1503)
* 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:
parent
e48402ae1b
commit
492c42ccda
@ -2,15 +2,17 @@ import {
|
||||
DetailsList,
|
||||
DetailsListLayoutMode,
|
||||
IColumn,
|
||||
Icon,
|
||||
Link,
|
||||
Pivot,
|
||||
PivotItem,
|
||||
SelectionMode,
|
||||
Stack,
|
||||
Text,
|
||||
TooltipHost,
|
||||
} from "@fluentui/react";
|
||||
import { HttpHeaders, NormalizedEventKey } from "Common/Constants";
|
||||
import MongoUtility from "Common/MongoUtility";
|
||||
import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
|
||||
import { QueryMetrics } from "Contracts/DataModels";
|
||||
import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
|
||||
import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
|
||||
@ -51,11 +53,33 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
|
||||
|
||||
const onRender = (item: IDocument): JSX.Element => (
|
||||
<>
|
||||
<InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
|
||||
<Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
|
||||
</>
|
||||
);
|
||||
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",
|
||||
name: "METRIC",
|
||||
|
Loading…
Reference in New Issue
Block a user