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>

images/imgarrowlefticon.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" ?>
 <!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">
-<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>

src/Common/TableEntity.tsx

@@ -137,15 +137,17 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <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>
         )}
         {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -185,35 +185,37 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       </Stack>
 
       <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>
 
       {isAutoscaleSelected && (

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -654,44 +654,45 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       <div
         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"
-          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>
     </Stack>
     <Stack

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
         </div>
         {node.children && (
           <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
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

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

src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx

@@ -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
               role="img"
+              aria-label="graph"
               version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -135,6 +136,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
           <g id="triangleRight">
             <svg
               role="img"
+              aria-label="graph"
               version="1.1"
               id="Layer_1"
               xmlns="http://www.w3.org/2000/svg"

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

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

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

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

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

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

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -274,32 +274,34 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
 
             <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>
 
             {this.state.createNewDatabase && (
@@ -802,35 +804,37 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </Stack>
 
               <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>
 
               {!this.isSynapseLinkEnabled() && (

src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -42,39 +42,43 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         horizontal={true}
         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
         className="panelGroupSpacing"
@@ -342,42 +346,46 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         horizontal={true}
         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
         className="panelGroupSpacing"

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -116,7 +116,14 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         <form className="connectExplorerFormContainer">
           <div className="splashScreenContainer">
             <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"
                   ? "Welcome to Azure Cosmos DB for PostgreSQL"
                   : "Welcome to Azure Cosmos DB"}