random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-22 10:21:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed eslint-jsx-a11 issue

Browse Source
This commit is contained in:
sunilyadav840
2021-05-11 18:02:04 +05:30
parent ff3ea402d7
commit aae4036e80
33 changed files with 139 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -34,6 +34,7 @@ module.exports = {
},
],
rules: {
"jsx-a11y/anchor-is-valid": 1,
"no-console": ["error", { allow: ["error", "warn", "dir"] }],
curly: "error",
"@typescript-eslint/switch-exhaustiveness-check": "error",

2
src/Common/EntityValue.tsx
View File

@@ -40,7 +40,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
<TextField
label={entityValueLabel && entityValueLabel}
id="entityTimeId"
autoFocus
type="time"
value={entityTimeValue}
onChange={onEntityTimeValueChange}
@@ -55,7 +54,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
label={entityValueLabel && entityValueLabel}
className="addEntityTextField"
id="entityValueId"
autoFocus
disabled={isEntityValueDisable}
type={entityValueType}
placeholder={entityValuePlaceholder}

1
src/Common/TableEntity.tsx
View File

@@ -96,7 +96,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
<TextField
label={entityPropertyLabel && entityPropertyLabel}
id="entityPropertyId"
autoFocus
disabled={isPropertyTypeDisable}
placeholder={entityPropertyPlaceHolder}
value={entityProperty}

4
src/Common/Upload/Upload.tsx
View File

@@ -47,7 +47,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
props.onUpload(event);
}
};
const title = label + " to upload";
return (
<div>
<span className="renewUploadItemsHeader">{label}</span>
@@ -67,7 +67,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
role="button"
/>
<a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
<Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
<Image className="fileImportImg" src={FolderIcon} alt={label} title={label} />
</a>
</Stack>
</div>

3
src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less
View File

@@ -32,6 +32,9 @@
.errorLink {
cursor: pointer;
}
.errorLinkColor {
color: @AccentMediumHigh;
}
}
.paneErrorIcon {

1
src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
View File

@@ -25,6 +25,7 @@ export class RadioSwitchComponent extends React.Component<RadioSwitchComponentPr
<div className="radioSwitchComponent">
{this.props.choices.map((choice: Choice) => (
<span
role="button"
tabIndex={0}
key={choice.key}
onClick={() => this.onSelect(choice)}

2
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
View File

@@ -122,7 +122,7 @@ export class IndexingPolicyComponent extends React.Component<
{isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
<MessageBar messageBarType={MessageBarType.warning}>{indexingPolicynUnsavedWarningMessage}</MessageBar>
)}
<div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
<div className="settingsV2IndexingPolicyEditor" role="button" tabIndex={0} ref={this.indexingPolicyDiv}></div>
</Stack>
);
}

1
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
View File

@@ -13,6 +13,7 @@ exports[`IndexingPolicyComponent renders 1`] = `
/>
<div
className="settingsV2IndexingPolicyEditor"
role="button"
tabIndex={0}
/>
</Stack>

2
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
View File

@@ -57,7 +57,6 @@ export class ThroughputInput extends React.Component<ThroughputInputProps, Throu
aria-label="Autoscale mode"
checked={this.state.isAutoscaleSelected}
type="radio"
role="radio"
tabIndex={0}
onChange={this.onAutoscaleRadioBtnChange.bind(this)}
/>
@@ -68,7 +67,6 @@ export class ThroughputInput extends React.Component<ThroughputInputProps, Throu
aria-label="Manual mode"
checked={!this.state.isAutoscaleSelected}
type="radio"
role="radio"
tabIndex={0}
onChange={this.onManualRadioBtnChange.bind(this)}
/>

3
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
View File

@@ -120,6 +120,7 @@ export class NotificationConsoleComponent extends React.Component<
onClick={() => this.expandCollapseConsole()}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
tabIndex={0}
role="button"
>
<div className="statusBar">
<span className="dataTypeIcons">
@@ -179,7 +180,7 @@ export class NotificationConsoleComponent extends React.Component<
onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.onClearNotificationsKeyPress(event)}
tabIndex={0}
>
<img src={ClearIcon} alt="clear notifications image" />
<img src={ClearIcon} alt="clear notifications" />
Clear Notifications
</span>
</div>

6
src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
View File

@@ -9,6 +9,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
id="notificationConsoleHeader"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
>
<div
@@ -150,7 +151,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
tabIndex={0}
>
<img
alt="clear notifications image"
alt="clear notifications"
src=""
/>
Clear Notifications
@@ -173,6 +174,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
id="notificationConsoleHeader"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
>
<div
@@ -316,7 +318,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
tabIndex={0}
>
<img
alt="clear notifications image"
alt="clear notifications"
src=""
/>
Clear Notifications

10
src/Explorer/Panes/AddCollectionPanel.tsx
View File

@@ -139,7 +139,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-checked={this.state.createNewDatabase}
name="databaseType"
type="radio"
role="radio"
id="databaseCreateNew"
tabIndex={0}
onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
@@ -153,7 +152,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-checked={!this.state.createNewDatabase}
name="databaseType"
type="radio"
role="radio"
tabIndex={0}
onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
/>
@@ -175,7 +173,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
size={40}
className="panelTextField"
aria-label="New database id"
autoFocus
value={this.state.newDatabaseId}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
this.setState({ newDatabaseId: event.target.value })
@@ -287,7 +284,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-label="Turn on indexing"
aria-checked={this.state.enableIndexing}
type="radio"
role="radio"
tabIndex={0}
onChange={this.onTurnOnIndexing.bind(this)}
/>
@@ -299,7 +295,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-label="Turn off indexing"
aria-checked={!this.state.enableIndexing}
type="radio"
role="radio"
tabIndex={0}
onChange={this.onTurnOffIndexing.bind(this)}
/>
@@ -342,7 +337,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-checked={!this.state.isSharded}
name="unsharded"
type="radio"
role="radio"
id="unshardedOption"
tabIndex={0}
onChange={this.onUnshardedRadioBtnChange.bind(this)}
@@ -356,7 +350,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-checked={this.state.isSharded}
name="sharded"
type="radio"
role="radio"
id="shardedOption"
tabIndex={0}
onChange={this.onShardedRadioBtnChange.bind(this)}
@@ -480,7 +473,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
: "Comma separated paths e.g. /firstName,/address/zipCode"
}
className="panelTextField"
autoFocus
value={uniqueKey}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
@@ -594,7 +586,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-checked={this.state.enableAnalyticalStore}
name="analyticalStore"
type="radio"
role="radio"
id="enableAnalyticalStoreBtn"
tabIndex={0}
onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
@@ -609,7 +600,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
aria-checked={!this.state.enableAnalyticalStore}
name="analyticalStore"
type="radio"
role="radio"
id="disableAnalyticalStoreBtn"
tabIndex={0}
onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}

1
src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
View File

@@ -120,7 +120,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
<Text variant="small">Confirm by typing the {collectionName.toLowerCase()} id</Text>
<TextField
id="confirmCollectionId"
autoFocus
value={inputCollectionName}
styles={{ fieldGroup: { width: 300 } }}
onChange={(event, newInput?: string) => {

18
src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

@@ -28,21 +28,27 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<div
onKeyDown={[Function]}
role="button"
tabIndex={-1}
>
<div
className="contextual-pane-out"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
<div
className="contextual-pane"
id="deleteCollectionpane"
onKeyDown={[Function]}
role="button"
style={
Object {
"height": NaN,
}
}
tabIndex={0}
>
<div
className="panelContentWrapper"
@@ -1161,14 +1167,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
className="formErrors"
title=""
/>
<a
className="errorLink"
<div
className="errorLink errorLinkColor"
hidden={true}
onClick={[Function]}
onKeyDown={[Function]}
role="link"
tabIndex={0}
>
More details
</a>
</div>
</span>
</div>
</div>
@@ -1198,7 +1206,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
</span>
</Text>
<StyledTextFieldBase
autoFocus={true}
id="confirmCollectionId"
onChange={[Function]}
styles={
@@ -1211,7 +1218,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<TextFieldBase
autoFocus={true}
deferredValidationTime={200}
id="confirmCollectionId"
onChange={[Function]}
@@ -1504,7 +1510,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-215"
id="confirmCollectionId"
onBlur={[Function]}
@@ -3664,6 +3669,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
hidden={true}
>
<img
alt="Loader img"
className="dataExplorerLoader"
src=""
/>

3
src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
View File

@@ -1,5 +1,5 @@
import { useBoolean } from "@fluentui/react-hooks";
import { Text, TextField } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import React, { FunctionComponent, useState } from "react";
import { Areas } from "../../Common/Constants";
import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
@@ -134,7 +134,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
<Text variant="small">Confirm by typing the database id</Text>
<TextField
id="confirmDatabaseId"
autoFocus
styles={{ fieldGroup: { width: 300 } }}
onChange={(event, newInput?: string) => {
setDatabaseInput(newInput);

1
src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx
View File

@@ -63,7 +63,6 @@ export const InputParameter: FunctionComponent<InputParameterProps> = ({
<TextField
label={inputLabel && inputLabel}
id="confirmCollectionId"
autoFocus
value={paramValue}
onChange={onParamValueChange}
/>

21
src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
View File

@@ -19,21 +19,27 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
<div
onKeyDown={[Function]}
role="button"
tabIndex={-1}
>
<div
className="contextual-pane-out"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
<div
className="contextual-pane"
id="executesprocparamspane"
onKeyDown={[Function]}
role="button"
style={
Object {
"height": NaN,
}
}
tabIndex={0}
>
<div
className="panelContentWrapper"
@@ -1152,14 +1158,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="formErrors"
title=""
/>
<a
className="errorLink"
<div
className="errorLink errorLinkColor"
hidden={true}
onClick={[Function]}
onKeyDown={[Function]}
role="link"
tabIndex={0}
>
More details
</a>
</div>
</span>
</div>
</div>
@@ -2709,14 +2717,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</DropdownBase>
</Dropdown>
<StyledTextFieldBase
autoFocus={true}
id="confirmCollectionId"
key=".0:$.1"
label="Value"
onChange={[Function]}
>
<TextFieldBase
autoFocus={true}
deferredValidationTime={200}
id="confirmCollectionId"
label="Value"
@@ -3302,7 +3308,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel6"
autoFocus={true}
className="ms-TextField-field field-85"
id="confirmCollectionId"
onBlur={[Function]}
@@ -4864,7 +4869,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</DropdownBase>
</Dropdown>
<StyledTextFieldBase
autoFocus={true}
id="confirmCollectionId"
key=".0:$.1"
label="Param"
@@ -4872,7 +4876,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
value=""
>
<TextFieldBase
autoFocus={true}
deferredValidationTime={200}
id="confirmCollectionId"
label="Param"
@@ -5459,7 +5462,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel10"
autoFocus={true}
className="ms-TextField-field field-85"
id="confirmCollectionId"
onBlur={[Function]}
@@ -8227,6 +8229,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
hidden={true}
>
<img
alt="Loader img"
className="dataExplorerLoader"
src=""
/>

26
src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx
View File

@@ -67,9 +67,16 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
<span className="formErrors" title={formError}>
{formError}
</span>
<a className="errorLink" role="link" hidden={!formErrorDetail} onClick={expandConsole}>
<div
className="errorLink errorLinkColor"
role="link"
hidden={!formErrorDetail}
onClick={expandConsole}
tabIndex={0}
onKeyDown={expandConsole}
>
More details
</a>
</div>
</span>
</div>
</div>
@@ -97,7 +104,7 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
const renderLoadingScreen = (): JSX.Element => {
return (
<div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!isExecuting}>
<img className="dataExplorerLoader" src={LoadingIndicatorIcon} />
<img className="dataExplorerLoader" src={LoadingIndicatorIcon} alt="Loader img" />
</div>
);
};
@@ -110,9 +117,16 @@ export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps>
};
return (
<div tabIndex={-1} onKeyDown={onKeyDown}>
<div className="contextual-pane-out" onClick={onClose}></div>
<div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
<div tabIndex={-1} onKeyDown={onKeyDown} role="button">
<div className="contextual-pane-out" onClick={onClose} role="button" tabIndex={0} onKeyDown={onClose}></div>
<div
className="contextual-pane"
id={id}
style={{ height: panelHeight }}
onKeyDown={onKeyDown}
role="button"
tabIndex={0}
>
<div className="panelContentWrapper">
{renderPanelHeader()}
{renderErrorSection()}

3
src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
View File

@@ -1,5 +1,5 @@
import { useBoolean } from "@fluentui/react-hooks";
import { IImageProps, Image, ImageFit, Stack, TextField } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import React, { FunctionComponent, useState } from "react";
import folderIcon from "../../../../images/folder_16x16.svg";
import { logError } from "../../../Common/Logger";
@@ -115,7 +115,6 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
id="confirmCollectionId"
label="Select a query document"
value={selectedFileName}
autoFocus
readOnly
styles={{ fieldGroup: { width: 300 } }}
/>

1
src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
View File

@@ -22,7 +22,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
horizontal={true}
>
<StyledTextFieldBase
autoFocus={true}
id="confirmCollectionId"
label="Select a query document"
readOnly={true}

1
src/Explorer/Panes/PanelComponent.less
View File

@@ -89,6 +89,7 @@
.paneErrorLink {
cursor: pointer;
font-size: @mediumFontSize;
color: @AccentMediumHigh;
}
}
}

10
src/Explorer/Panes/PanelInfoErrorComponent.tsx
View File

@@ -43,9 +43,15 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
)}
</Text>
{showErrorDetails && (
<a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
<div
className="paneErrorLink"
role="link"
onClick={openNotificationConsole}
tabIndex={0}
onKeyDown={openNotificationConsole}
>
More details
</a>
</div>
)}
</span>
</Stack>

2
src/Explorer/Panes/PanelLoadingScreen.tsx
View File

@@ -3,6 +3,6 @@ import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares
export const PanelLoadingScreen: React.FunctionComponent = () => (
<div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
<img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
<img className="dataExplorerLoader" src={LoadingIndicator_3Squares} alt="Loader" />
</div>
);

13
src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
View File

@@ -78,9 +78,16 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
};
return (
<div tabIndex={-1} onKeyDown={onKeyDown}>
<div className="contextual-pane-out" onClick={onClose}></div>
<div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
<div tabIndex={-1} onKeyDown={onKeyDown} role="button">
<div className="contextual-pane-out" onClick={onClose} role="button" tabIndex={0} onKeyDown={onClose}></div>
<div
className="contextual-pane"
id={id}
style={{ height: panelHeight }}
onKeyDown={onKeyDown}
role="button"
tabIndex={0}
>
<div className="panelContentWrapper">
{renderPanelHeader()}
<PanelInfoErrorComponent {...panelInfoErrorProps} />

6
src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
View File

@@ -15,21 +15,27 @@ exports[`Load Query Pane should render Default properly 1`] = `
>
<div
onKeyDown={[Function]}
role="button"
tabIndex={-1}
>
<div
className="contextual-pane-out"
onClick={[MockFunction]}
onKeyDown={[MockFunction]}
role="button"
tabIndex={0}
/>
<div
className="contextual-pane"
id="loadQueryPane"
onKeyDown={[Function]}
role="button"
style={
Object {
"height": NaN,
}
}
tabIndex={0}
>
<div
className="panelContentWrapper"

1
src/Explorer/Panes/StringInputPane/StringInputPane.tsx
View File

@@ -109,7 +109,6 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
label={inputLabel}
name="collectionIdConfirmation"
value={stringInput}
autoFocus
required
onChange={(event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) =>
setStringInput(newValue)

18
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

@@ -1294,21 +1294,27 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<div
onKeyDown={[Function]}
role="button"
tabIndex={-1}
>
<div
className="contextual-pane-out"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
<div
className="contextual-pane"
id="stringInputPane"
onKeyDown={[Function]}
role="button"
style={
Object {
"height": NaN,
}
}
tabIndex={0}
>
<div
className="panelContentWrapper"
@@ -2427,14 +2433,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
className="formErrors"
title=""
/>
<a
className="errorLink"
<div
className="errorLink errorLinkColor"
hidden={true}
onClick={[Function]}
onKeyDown={[Function]}
role="link"
tabIndex={0}
>
More details
</a>
</div>
</span>
</div>
</div>
@@ -2443,7 +2451,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<StyledTextFieldBase
aria-label="Enter new directory name"
autoFocus={true}
label="Enter new directory name"
name="collectionIdConfirmation"
onChange={[Function]}
@@ -2452,7 +2459,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<TextFieldBase
aria-label="Enter new directory name"
autoFocus={true}
deferredValidationTime={200}
label="Enter new directory name"
name="collectionIdConfirmation"
@@ -3042,7 +3048,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel5"
autoFocus={true}
className="ms-TextField-field field-165"
id="TextField3"
name="collectionIdConfirmation"
@@ -4853,6 +4858,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
hidden={true}
>
<img
alt="Loader img"
className="dataExplorerLoader"
src=""
/>

15
src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap
View File

@@ -23,21 +23,27 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
<div
onKeyDown={[Function]}
role="button"
tabIndex={-1}
>
<div
className="contextual-pane-out"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
<div
className="contextual-pane"
id="querySelectPane"
onKeyDown={[Function]}
role="button"
style={
Object {
"height": NaN,
}
}
tabIndex={0}
>
<div
className="panelContentWrapper"
@@ -1156,14 +1162,16 @@ exports[`Table query select Panel should render Default properly 1`] = `
className="formErrors"
title=""
/>
<a
className="errorLink"
<div
className="errorLink errorLinkColor"
hidden={true}
onClick={[Function]}
onKeyDown={[Function]}
role="link"
tabIndex={0}
>
More details
</a>
</div>
</span>
</div>
</div>
@@ -4194,6 +4202,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
hidden={true}
>
<img
alt="Loader img"
className="dataExplorerLoader"
src=""
/>

3
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
View File

@@ -1629,7 +1629,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
</span>
</Text>
<StyledTextFieldBase
autoFocus={true}
id="confirmDatabaseId"
onChange={[Function]}
styles={
@@ -1641,7 +1640,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
}
>
<TextFieldBase
autoFocus={true}
deferredValidationTime={200}
id="confirmDatabaseId"
onChange={[Function]}
@@ -1933,7 +1931,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-209"
id="confirmDatabaseId"
onBlur={[Function]}

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

@@ -42,6 +42,7 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
aria-controls={tab.tabId}
tabIndex={0}
role="tab"
onFocus={() => setHovering(true)}
>
<span className="tabNavContentContainer">
<a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}>

24
src/HostedExplorer.tsx
View File

@@ -1,24 +1,24 @@
import { useBoolean } from "@fluentui/react-hooks";
import { initializeIcons } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import * as React from "react";
import { render } from "react-dom";
import ChevronRight from "../images/chevron-right.svg";
import "../less/hostedexplorer.less";
import { AuthType } from "./AuthType";
import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
import { DatabaseAccount } from "./Contracts/DataModels";
import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
import "./Explorer/Menus/NavBar/MeControlComponent.less";
import { useTokenMetadata } from "./hooks/usePortalAccessToken";
import { MeControl } from "./Platform/Hosted/Components/MeControl";
import "./Platform/Hosted/ConnectScreen.less";
import "./Shared/appInsights";
import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
import { useAADAuth } from "./hooks/useAADAuth";
import { FeedbackCommandButton } from "./Platform/Hosted/Components/FeedbackCommandButton";
import { useTokenMetadata } from "./hooks/usePortalAccessToken";
import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
import { FeedbackCommandButton } from "./Platform/Hosted/Components/FeedbackCommandButton";
import { MeControl } from "./Platform/Hosted/Components/MeControl";
import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
import "./Platform/Hosted/ConnectScreen.less";
import { extractMasterKeyfromConnectionString } from "./Platform/Hosted/HostedUtils";
import "./Shared/appInsights";
initializeIcons();
@@ -86,8 +86,10 @@ const App: React.FunctionComponent = () => {
<span
className="title"
onClick={() => window.open("https://portal.azure.com", "_blank")}
tabIndex={0}
title="Go to Azure Portal"
onKeyDown={() => window.open("https://portal.azure.com", "_blank")}
role="button"
tabIndex={0}
>
Microsoft Azure
</span>

9
src/Main.tsx
View File

@@ -131,7 +131,12 @@ const App: React.FunctionComponent = () => {
aria-label="Refresh tree"
title="Refresh tree"
>
<img className="refreshcol" src={refreshImg} data-bind="attr: { alt: refreshTreeTitle }" />
<img
className="refreshcol"
src={refreshImg}
data-bind="attr: { alt: refreshTreeTitle }"
alt="Refresh"
/>
</span>
<span
className="padimgcolrefresh1"
@@ -169,9 +174,7 @@ const App: React.FunctionComponent = () => {
<li
className="resourceTreeCollapse"
id="collapseToggleLeftPaneButton"
role="button"
data-bind="event: { keypress: toggleLeftPaneExpandedKeyPress }"
tabIndex={0}
aria-label="Expand Tree"
>
<span

16
src/Platform/Hosted/Components/ConnectExplorer.tsx
View File

@@ -1,9 +1,9 @@
import * as React from "react";
import { useBoolean } from "@fluentui/react-hooks";
import { HttpHeaders } from "../../../Common/Constants";
import { GenerateTokenResponse } from "../../../Contracts/DataModels";
import { configContext } from "../../../ConfigContext";
import * as React from "react";
import { AuthType } from "../../../AuthType";
import { HttpHeaders } from "../../../Common/Constants";
import { configContext } from "../../../ConfigContext";
import { GenerateTokenResponse } from "../../../Contracts/DataModels";
import { isResourceTokenConnectionString } from "../Helpers/ResourceTokenUtils";
interface Props {
@@ -75,16 +75,16 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
<p className="connectExplorerContent">
<input className="filterbtnstyle" type="submit" value="Connect" />
</p>
<p className="switchConnectTypeText" onClick={login}>
<div className="switchConnectTypeText" onClick={login} onKeyDown={login} role="button" tabIndex={0}>
Sign In with Azure Account
</p>
</div>
</form>
) : (
<div id="connectWithAad">
<input className="filterbtnstyle" type="button" value="Sign In" onClick={login} />
<p className="switchConnectTypeText" onClick={showForm}>
<div className="switchConnectTypeText" onClick={showForm} onKeyDown={showForm} role="button" tabIndex={0}>
Connect to your account with connection string
</p>
</div>
</div>
)}
</div>