DevTools [Common - ARIAUtils]: making ARIAUtils.alert() element inacc…

…essible

Re-upload of https://chromium-review.googlesource.com/c/chromium/src/+/1817197 to the DevTools repository

Issue:
- offscreen alert element set up ARIAUtils.alert(...) is accessible via NVDA browser mode
  (this is due to setting the textContent to the alert message)

Changes:
- Create another offscreen element that is set as the description element to the alert element
- messages passed into alert(...) is then set as the accessible label for the description element

This is a proposed solution for retaining ARIAUtils.alert's functionality while making the actual element SR inaccessible.
Here is a description and justification of the change that is left via comments in the function:

  // This function is used to announce a message with the screen reader.
  // The elements used in this function are set offscreen via the _hideFromLayout call
  // Setting the aria-label to the message will prompt the SR to read the message
  // Setting the textContent would allow the SR to access the offscreen element via browse mode
  // Due to existing NVDA bugs (nvaccess/nvda#10140), setting the
  // aria-label of the alert element results in the message being read twice.
  // The current workaround is to set the aria-describedby of the alert element
  // to a description element where the aria-label is set to the message.

Bug: 1006368
Change-Id: If77a89d3ca33452cf5ad9add1c1f549be9ff2dac
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1871828
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Reviewed-by: Amanda Baker <ambake@microsoft.com>
Commit-Queue: Michael Liao <michael.liao@microsoft.com>

front_end/ui/ARIAUtils.js

@@ -559,24 +559,45 @@ export function setActiveDescendant(element, activedescendant) {
   element.setAttribute('aria-activedescendant', activedescendant.id);
 }
 
+/**
+ * @param {!Element} element
+ */
+function hideFromLayout(element) {
+  element.style.position = 'absolute';
+  element.style.left = '-999em';
+  element.style.width = '100em';
+  element.style.overflow = 'hidden';
+}
+
 const AlertElementSymbol = Symbol('AlertElementSybmol');
+const MessageElementSymbol = Symbol('MessageElementSymbol');
 
 /**
+ * This function is used to announce a message with the screen reader.
+ * Setting the textContent would allow the SR to access the offscreen element via browse mode
+ * Due to existing NVDA bugs (https://github.com/nvaccess/nvda/issues/10140), setting the
+ * aria-label of the alert element results in the message being read twice.
+ * The current workaround is to set the aria-describedby of the alert element
+ * to a description element where the aria-label is set to the message.
  * @param {string} message
  * @param {!Element} element
  */
 export function alert(message, element) {
   const document = element.ownerDocument;
+  const messageElementId = 'ariaLiveMessageElement';
+  if (!document[MessageElementSymbol]) {
+    const messageElement = document.body.createChild('div');
+    messageElement.id = messageElementId;
+    hideFromLayout(messageElement);
+    document[MessageElementSymbol] = messageElement;
+  }
   if (!document[AlertElementSymbol]) {
     const alertElement = document.body.createChild('div');
-    alertElement.style.position = 'absolute';
-    alertElement.style.left = '-999em';
-    alertElement.style.width = '100em';
-    alertElement.style.overflow = 'hidden';
+    hideFromLayout(alertElement);
     alertElement.setAttribute('role', 'alert');
     alertElement.setAttribute('aria-atomic', 'true');
+    alertElement.setAttribute('aria-describedby', messageElementId);
     document[AlertElementSymbol] = alertElement;
   }
-
-  document[AlertElementSymbol].textContent = message.trimEndWithMaxLength(10000);
+  setAccessibleName(document[MessageElementSymbol], message.trimEndWithMaxLength(10000));
 }