DevTools: Marking context menu submenu items as 'aria-haspopup = true'

Example of submenu:
https://imgur.com/fBFrvao

According to W3C, elements should be marked as 'aria-haspopup = true' if:
- it indicates the availability and type of interactive popup element
- the popup element appears as a block of content that is on top of other content

Context menu submenu items meet the criteria since the arrow indicates another context menu,
and the submenu context menu is the popup element.

Here is a W3C example of a similar construct that they mark as 'aria-haspopup = true':
https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html

Bug: 963183
Change-Id: I7cf82fb266847698555c7a81ecbd7f5b3827f26f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1725163
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697131}

third_party/blink/renderer/devtools/front_end/ui/ARIAUtils.js

@@ -120,6 +120,14 @@ UI.ARIAUtils.markAsMenuItem = function(element) {
   element.setAttribute('role', 'menuitem');
 };
 
+/**
+ * @param {!Element} element
+ */
+UI.ARIAUtils.markAsMenuItemSubMenu = function(element) {
+  UI.ARIAUtils.markAsMenuItem(element);
+  element.setAttribute('aria-haspopup', true);
+};
+
 /**
  * Must contain children whose role is option.
  * @param {!Element} element

third_party/blink/renderer/devtools/front_end/ui/SoftContextMenu.js

@@ -157,7 +157,7 @@ UI.SoftContextMenu = class {
     const menuItemElement = createElementWithClass('div', 'soft-context-menu-item');
     menuItemElement._subItems = item.subItems;
     menuItemElement.tabIndex = -1;
-    UI.ARIAUtils.markAsMenuItem(menuItemElement);
+    UI.ARIAUtils.markAsMenuItemSubMenu(menuItemElement);
 
     // Occupy the same space on the left in all items.
     const checkMarkElement = UI.Icon.create('smallicon-checkmark', 'soft-context-menu-item-checkmark');