Bug 1240907: Aria-label is not descriptive enough for 'More(...)' button present under 'SQL API' section. (#1748)

* screen reader name for the more button has been modified as suggested

* e2e test have been updated

* e2e tests updated

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -247,7 +247,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
           name="More"
           title="More"
           className="treeMenuEllipsis"
-          ariaLabel={menuItemLabel}
+          ariaLabel={`${menuItemLabel} options`}
           menuIconProps={{
             iconName: menuItemLabel,
             styles: { root: { fontSize: "18px", fontWeight: "bold" } },

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

@@ -172,7 +172,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
       onKeyPress={[Function]}
     >
       <CustomizedIconButton
-        ariaLabel="More"
+        ariaLabel="More options"
         className="treeMenuEllipsis"
         menuIconProps={
           Object {
@@ -397,7 +397,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
       onKeyPress={[Function]}
     >
       <CustomizedIconButton
-        ariaLabel="More"
+        ariaLabel="More options"
         className="treeMenuEllipsis"
         menuIconProps={
           Object {

test/cassandra/container.spec.ts

@@ -20,11 +20,11 @@ test("Cassandra keyspace and table CRUD", async () => {
   await explorer.fill('[aria-label="addCollection-table Id Create table"]', tableId);
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${keyspaceId}`);
-  await explorer.click(`[data-test="${tableId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${tableId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${keyspaceId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${keyspaceId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Keyspace")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', keyspaceId);

test/graph/container.spec.ts

@@ -21,11 +21,11 @@ test("Graph CRUD", async () => {
   await explorer.click(`.nodeItem >> text=${databaseId}`);
   await explorer.click(`.nodeItem >> text=${containerId}`);
   // Delete database and graph
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Graph")');
   await explorer.fill('text=* Confirm by typing the graph id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);

test/mongo/container.spec.ts

@@ -32,11 +32,11 @@ test("Mongo CRUD", async () => {
   await explorer.click('[aria-label="Delete index Button"]');
   await explorer.click('[data-test="Save"]');
   // Delete database and collection
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Collection")');
   await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);

test/mongo/container32.spec.ts

@@ -21,11 +21,11 @@ test("Mongo CRUD", async () => {
   explorer.click(`.nodeItem >> text=${databaseId}`);
   explorer.click(`.nodeItem >> text=${containerId}`);
   // Delete database and collection
-  explorer.click(`[data-test="${containerId}"] [aria-label="More"]`);
+  explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
   explorer.click('button[role="menuitem"]:has-text("Delete Collection")');
   await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);

test/sql/container.spec.ts

@@ -18,11 +18,11 @@ test("SQL CRUD", async () => {
   await explorer.fill('[aria-label="Partition key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${databaseId}`);
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Container")');
   await explorer.fill('text=* Confirm by typing the container id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More"]`);
+  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);

test/tables/container.spec.ts

@@ -17,7 +17,7 @@ test("Tables CRUD", async () => {
   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"]`);
+  await explorer.click(`[data-test="${tableId}"] [aria-label="More options"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
   await explorer.click('[aria-label="OK"]');