Merge branch 'master' into users/languye/improve-filter-view

less/Common/Constants.less

@@ -335,4 +335,11 @@
   width: 0;
   height: 0;
   border-color: @InfoPointerColor transparent;
+}
+/*********************************************************************************************************
+                           Screen Reader Only
+**********************************************************************************************************/
+.screenReaderOnly {
+  position: absolute;
+  left: -9999px;
 }

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -382,6 +382,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             )}
             {!this.state.createNewDatabase && (
               <Dropdown
+                ariaLabel="Choose an existing database"
                 styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
                 style={{ width: 300, fontSize: 12 }}
                 placeholder="Choose an existing database"
@@ -924,10 +925,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       }
                     />
                     <Text variant="small">
-                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> To ensure compatibility with
-                      older SDKs, the created container will use a legacy partitioning scheme that supports partition
-                      key values of size only up to 101 bytes. If this is enabled, you will not be able to use
-                      hierarchical partition keys.{" "}
+                      <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
+                      created container will use a legacy partitioning scheme that supports partition key values of size
+                      only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
                       <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
                         Learn more
                       </Link>

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

@@ -2140,6 +2140,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </DeleteCollectionConfirmationPane>
 `;

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

@@ -7073,6 +7073,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </ExecuteSprocParamsPane>
 `;

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, FunctionComponent, ReactNode } from "react";
 import { PanelFooterComponent } from "../PanelFooterComponent";
 import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "../PanelLoadingScreen";
+import { labelToLoadingItemName } from "Explorer/Tables/Constants";
 
 export interface RightPaneFormProps {
   formError: string;
@@ -27,6 +28,10 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     onSubmit();
+    const screenReaderStatusElement = document.getElementById("screenReaderStatus");
+    if (screenReaderStatusElement) {
+      screenReaderStatusElement.innerHTML = labelToLoadingItemName[submitButtonText] || "Loading";
+    }
   };
 
   return (
@@ -42,6 +47,7 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
           />
         )}
       </form>
+      <span role="status" className="screenReaderOnly" id="screenReaderStatus"></span>
       {isExecuting && <PanelLoadingScreen />}
     </>
   );

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

@@ -1782,5 +1782,10 @@ exports[`Right Pane Form should render Default properly 1`] = `
       </div>
     </PanelFooterComponent>
   </form>
+  <span
+    className="screenReaderOnly"
+    id="screenReaderStatus"
+    role="status"
+  />
 </RightPaneForm>
 `;

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

@@ -2449,6 +2449,11 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </StringInputPane>
 `;

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap

@@ -3019,6 +3019,11 @@ exports[`Table query select Panel should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </TableQuerySelectPanel>
 `;

src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap

@@ -2130,6 +2130,11 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </AddTableEntityPanel>
 `;

src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap

@@ -2136,6 +2136,11 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </EditTableEntityPanel>
 `;

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

@@ -466,7 +466,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             <Icon
               className="removeIcon"
               iconName="InfoSolid"
-              tabIndex={0}
             />
              To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.
              

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

@@ -2810,6 +2810,11 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </DeleteDatabaseConfirmationPanel>
 `;

src/Explorer/Tables/Constants.ts

@@ -225,3 +225,8 @@ export const InputType = {
   DateTime: "datetime-local",
   Number: "number",
 };
+
+export const labelToLoadingItemName: Record<string, string> = {
+  "Add Row": "Adding row to table",
+  "Add Entity": "Adding entity to table",
+};