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

configure and fixed eslint jsx-a11y issues

Browse Source
This commit is contained in:
sunilyadav840
2021-10-01 11:51:27 +05:30
parent fb9f97b43a
commit 27d129e689
21 changed files with 100 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

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

3
less/documentDB.less
View File

@@ -3079,3 +3079,6 @@ settings-pane {
background: white;
height: 100%;
}
.moreOption {
color: #337ab7;
}

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

@@ -66,9 +66,15 @@ export const Upload: FunctionComponent<UploadProps> = ({
onChange={onUpload}
role="button"
/>
<a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
<span
id="fileImportLinkNotebook"
role="button"
tabIndex={0}
onClick={onImportLinkClick}
onKeyPress={onImportLinkKeyPress}
>
<Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
</a>
</span>
</Stack>
</div>
);

2
src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
<Fragment>
<Stack
aria-expanded={true}
aria-name="Advanced"
aria-label="Advanced"
className="collapsibleSection"
horizontal={true}
onClick={[Function]}

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

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

4
src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
View File

@@ -654,12 +654,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
>
<input
aria-label="Autoscale mode"
aria-required={true}
checked={true}
className="throughputInputRadioBtn"
key=".0:$.0"
onChange={[Function]}
role="radio"
tabIndex={0}
type="radio"
/>
@@ -671,12 +669,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</span>
<input
aria-label="Manual mode"
aria-required={true}
checked={false}
className="throughputInputRadioBtn"
key=".0:$.2"
onChange={[Function]}
role="radio"
tabIndex={0}
type="radio"
/>

10
src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
View File

@@ -214,8 +214,14 @@ export class EditorNeighborsComponent extends React.Component<EditorNeighborsCom
/>
</td>
<td className="actionCol">
<span className="rightPaneTrashIcon rightPaneBtns">
<img src={DeleteIcon} alt="Delete" onClick={() => this.removeAddedEdgeToNeighbor(index)} />
<span
className="rightPaneTrashIcon rightPaneBtns"
role="button"
onKeyPress={() => this.removeAddedEdgeToNeighbor(index)}
onClick={() => this.removeAddedEdgeToNeighbor(index)}
tabIndex={0}
>
<img src={DeleteIcon} alt="Delete" />
</span>
</td>
</tr>

4
src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
View File

@@ -123,7 +123,7 @@ export class EditorNodePropertiesComponent extends React.Component<EditorNodePro
<select
className="typeSelect"
value={singleValue.type}
onChange={(e) => {
onBlur={(e) => {
singleValue.type = e.target.value as ViewModels.InputPropertyValueTypeString;
if (singleValue.type === "null") {
singleValue.value = undefined;
@@ -217,7 +217,7 @@ export class EditorNodePropertiesComponent extends React.Component<EditorNodePro
<select
className="typeSelect"
value={firstValue.type}
onChange={(e) => {
onBlur={(e) => {
firstValue.type = e.target.value as ViewModels.InputPropertyValueTypeString;
this.props.onUpdateProperties(this.props.editedProperties);
}}

6
src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap
View File

@@ -93,7 +93,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
<td>
<select
className="typeSelect"
onChange={[Function]}
onBlur={[Function]}
required={true}
value="string"
>
@@ -282,7 +282,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
<td>
<select
className="typeSelect"
onChange={[Function]}
onBlur={[Function]}
required={true}
value="string"
>
@@ -344,7 +344,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
<td>
<select
className="typeSelect"
onChange={[Function]}
onBlur={[Function]}
required={true}
value="string"
>

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 icon"
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 icon"
src=""
/>
Clear Notifications

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

@@ -33,7 +33,6 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
aria-label="Database id"
aria-required="true"
autoComplete="off"
autoFocus={true}
id="database-id"
onChange={[Function]}
pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"

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

@@ -41,7 +41,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
</Text>
<StyledTextFieldBase
ariaLabel="Confirm by typing the container id"
autoFocus={true}
id="confirmCollectionId"
onChange={[Function]}
styles={
@@ -55,7 +54,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<TextFieldBase
ariaLabel="Confirm by typing the container id"
autoFocus={true}
deferredValidationTime={200}
id="confirmCollectionId"
onChange={[Function]}
@@ -349,7 +347,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
<input
aria-invalid={false}
aria-label="Confirm by typing the container id"
autoFocus={true}
className="ms-TextField-field field-57"
id="confirmCollectionId"
onBlur={[Function]}

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

@@ -4328,6 +4328,9 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</TextFieldBase>
</StyledTextFieldBase>
<div
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<StyledImageBase
@@ -4335,8 +4338,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="addRemoveIconLabel"
height={30}
id="deleteparam"
onClick={[Function]}
role="button"
src=""
width={20}
>
@@ -4345,8 +4346,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="addRemoveIconLabel"
height={30}
id="deleteparam"
onClick={[Function]}
role="button"
src=""
styles={[Function]}
theme={
@@ -4638,10 +4637,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
id="deleteparam"
key="fabricImage"
onClick={[Function]}
onError={[Function]}
onLoad={[Function]}
role="button"
src=""
/>
</div>
@@ -4649,6 +4646,9 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</StyledImageBase>
</div>
<div
onClick={[Function]}
onKeyPress={[Function]}
role="button"
tabIndex={0}
>
<StyledImageBase
@@ -4656,8 +4656,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="addRemoveIconLabel"
height={30}
id="addparam"
onClick={[Function]}
role="button"
src=""
width={20}
>
@@ -4666,8 +4664,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="addRemoveIconLabel"
height={30}
id="addparam"
onClick={[Function]}
role="button"
src=""
styles={[Function]}
theme={
@@ -4959,10 +4955,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
id="addparam"
key="fabricImage"
onClick={[Function]}
onError={[Function]}
onLoad={[Function]}
role="button"
src=""
/>
</div>

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

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

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

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

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

@@ -56,7 +56,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]}
@@ -65,7 +64,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"
@@ -655,7 +653,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel2"
autoFocus={true}
className="ms-TextField-field field-56"
id="TextField0"
name="collectionIdConfirmation"

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

@@ -368,7 +368,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
</Text>
<StyledTextFieldBase
ariaLabel="Confirm by typing the database id"
autoFocus={true}
id="confirmDatabaseId"
onChange={[Function]}
styles={
@@ -381,7 +380,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
>
<TextFieldBase
ariaLabel="Confirm by typing the database id"
autoFocus={true}
deferredValidationTime={200}
id="confirmDatabaseId"
onChange={[Function]}
@@ -674,7 +672,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
<input
aria-invalid={false}
aria-label="Confirm by typing the database id"
autoFocus={true}
className="ms-TextField-field field-60"
id="confirmDatabaseId"
onBlur={[Function]}

25
src/Explorer/SplashScreen/SplashScreen.less
View File

@@ -108,7 +108,8 @@
}
.oneLineContent {
margin-top: 4px;
margin-top: 6px;
margin-left: 6px;
}
.twoLineContent {
@@ -133,18 +134,18 @@
.flex-display();
.flex-direction();
>.title {
color: @BaseDark;
padding: 0px;
font-size: 12px;
}
>.description {
color: @BaseDark;
}
.title {
color: @BaseDark;
padding: 0px;
font-size: 12px;
}
.description {
color: @BaseDark;
}
&:not(:hover):not(:focus) {
background-color: @BaseLow;
}
&:not(:hover):not(:focus) {
background-color: @BaseLow;
}
}
&.commonTasks {

49
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@@ -128,18 +128,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
<div className="title">Common Tasks</div>
<ul>
{commonTaskItems.map((item) => (
<li
className="focusable"
key={`${item.title}${item.description}`}
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="button"
>
<img src={item.iconSrc} alt="" />
<span className="oneLineContent" title={item.info}>
{item.title}
</span>
<li className="focusable" key={`${item.title}${item.description}`}>
<div
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="button"
>
<img src={item.iconSrc} alt="" />
<span className="oneLineContent" title={item.info}>
{item.title}
</span>
</div>
</li>
))}
</ul>
@@ -165,22 +165,23 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
<div className="title">Tips</div>
<ul>
{tipsItems.map((item) => (
<li
className="tipContainer focusable"
key={`${item.title}${item.description}`}
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="link"
>
<div className="title" title={item.info}>
{item.title}
<li className="tipContainer focusable" key={`${item.title}${item.description}`}>
<div
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="button"
className="tipsWrapper"
>
<div className="title" title={item.info}>
{item.title}
</div>
<div className="description">{item.description}</div>
</div>
<div className="description">{item.description}</div>
</li>
))}
<li>
<a role="link" href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
<a href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
{SplashScreen.seeMoreItemTitle}
</a>
</li>

21
src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
View File

@@ -966,10 +966,15 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
<>
<span className="queryResultDivider">|</span>
<span className="queryResultNextEnable">
<a onClick={this.onFetchNextPageClick.bind(this)}>
<span>Load more</span>
<div
onClick={this.onFetchNextPageClick.bind(this)}
role="button"
tabIndex={0}
onKeyPress={this.onFetchNextPageClick.bind(this)}
>
<span className="moreOption">Load more</span>
<img className="queryResultnextImg" src={QueryEditorNext} alt="Fetch next page" />
</a>
</div>
</span>
</>
)}
@@ -1015,7 +1020,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
</div>
{this.state.isQueryMetricsEnabled && (
<div className="downloadMetricsLinkContainer">
<a
<span
id="downloadMetricsLink"
role="button"
tabIndex={0}
@@ -1030,7 +1035,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
alt="download query metrics csv"
/>
<span>Per-partition query metrics (CSV)</span>
</a>
</span>
</div>
)}
</div>
@@ -1044,7 +1049,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
<div className="errorContent">
<span className="errorMessage">{this.state.error}</span>
<span className="errorDetailsLink">
<a
<span
onClick={() => this.onErrorDetailsClick()}
onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) =>
this.onErrorDetailsKeyPress(event)
@@ -1052,9 +1057,11 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
id="error-display"
tabIndex={0}
aria-label="Error details link"
role="button"
className="moreOption"
>
More details
</a>
</span>
</span>
</div>
</div>

7
src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
View File

@@ -579,13 +579,16 @@ export default class StoredProcedureTabComponent extends React.Component<
<div className="errorContent">
<span className="errorMessage">{this.state.error}</span>
<span className="errorDetailsLink">
<a
<span
role="button"
tabIndex={0}
className="moreOption"
aria-label="Error details link"
onClick={() => this.onErrorDetailsClick()}
onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) => this.onErrorDetailsKeyPress(event)}
>
More details
</a>
</span>
</span>
</div>
</div>