random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Sampath accessibility sev 2 (#1400) 

* autoscale and manual radiobuutton fixes

* alt text attribute for images

* Revert "alt text attribute for images"

This reverts commit 5a660551c6.

* alt text for decorative images

* sev2 accessibilitydefects in data explorer

* Revert "sev2 accessibilitydefects in data explorer"

This reverts commit b84d5b572c.

* Sev2 accessibilitydefects

* Revert "Sev2 accessibilitydefects"

This reverts commit a4e60f106c.

* accessibilitydefects-data explorer

* Remove extra white space

---------

Co-authored-by: Victor Meng <vimeng@microsoft.com>
This commit is contained in:
MokireddySampath 2023-03-14 23:49:21 +05:30 committed by GitHub
parent a7a38807df
commit 72c3605dbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 230 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
images/imgarrowlefticon.svg
View File

@ -1,5 +1,5 @@
<?xml version="1.0" ?> <?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path stroke="white" stroke-width="0.5" fill="#b5a3a3" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0 l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/> <path stroke="white" stroke-width="0.5" fill="#000" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0 l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 652 B

After

Width:  |  Height:  |  Size: 649 B

20
src/Common/TableEntity.tsx
View File

@ -137,15 +137,17 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
/> />
{!isEntityValueDisable && ( {!isEntityValueDisable && (
<TooltipHost content="Edit property" id="editTooltip"> <TooltipHost content="Edit property" id="editTooltip">
<Image <div tabIndex={0}>
{...imageProps} <Image
src={EditIcon} {...imageProps}
alt="editEntity" src={EditIcon}
id="editEntity" alt="editEntity"
onClick={onEditEntity} id="editEntity"
tabIndex={0} onClick={onEditEntity}
onKeyPress={handleKeyPress} tabIndex={0}
/> onKeyPress={handleKeyPress}
/>
</div>
</TooltipHost> </TooltipHost>
)} )}
{isDeleteOptionVisible && userContext.apiType !== "Cassandra" && ( {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (

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

@ -185,35 +185,37 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
</Stack> </Stack>
<Stack horizontal verticalAlign="center"> <Stack horizontal verticalAlign="center">
<input <div role="radiogroup">
id="Autoscale-input" <input
className="throughputInputRadioBtn" id="Autoscale-input"
aria-label="Autoscale database throughput" className="throughputInputRadioBtn"
aria-required={true} aria-label="Autoscale database throughput"
checked={isAutoscaleSelected} aria-required={true}
type="radio" checked={isAutoscaleSelected}
role="radio" type="radio"
tabIndex={0} role="radio"
onChange={(e) => handleOnChangeMode(e, "Autoscale")} tabIndex={0}
/> onChange={(e) => handleOnChangeMode(e, "Autoscale")}
<label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel"> />
Autoscale <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
</label> Autoscale
</label>
<input <input
id="Manual-input" id="Manual-input"
className="throughputInputRadioBtn" className="throughputInputRadioBtn"
aria-label="Manual database throughput" aria-label="Manual database throughput"
checked={!isAutoscaleSelected} checked={!isAutoscaleSelected}
type="radio" type="radio"
aria-required={true} aria-required={true}
role="radio" role="radio"
tabIndex={0} tabIndex={0}
onChange={(e) => handleOnChangeMode(e, "Manual")} onChange={(e) => handleOnChangeMode(e, "Manual")}
/> />
<label className="throughputInputRadioBtnLabel" htmlFor="Manual-input"> <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
Manual Manual
</label> </label>
</div>
</Stack> </Stack>
{isAutoscaleSelected && ( {isAutoscaleSelected && (

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

@ -654,44 +654,45 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<div <div
className="ms-Stack css-58" className="ms-Stack css-58"
> >
<input <div
aria-label="Autoscale database throughput"
aria-required={true}
checked={true}
className="throughputInputRadioBtn"
id="Autoscale-input"
key=".0:$.0" key=".0:$.0"
onChange={[Function]} role="radiogroup"
role="radio"
tabIndex={0}
type="radio"
/>
<label
className="throughputInputRadioBtnLabel"
htmlFor="Autoscale-input"
key=".0:$.1"
> >
Autoscale <input
</label> aria-label="Autoscale database throughput"
<input aria-required={true}
aria-label="Manual database throughput" checked={true}
aria-required={true} className="throughputInputRadioBtn"
checked={false} id="Autoscale-input"
className="throughputInputRadioBtn" onChange={[Function]}
id="Manual-input" role="radio"
key=".0:$.2" tabIndex={0}
onChange={[Function]} type="radio"
role="radio" />
tabIndex={0} <label
type="radio" className="throughputInputRadioBtnLabel"
/> htmlFor="Autoscale-input"
<label >
className="throughputInputRadioBtnLabel" Autoscale
htmlFor="Manual-input" </label>
key=".0:$.3" <input
> aria-label="Manual database throughput"
Manual aria-required={true}
</label> checked={false}
className="throughputInputRadioBtn"
id="Manual-input"
onChange={[Function]}
role="radio"
tabIndex={0}
type="radio"
/>
<label
className="throughputInputRadioBtnLabel"
htmlFor="Manual-input"
>
Manual
</label>
</div>
</div> </div>
</Stack> </Stack>
<Stack <Stack

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

@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
</div> </div>
{node.children && ( {node.children && (
<AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}> <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
<div className="nodeChildren" data-test={node.label}> <div className="nodeChildren" data-test={node.label} role="group">
{TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => ( {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
<TreeNodeComponent <TreeNodeComponent
key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`} key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}

5
src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
View File

@ -100,6 +100,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
<div <div
className="nodeChildren" className="nodeChildren"
data-test="label" data-test="label"
role="group"
> >
<TreeNodeComponent <TreeNodeComponent
generation={3} generation={3}
@ -251,6 +252,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
<div <div
className="nodeChildren" className="nodeChildren"
data-test="label" data-test="label"
role="group"
> >
<TreeNodeComponent <TreeNodeComponent
generation={13} generation={13}
@ -352,6 +354,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
<div <div
className="nodeChildren" className="nodeChildren"
data-test="label" data-test="label"
role="group"
/> />
</AnimateHeight> </AnimateHeight>
</div> </div>
@ -465,6 +468,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
<div <div
className="nodeChildren" className="nodeChildren"
data-test="label" data-test="label"
role="group"
> >
<TreeNodeComponent <TreeNodeComponent
generation={13} generation={13}
@ -594,6 +598,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
<div <div
className="nodeChildren" className="nodeChildren"
data-test="label" data-test="label"
role="group"
> >
<TreeNodeComponent <TreeNodeComponent
generation={3} generation={3}

2
src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
View File

@ -40,6 +40,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
{/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */} {/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */}
<svg <svg
role="img" role="img"
aria-label="graph"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
@ -135,6 +136,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
<g id="triangleRight"> <g id="triangleRight">
<svg <svg
role="img" role="img"
aria-label="graph"
version="1.1" version="1.1"
id="Layer_1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

6
src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
View File

@ -17,19 +17,19 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
<div className="middlePane"> <div className="middlePane">
<div className="graphTitle"> <div className="graphTitle">
<span className="paneTitle">Graph</span> <span className="paneTitle">Graph</span>
<span <button
style={{ border: "none", background: "none" }}
className="graphExpandCollapseBtn pull-right" className="graphExpandCollapseBtn pull-right"
onClick={this.props.toggleExpandGraph} onClick={this.props.toggleExpandGraph}
role="button" role="button"
aria-expanded={this.props.isTabsContentExpanded} aria-expanded={this.props.isTabsContentExpanded}
aria-name="View graph in full screen" aria-name="View graph in full screen"
tabIndex={0}
> >
<img <img
src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon} src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"} alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}
/> />
</span> </button>
</div> </div>
<div className="maingraphContainer"> <div className="maingraphContainer">
<GraphVizComponent forceGraphParams={this.props.graphVizProps.forceGraphParams} /> <GraphVizComponent forceGraphParams={this.props.graphVizProps.forceGraphParams} />

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

@ -147,12 +147,9 @@ export class NotificationConsoleComponent extends React.Component<
<div className="notificationConsoleControls"> <div className="notificationConsoleControls">
<Dropdown <Dropdown
label="Filter:" label="Filter:"
role="combobox"
selectedKey={this.state.selectedFilter} selectedKey={this.state.selectedFilter}
options={NotificationConsoleComponent.FilterOptions} options={NotificationConsoleComponent.FilterOptions}
onChange={this.onFilterSelected.bind(this)} onChange={this.onFilterSelected.bind(this)}
aria-labelledby="consoleFilterLabel"
aria-label={this.state.selectedFilter}
/> />
<span className="consoleSplitter" /> <span className="consoleSplitter" />
<span <span

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

@ -112,8 +112,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
className="notificationConsoleControls" className="notificationConsoleControls"
> >
<Dropdown <Dropdown
aria-label="All"
aria-labelledby="consoleFilterLabel"
label="Filter:" label="Filter:"
onChange={[Function]} onChange={[Function]}
options={ options={
@ -136,7 +134,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
}, },
] ]
} }
role="combobox"
selectedKey="All" selectedKey="All"
/> />
<span <span
@ -278,8 +275,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
className="notificationConsoleControls" className="notificationConsoleControls"
> >
<Dropdown <Dropdown
aria-label="All"
aria-labelledby="consoleFilterLabel"
label="Filter:" label="Filter:"
onChange={[Function]} onChange={[Function]}
options={ options={
@ -302,7 +297,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
}, },
] ]
} }
role="combobox"
selectedKey="All" selectedKey="All"
/> />
<span <span

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

@ -274,32 +274,34 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
</Stack> </Stack>
<Stack horizontal verticalAlign="center"> <Stack horizontal verticalAlign="center">
<input <div role="radiogroup">
className="panelRadioBtn" <input
checked={this.state.createNewDatabase} className="panelRadioBtn"
aria-label="Create new database" checked={this.state.createNewDatabase}
aria-checked={this.state.createNewDatabase} aria-label="Create new database"
name="databaseType" aria-checked={this.state.createNewDatabase}
type="radio" name="databaseType"
role="radio" type="radio"
id="databaseCreateNew" role="radio"
tabIndex={0} id="databaseCreateNew"
onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)} tabIndex={0}
/> onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
<span className="panelRadioBtnLabel">Create new</span> />
<span className="panelRadioBtnLabel">Create new</span>
<input <input
className="panelRadioBtn" className="panelRadioBtn"
checked={!this.state.createNewDatabase} checked={!this.state.createNewDatabase}
aria-label="Use existing database" aria-label="Use existing database"
aria-checked={!this.state.createNewDatabase} aria-checked={!this.state.createNewDatabase}
name="databaseType" name="databaseType"
type="radio" type="radio"
role="radio" role="radio"
tabIndex={0} tabIndex={0}
onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)} onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
/> />
<span className="panelRadioBtnLabel">Use existing</span> <span className="panelRadioBtnLabel">Use existing</span>
</div>
</Stack> </Stack>
{this.state.createNewDatabase && ( {this.state.createNewDatabase && (
@ -802,35 +804,37 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
</Stack> </Stack>
<Stack horizontal verticalAlign="center"> <Stack horizontal verticalAlign="center">
<input <div role="radiogroup">
className="panelRadioBtn" <input
checked={this.state.enableAnalyticalStore} className="panelRadioBtn"
disabled={!this.isSynapseLinkEnabled()} checked={this.state.enableAnalyticalStore}
aria-label="Enable analytical store" disabled={!this.isSynapseLinkEnabled()}
aria-checked={this.state.enableAnalyticalStore} aria-label="Enable analytical store"
name="analyticalStore" aria-checked={this.state.enableAnalyticalStore}
type="radio" name="analyticalStore"
role="radio" type="radio"
id="enableAnalyticalStoreBtn" role="radio"
tabIndex={0} id="enableAnalyticalStoreBtn"
onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)} tabIndex={0}
/> onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
<span className="panelRadioBtnLabel">On</span> />
<span className="panelRadioBtnLabel">On</span>
<input <input
className="panelRadioBtn" className="panelRadioBtn"
checked={!this.state.enableAnalyticalStore} checked={!this.state.enableAnalyticalStore}
disabled={!this.isSynapseLinkEnabled()} disabled={!this.isSynapseLinkEnabled()}
aria-label="Disable analytical store" aria-label="Disable analytical store"
aria-checked={!this.state.enableAnalyticalStore} aria-checked={!this.state.enableAnalyticalStore}
name="analyticalStore" name="analyticalStore"
type="radio" type="radio"
role="radio" role="radio"
id="disableAnalyticalStoreBtn" id="disableAnalyticalStoreBtn"
tabIndex={0} tabIndex={0}
onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)} onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
/> />
<span className="panelRadioBtnLabel">Off</span> <span className="panelRadioBtnLabel">Off</span>
</div>
</Stack> </Stack>
{!this.isSynapseLinkEnabled() && ( {!this.isSynapseLinkEnabled() && (

142
src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
View File

@ -42,39 +42,43 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
horizontal={true} horizontal={true}
verticalAlign="center" verticalAlign="center"
> >
<input <div
aria-checked={true} role="radiogroup"
aria-label="Create new database"
checked={true}
className="panelRadioBtn"
id="databaseCreateNew"
name="databaseType"
onChange={[Function]}
role="radio"
tabIndex={0}
type="radio"
/>
<span
className="panelRadioBtnLabel"
> >
Create new <input
</span> aria-checked={true}
<input aria-label="Create new database"
aria-checked={false} checked={true}
aria-label="Use existing database" className="panelRadioBtn"
checked={false} id="databaseCreateNew"
className="panelRadioBtn" name="databaseType"
name="databaseType" onChange={[Function]}
onChange={[Function]} role="radio"
role="radio" tabIndex={0}
tabIndex={0} type="radio"
type="radio" />
/> <span
<span className="panelRadioBtnLabel"
className="panelRadioBtnLabel" >
> Create new
Use existing </span>
</span> <input
aria-checked={false}
aria-label="Use existing database"
checked={false}
className="panelRadioBtn"
name="databaseType"
onChange={[Function]}
role="radio"
tabIndex={0}
type="radio"
/>
<span
className="panelRadioBtnLabel"
>
Use existing
</span>
</div>
</Stack> </Stack>
<Stack <Stack
className="panelGroupSpacing" className="panelGroupSpacing"
@ -342,42 +346,46 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
horizontal={true} horizontal={true}
verticalAlign="center" verticalAlign="center"
> >
<input <div
aria-checked={false} role="radiogroup"
aria-label="Enable analytical store"
checked={false}
className="panelRadioBtn"
disabled={true}
id="enableAnalyticalStoreBtn"
name="analyticalStore"
onChange={[Function]}
role="radio"
tabIndex={0}
type="radio"
/>
<span
className="panelRadioBtnLabel"
> >
On <input
</span> aria-checked={false}
<input aria-label="Enable analytical store"
aria-checked={true} checked={false}
aria-label="Disable analytical store" className="panelRadioBtn"
checked={true} disabled={true}
className="panelRadioBtn" id="enableAnalyticalStoreBtn"
disabled={true} name="analyticalStore"
id="disableAnalyticalStoreBtn" onChange={[Function]}
name="analyticalStore" role="radio"
onChange={[Function]} tabIndex={0}
role="radio" type="radio"
tabIndex={0} />
type="radio" <span
/> className="panelRadioBtnLabel"
<span >
className="panelRadioBtnLabel" On
> </span>
Off <input
</span> aria-checked={true}
aria-label="Disable analytical store"
checked={true}
className="panelRadioBtn"
disabled={true}
id="disableAnalyticalStoreBtn"
name="analyticalStore"
onChange={[Function]}
role="radio"
tabIndex={0}
type="radio"
/>
<span
className="panelRadioBtnLabel"
>
Off
</span>
</div>
</Stack> </Stack>
<Stack <Stack
className="panelGroupSpacing" className="panelGroupSpacing"

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

@ -116,7 +116,14 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
<form className="connectExplorerFormContainer"> <form className="connectExplorerFormContainer">
<div className="splashScreenContainer"> <div className="splashScreenContainer">
<div className="splashScreen"> <div className="splashScreen">
<div className="title"> <div
className="title"
aria-label={
userContext.apiType === "Postgres"
? "Welcome to Azure Cosmos DB for PostgreSQL"
: "Welcome to Azure Cosmos DB"
}
>
{userContext.apiType === "Postgres" {userContext.apiType === "Postgres"
? "Welcome to Azure Cosmos DB for PostgreSQL" ? "Welcome to Azure Cosmos DB for PostgreSQL"
: "Welcome to Azure Cosmos DB"} : "Welcome to Azure Cosmos DB"}