Update tsconfig.strict.json

* 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

* Commit to my local branch

* role has been added to graphic tag

* Update TableEntity.tsx

* Update ThroughputInput.tsx

* Update ThroughputInput.test.tsx.snap

* Update TreeComponent.tsx

* Update TableEntity.tsx

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.tsx

* Update SplashScreen.tsx

* Update TreeComponent.test.tsx.snap

* Update TreeComponent.test.tsx.snap

src/Common/CollapsedResourceTree.tsx

@@ -36,7 +36,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
             id="collapseToggleLeftPaneButton"
             role="button"
             tabIndex={0}
-            aria-label="Expand Tree"
+            aria-label={getApiShortDisplayName() + `Expand tree`}
             onClick={toggleLeftPaneExpanded}
             onKeyPress={onKeyPressToggleLeftPaneExpanded}
             ref={focusButton}

src/Common/EntityValue.tsx

@@ -1,5 +1,6 @@
 import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
+import { attributeValueLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 
 export interface TableEntityProps {
   entityValueLabel?: string;
@@ -61,6 +62,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       placeholder={entityValuePlaceholder}
       value={typeof entityValue === "string" ? entityValue : ""}
       onChange={onEntityValueChange}
+      ariaLabel={attributeValueLabel}
     />
   );
 };

src/Common/ResourceTreeContainer.tsx

@@ -51,7 +51,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                 role="button"
                 data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
                 tabIndex={0}
-                aria-label="Refresh tree"
+                aria-label={getApiShortDisplayName() + `Refresh tree`}
                 title="Refresh tree"
               >
                 <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
@@ -63,7 +63,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                 onClick={toggleLeftPaneExpanded}
                 onKeyPress={onKeyPressToggleLeftPaneExpanded}
                 tabIndex={0}
-                aria-label="Collapse Tree"
+                aria-label={getApiShortDisplayName() + `Collapse Tree`}
                 title="Collapse Tree"
                 ref={focusButton}
               >

src/Common/TableEntity.tsx

@@ -12,6 +12,7 @@ import {
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
 import EditIcon from "../../images/Edit_entity.svg";
+import { attributeNameLabel, dataTypeLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 import { CassandraType, TableType } from "../Explorer/Tables/Constants";
 import { userContext } from "../UserContext";
 import { EntityValue } from "./EntityValue";
@@ -36,7 +37,7 @@ export interface TableEntityProps {
   onDeleteEntity?: () => void;
   onEditEntity?: () => void;
   onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void
   onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
   onSelectDate: (date: Date | null | undefined) => void;
   onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
@@ -113,6 +114,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           value={entityProperty}
           onChange={onEntityPropertyChange}
           required
+          ariaLabel={attributeNameLabel}
         />
         <Dropdown
           label={entityTypeLabel && entityTypeLabel}
@@ -122,6 +124,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           disabled={isPropertyTypeDisable}
           id="entityTypeId"
           styles={dropdownStyles}
+          ariaLabel={dataTypeLabel}
         />
         <EntityValue
           entityValueLabel={entityValueLabel}
@@ -142,7 +145,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
                 {...imageProps}
                 src={EditIcon}
                 alt="editEntity"
-                id="editEntity"
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -73,7 +73,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
       <img
         className="expandCollapseIcon"
         src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
-        alt="Hide"
+        alt={this.state.isExpanded ? `${this.props.title} hide` : `${this.props.title} expand`}
         tabIndex={0}
         role="button"
       />

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 import "./TabComponent.less";
 
 export interface TabContent {
@@ -18,15 +19,11 @@ interface TabComponentProps {
   onTabIndexChange: (newIndex: number) => void;
   hideHeader: boolean;
 }
-interface TabRefs {
-  [key: string]: HTMLElement;
-}
 
 /**
  * We assume there's at least one tab
  */
 export class TabComponent extends React.Component<TabComponentProps> {
-  private tabRefs: TabRefs = {};
   public constructor(props: TabComponentProps) {
     super(props);
 
@@ -36,41 +33,11 @@ export class TabComponent extends React.Component<TabComponentProps> {
       throw new Error(msg);
     }
   }
-  state = {
-    activeTabIndex: this.props.currentTabIndex,
-  };
 
   private setActiveTab(index: number): void {
     this.setState({ activeTabIndex: index });
     this.props.onTabIndexChange(index);
   }
-  private setIndex = (index: number) => {
-    const tab = this.tabRefs[index];
-    if (tab) {
-      tab.focus();
-      this.setState({ activeTabIndex: index });
-    }
-  };
-  private handlekeypress = (event: React.KeyboardEvent<HTMLSpanElement>): void => {
-    const { tabs, onTabIndexChange } = this.props;
-    const { activeTabIndex } = this.state;
-    const count = tabs.length;
-
-    const prevTab = () => {
-      this.setIndex((activeTabIndex - 1 + count) % count);
-      onTabIndexChange((activeTabIndex - 1 + count) % count);
-    };
-    const nextTab = () => {
-      this.setIndex((activeTabIndex + 1) % count);
-      onTabIndexChange((activeTabIndex + 1) % count);
-    };
-
-    if (event.key === "ArrowLeft") {
-      prevTab();
-    } else if (event.key === "ArrowRight") {
-      nextTab();
-    }
-  };
 
   private renderTabTitles(): JSX.Element[] {
     return this.props.tabs.map((tab: Tab, index: number) => {
@@ -80,32 +47,26 @@ export class TabComponent extends React.Component<TabComponentProps> {
 
       let className = "toggleSwitch";
       let ariaselected;
-      let tabindex;
       if (index === this.props.currentTabIndex) {
         className += " selectedToggle";
         ariaselected = true;
-        tabindex = 0;
       } else {
         className += " unselectedToggle";
         ariaselected = false;
-        tabindex = -1;
       }
 
       return (
         <div className="tab" key={index}>
-          <span
+          <AccessibleElement
+            as="span"
             className={className}
             role="tab"
-            onClick={() => this.setActiveTab(index)}
-            onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.handlekeypress(event)}
-            onFocus={() => this.setState({ activeTabIndex: index })}
+            onActivated={() => this.setActiveTab(index)}
             aria-label={`Select tab: ${tab.title}`}
             aria-selected={ariaselected}
-            tabIndex={tabindex}
-            ref={(element) => (this.tabRefs[index] = element)}
           >
             {tab.title}
-          </span>
+          </AccessibleElement>
         </div>
       );
     });

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -250,7 +250,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             step={AutoPilotUtils.autoPilotIncrementStep}
             min={AutoPilotUtils.autoPilotThroughput1K}
             value={throughput.toString()}
-            aria-label="Max request units per second"
+            ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
             required={true}
             errorMessage={throughputError}
           />

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

@@ -1640,7 +1640,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           </div>
         </Stack>
         <StyledTextFieldBase
-          aria-label="Max request units per second"
+          ariaLabel="Container max RU/s"
           errorMessage=""
           id="autoscaleRUValueField"
           key=".0:$.2"
@@ -1663,7 +1663,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           value="4000"
         >
           <TextFieldBase
-            aria-label="Max request units per second"
+            ariaLabel="Container max RU/s"
             deferredValidationTime={200}
             errorMessage=""
             id="autoscaleRUValueField"
@@ -1961,6 +1961,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 >
                   <input
                     aria-invalid={false}
+                    aria-label="Container max RU/s"
                     className="ms-TextField-field field-64"
                     id="autoscaleRUValueField"
                     min={1000}

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -729,6 +729,7 @@ export class D3ForceGraph implements GraphRenderer {
     var iconGroup = newNodes
       .append("g")
       .attr("class", "iconContainer")
+      .attr("role", "group")
       .attr("tabindex", 0)
       .attr("aria-label", (d: D3Node) => {
         return this.retrieveNodeCaption(d);

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -23,7 +23,9 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
             onClick={this.props.toggleExpandGraph}
             role="button"
             aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
+            aria-label={
+              this.props.isTabsContentExpanded ? "Collapse graph to minimized view" : "View graph in full screen"
+            }
           >
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx

@@ -107,11 +107,11 @@ describe("New Vertex Component", () => {
   it("should call onTypeChange method on type dropdown change", () => {
     const DOWN_ARROW = { keyCode: 40 };
     const onTypeChange = jest.fn();
-    const dropdown = screen.getByRole("listbox");
+    const dropdown = screen.getByRole("combobox");
     dropdown.onclick = onTypeChange();
     dropdown.onkeydown = onTypeChange();
 
-    fireEvent.keyDown(screen.getByRole("listbox"), DOWN_ARROW);
+    fireEvent.keyDown(screen.getByRole("combobox"), DOWN_ARROW);
     fireEvent.click(screen.getByText(/number/));
     expect(onTypeChange).toHaveBeenCalled();
   });

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -145,6 +145,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     type="text"
                     id="propertyKeyNewVertexPane"
                     componentRef={input}
+                    aria-required="true"
                     placeholder="Key"
                     autoComplete="off"
                     aria-label={`Enter value for propery ${index + 1}`}
@@ -152,6 +153,8 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                   />
                 </div>
+                <span className="mandatoryStar">*&nbsp;</span>
+
                 <div className="valueCol">
                   <TextField
                     className="edgeInput"
@@ -165,7 +168,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 </div>
                 <div>
                   <Dropdown
-                    role="listbox"
+                    role="combobox"
                     placeholder="Select an option"
                     defaultSelectedKey={data.values[0].type}
                     style={{ width: 100 }}

src/Explorer/Panes/PanelInfoErrorComponent.tsx

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

src/Explorer/Tabs/QueryTablesTab.html

@@ -134,6 +134,7 @@
             data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
             tabindex="0"
             role="button"
+            href=""
           >
             <span>Choose Columns... </span>
           </a>

src/Explorer/Tabs/Tabs.tsx

@@ -7,10 +7,10 @@ import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
+import { userContext } from "UserContext";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import { userContext } from "UserContext";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
@@ -102,22 +102,20 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
       ref={focusTab}
     >
       <span className="tabNavContentContainer">
-        <a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
-          <div className="tab_Content">
-            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
-              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-              {useObservable(tab?.isExecuting || ko.observable(false)) && (
-                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
-              )}
-            </span>
-            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
-            {tabKind !== ReactTabKind.Home && (
-              <span className="tabIconSection">
-                <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
-              </span>
+        <div className="tab_Content">
+          <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
+            {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+            {useObservable(tab?.isExecuting || ko.observable(false)) && (
+              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
             )}
-          </div>
-        </a>
+          </span>
+          <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
+          {tabKind !== ReactTabKind.Home && (
+            <span className="tabIconSection">
+              <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
+            </span>
+          )}
+        </div>
       </span>
     </li>
   );

tsconfig.strict.json

@@ -135,7 +135,6 @@
     "./src/quickstart.ts",
     "./src/setupTests.ts",
     "./src/userContext.test.ts",
-    "src/Common/EntityValue.tsx",
     "./src/Platform/Hosted/Components/SwitchAccount.tsx",
     "./src/Platform/Hosted/Components/SwitchSubscription.tsx"
   ],
@@ -163,4 +162,4 @@
     "src/Terminal/**/*",
     "src/Utils/arm/**/*"
   ]
-}
+}