defect2262640 (#1476)

* arialabel has been added to close button of invitational youtube video

* heading role has been addedd and tag has been changed to h1

* outline has been restored to choose columns link in entities page

* Update QuickstartCarousel.tsx

* Update SplashScreen.tsx

* Update TableEntity.tsx

* outline for edit entity has been added on focus

* keyboard accessibility added to rows in table entities

* learn more link under analytical store

* Column header is populated with text

* aria label has been changed for  the screen readers to read placeholder text along with label text

* Update queryBuilder.less

* Update TableEntity.tsx

* Update ThroughputInputAutoPilotV3Component.tsx

* Update ThroughputInputAutoPilotV3Component.tsx

* Update ThroughputInputAutoPilotV3Component.test.tsx.snap

* Update ThroughputInput.less

* Update PanelComponent.less

* Update DataTableBindingManager.ts

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.test.tsx.snap

* spec.ts files updated for the tests

* update to container.spec files

* Update container.spec.ts

* Update container32.spec.ts

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.test.tsx.snap

* Update container.spec.ts

* Update container.spec.ts

* Update container32.spec.ts

* Update container.spec.ts

* Update container.spec.ts

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -319,7 +319,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   placeholder="Type a new database id"
                   size={40}
                   className="panelTextField"
-                  aria-label="New database id"
+                  aria-label="New database id, Type a new database id"
                   autoFocus
                   tabIndex={0}
                   value={this.state.newDatabaseId}
@@ -425,7 +425,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               placeholder={`e.g., ${getCollectionName()}1`}
               size={40}
               className="panelTextField"
-              aria-label={`${getCollectionName()} id`}
+              aria-label={`${getCollectionName()} id, Example ${getCollectionName()}1`}
               value={this.state.collectionId}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                 this.setState({ collectionId: event.target.value })

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

@@ -84,7 +84,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         className="panelGroupSpacing"
       >
         <input
-          aria-label="New database id"
+          aria-label="New database id, Type a new database id"
           aria-required={true}
           autoComplete="off"
           autoFocus={true}
@@ -178,7 +178,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         </StyledTooltipHostBase>
       </Stack>
       <input
-        aria-label="Container id"
+        aria-label="Container id, Example Container1"
         aria-required={true}
         autoComplete="off"
         className="panelTextField"

test/graph/container.spec.ts

@@ -14,8 +14,8 @@ test("Graph CRUD", async () => {
 
   // Create new database and graph
   await explorer.click('[data-test="New Graph"]');
-  await explorer.fill('[aria-label="New database id"]', databaseId);
-  await explorer.fill('[aria-label="Graph id"]', containerId);
+  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
+  await explorer.fill('[aria-label="Graph id, Example Graph1"]', containerId);
   await explorer.fill('[aria-label="Partition key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${databaseId}`);

test/mongo/container.spec.ts

@@ -14,8 +14,8 @@ test("Mongo CRUD", async () => {
 
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
-  await explorer.fill('[aria-label="New database id"]', databaseId);
-  await explorer.fill('[aria-label="Collection id"]', containerId);
+  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
+  await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
   await explorer.fill('[aria-label="Shard key"]', "pk");
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${databaseId}`);

test/mongo/container32.spec.ts

@@ -14,8 +14,8 @@ test("Mongo CRUD", async () => {
 
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
-  await explorer.fill('[aria-label="New database id"]', databaseId);
-  await explorer.fill('[aria-label="Collection id"]', containerId);
+  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
+  await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
   await explorer.fill('[aria-label="Shard key"]', "pk");
   await explorer.click("#sidePanelOkButton");
   explorer.click(`.nodeItem >> text=${databaseId}`);

test/sql/container.spec.ts

@@ -13,8 +13,8 @@ test("SQL CRUD", async () => {
   const explorer = await waitForExplorer();
 
   await explorer.click('[data-test="New Container"]');
-  await explorer.fill('[aria-label="New database id"]', databaseId);
-  await explorer.fill('[aria-label="Container id"]', containerId);
+  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
+  await explorer.fill('[aria-label="Container id, Example Container1"]', containerId);
   await explorer.fill('[aria-label="Partition key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${databaseId}`);

test/tables/container.spec.ts

@@ -14,7 +14,7 @@ test("Tables CRUD", async () => {
 
   await page.waitForSelector('text="Querying databases"', { state: "detached" });
   await explorer.click('[data-test="New Table"]');
-  await explorer.fill('[aria-label="Table id"]', tableId);
+  await explorer.fill('[aria-label="Table id, Example Table1"]', tableId);
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`[data-test="TablesDB"]`);
   await explorer.click(`[data-test="${tableId}"] [aria-label="More"]`);