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>
2025-12-18 16:31:31 +00:00 · 2023-03-14 23:49:21 +05:30
parent a7a38807df
commit 72c3605dbe
13 changed files with 230 additions and 208 deletions
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -137,15 +137,17 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
        />
        {!isEntityValueDisable && (
          <TooltipHost content="Edit property" id="editTooltip">
-            <Image
-              {...imageProps}
-              src={EditIcon}
-              alt="editEntity"
-              id="editEntity"
-              onClick={onEditEntity}
-              tabIndex={0}
-              onKeyPress={handleKeyPress}
-            />
+            <div tabIndex={0}>
+              <Image
+                {...imageProps}
+                src={EditIcon}
+                alt="editEntity"
+                id="editEntity"
+                onClick={onEditEntity}
+                tabIndex={0}
+                onKeyPress={handleKeyPress}
+              />
+            </div>
          </TooltipHost>
        )}
        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -185,35 +185,37 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
      </Stack>

      <Stack horizontal verticalAlign="center">
-        <input
-          id="Autoscale-input"
-          className="throughputInputRadioBtn"
-          aria-label="Autoscale database throughput"
-          aria-required={true}
-          checked={isAutoscaleSelected}
-          type="radio"
-          role="radio"
-          tabIndex={0}
-          onChange={(e) => handleOnChangeMode(e, "Autoscale")}
-        />
-        <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
-          Autoscale
-        </label>
+        <div role="radiogroup">
+          <input
+            id="Autoscale-input"
+            className="throughputInputRadioBtn"
+            aria-label="Autoscale database throughput"
+            aria-required={true}
+            checked={isAutoscaleSelected}
+            type="radio"
+            role="radio"
+            tabIndex={0}
+            onChange={(e) => handleOnChangeMode(e, "Autoscale")}
+          />
+          <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
+            Autoscale
+          </label>

-        <input
-          id="Manual-input"
-          className="throughputInputRadioBtn"
-          aria-label="Manual database throughput"
-          checked={!isAutoscaleSelected}
-          type="radio"
-          aria-required={true}
-          role="radio"
-          tabIndex={0}
-          onChange={(e) => handleOnChangeMode(e, "Manual")}
-        />
-        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
-          Manual
-        </label>
+          <input
+            id="Manual-input"
+            className="throughputInputRadioBtn"
+            aria-label="Manual database throughput"
+            checked={!isAutoscaleSelected}
+            type="radio"
+            aria-required={true}
+            role="radio"
+            tabIndex={0}
+            onChange={(e) => handleOnChangeMode(e, "Manual")}
+          />
+          <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+            Manual
+          </label>
+        </div>
      </Stack>

      {isAutoscaleSelected && (
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/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
-          aria-label="Autoscale database throughput"
-          aria-required={true}
-          checked={true}
-          className="throughputInputRadioBtn"
-          id="Autoscale-input"
+        <div
          key=".0:$.0"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <label
-          className="throughputInputRadioBtnLabel"
-          htmlFor="Autoscale-input"
-          key=".0:$.1"
+          role="radiogroup"
        >
-          Autoscale
-        </label>
-        <input
-          aria-label="Manual database throughput"
-          aria-required={true}
-          checked={false}
-          className="throughputInputRadioBtn"
-          id="Manual-input"
-          key=".0:$.2"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <label
-          className="throughputInputRadioBtnLabel"
-          htmlFor="Manual-input"
-          key=".0:$.3"
-        >
-          Manual
-        </label>
+          <input
+            aria-label="Autoscale database throughput"
+            aria-required={true}
+            checked={true}
+            className="throughputInputRadioBtn"
+            id="Autoscale-input"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <label
+            className="throughputInputRadioBtnLabel"
+            htmlFor="Autoscale-input"
+          >
+            Autoscale
+          </label>
+          <input
+            aria-label="Manual database throughput"
+            aria-required={true}
+            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
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/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}`}
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
+++ b/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}
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+++ b/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"
--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/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} />
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/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
--- a/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
+++ b/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
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -274,32 +274,34 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
            </Stack>

            <Stack horizontal verticalAlign="center">
-              <input
-                className="panelRadioBtn"
-                checked={this.state.createNewDatabase}
-                aria-label="Create new database"
-                aria-checked={this.state.createNewDatabase}
-                name="databaseType"
-                type="radio"
-                role="radio"
-                id="databaseCreateNew"
-                tabIndex={0}
-                onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-              />
-              <span className="panelRadioBtnLabel">Create new</span>
+              <div role="radiogroup">
+                <input
+                  className="panelRadioBtn"
+                  checked={this.state.createNewDatabase}
+                  aria-label="Create new database"
+                  aria-checked={this.state.createNewDatabase}
+                  name="databaseType"
+                  type="radio"
+                  role="radio"
+                  id="databaseCreateNew"
+                  tabIndex={0}
+                  onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">Create new</span>

-              <input
-                className="panelRadioBtn"
-                checked={!this.state.createNewDatabase}
-                aria-label="Use existing database"
-                aria-checked={!this.state.createNewDatabase}
-                name="databaseType"
-                type="radio"
-                role="radio"
-                tabIndex={0}
-                onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-              />
-              <span className="panelRadioBtnLabel">Use existing</span>
+                <input
+                  className="panelRadioBtn"
+                  checked={!this.state.createNewDatabase}
+                  aria-label="Use existing database"
+                  aria-checked={!this.state.createNewDatabase}
+                  name="databaseType"
+                  type="radio"
+                  role="radio"
+                  tabIndex={0}
+                  onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
+                />
+                <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
-                  className="panelRadioBtn"
-                  checked={this.state.enableAnalyticalStore}
-                  disabled={!this.isSynapseLinkEnabled()}
-                  aria-label="Enable analytical store"
-                  aria-checked={this.state.enableAnalyticalStore}
-                  name="analyticalStore"
-                  type="radio"
-                  role="radio"
-                  id="enableAnalyticalStoreBtn"
-                  tabIndex={0}
-                  onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">On</span>
+                <div role="radiogroup">
+                  <input
+                    className="panelRadioBtn"
+                    checked={this.state.enableAnalyticalStore}
+                    disabled={!this.isSynapseLinkEnabled()}
+                    aria-label="Enable analytical store"
+                    aria-checked={this.state.enableAnalyticalStore}
+                    name="analyticalStore"
+                    type="radio"
+                    role="radio"
+                    id="enableAnalyticalStoreBtn"
+                    tabIndex={0}
+                    onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">On</span>

-                <input
-                  className="panelRadioBtn"
-                  checked={!this.state.enableAnalyticalStore}
-                  disabled={!this.isSynapseLinkEnabled()}
-                  aria-label="Disable analytical store"
-                  aria-checked={!this.state.enableAnalyticalStore}
-                  name="analyticalStore"
-                  type="radio"
-                  role="radio"
-                  id="disableAnalyticalStoreBtn"
-                  tabIndex={0}
-                  onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">Off</span>
+                  <input
+                    className="panelRadioBtn"
+                    checked={!this.state.enableAnalyticalStore}
+                    disabled={!this.isSynapseLinkEnabled()}
+                    aria-label="Disable analytical store"
+                    aria-checked={!this.state.enableAnalyticalStore}
+                    name="analyticalStore"
+                    type="radio"
+                    role="radio"
+                    id="disableAnalyticalStoreBtn"
+                    tabIndex={0}
+                    onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">Off</span>
+                </div>
              </Stack>

              {!this.isSynapseLinkEnabled() && (
--- a/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
@@ -42,39 +42,43 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        horizontal={true}
        verticalAlign="center"
      >
-        <input
-          aria-checked={true}
-          aria-label="Create new database"
-          checked={true}
-          className="panelRadioBtn"
-          id="databaseCreateNew"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
+        <div
+          role="radiogroup"
        >
-          Create new
-        </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>
+          <input
+            aria-checked={true}
+            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
+          </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
-          aria-checked={false}
-          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"
+        <div
+          role="radiogroup"
        >
-          On
-        </span>
-        <input
-          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>
+          <input
+            aria-checked={false}
+            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
+          </span>
+          <input
+            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"
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/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"}