chrome-devtools-frontend 1.0.1027150 → 1.0.1027447

package/front_end/legacy_test_runner/axe_core_test_runner/axe_core_test_runner.js

@@ -133,7 +133,7 @@ const DEFAULT_CONFIG = {
     // ignored by the 'aria-valid-attr' rule.
     // This should be removed after axe-core is updated.
     // See: https://github.com/dequelabs/axe-core/issues/1457
-    {id: 'aria-valid-attr', options: ['aria-placeholder']}
+    {id: 'aria-valid-attr', options: ['aria-placeholder', 'aria-description']}
   ],
   runOnly: {type: 'tags', values: {include: ['wcag2a', 'best-practice'], exclude: ['experimental']}}
 };

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -229,6 +229,7 @@ const ATTRIBUTES = new Set<string>([
   'aria-activedescendant',
   'aria-atomic',
   'aria-autocomplete',
+  'aria-braillelabel',
   'aria-brailleroledescription',
   'aria-busy',
   'aria-checked',
@@ -239,6 +240,7 @@ const ATTRIBUTES = new Set<string>([
   'aria-controls',
   'aria-current',
   'aria-describedby',
+  'aria-description',
   'aria-details',
   'aria-disabled',
   'aria-dropeffect',

package/front_end/ui/legacy/ARIAUtils.ts

@@ -344,10 +344,6 @@ export function setAccessibleName(element: Element, name: string): void {
   element.setAttribute('aria-label', name);
 }
 
-// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const _descriptionMap = new WeakMap<Element, Element>();
-
 export function setDescription(element: Element, description: string): void {
   // Nodes in the accessibility tree are made up of a core
   // triplet of "name", "value", "description"
@@ -360,77 +356,7 @@ export function setDescription(element: Element, description: string): void {
   // to appear with the description when the element is hovered.
   // This is usually fine, except that DevTools has its own styled
   // tooltips which would interfere with the browser tooltips.
-  //
-  // In future, the aria-description attribute may be used once it
-  // is unflagged.
-  //
-  // aria-describedby requires that an extra element exist in DOM
-  // that this element can point to. Both elements also have to
-  // be in the same shadow root. This is not trivial to manage.
-  // The rest of DevTools shouldn't have to worry about this,
-  // so there is some unfortunate code below.
-
-  const oldDescription = _descriptionMap.get(element);
-  if (oldDescription) {
-    oldDescription.remove();
-  }
-  element.removeAttribute('data-aria-utils-animation-hack');
-
-  if (!description) {
-    _descriptionMap.delete(element);
-    element.removeAttribute('aria-describedby');
-    return;
-  }
-
-  // We make a hidden element that contains the decsription
-  // and will be pointed to by aria-describedby.
-  const descriptionElement = document.createElement('span');
-  descriptionElement.textContent = description;
-  descriptionElement.style.display = 'none';
-  ensureId(descriptionElement);
-  element.setAttribute('aria-describedby', descriptionElement.id);
-  _descriptionMap.set(element, descriptionElement);
-
-  // Now we have to actually put this description element
-  // somewhere in the DOM so that we can point to it.
-  // It would be nice to just put it in the body, but that
-  // wouldn't work if the main element is in a shadow root.
-  // So the cleanest approach is to add the description element
-  // as a child of the main element. But wait! Some HTML elements
-  // aren't supposed to have children. Blink won't search inside
-  // these elements, and won't find our description element.
-  const contentfulVoidTags = new Set<string>(['INPUT', 'IMG']);
-  if (!contentfulVoidTags.has(element.tagName)) {
-    element.appendChild(descriptionElement);
-    // If we made it here, someone setting .textContent
-    // or removeChildren on the element will blow away
-    // our description. At least we tried our best!
-    return;
-  }
-
-  // We have some special element, like an <input>, where putting the
-  // description element inside it doesn't work.
-  // Lets try the next best thing, and just put the description element
-  // next to it in the DOM.
-  const inserted = element.insertAdjacentElement('afterend', descriptionElement);
-  if (inserted) {
-    return;
-  }
-
-  // Uh oh, the insertion didn't work! That means we aren't currently in the DOM.
-  // How can we find out when the element enters the DOM?
-  // See inspectorCommon.css
-  element.setAttribute('data-aria-utils-animation-hack', 'sorry');
-  element.addEventListener('animationend', () => {
-    // Someone might have made a new description in the meantime.
-    if (_descriptionMap.get(element) !== descriptionElement) {
-      return;
-    }
-    element.removeAttribute('data-aria-utils-animation-hack');
-
-    // Try it again. This time we are in the DOM, so it *should* work.
-    element.insertAdjacentElement('afterend', descriptionElement);
-  }, {once: true});
+  element.setAttribute('aria-description', description);
 }
 
 export function setActiveDescendant(element: Element, activedescendant: Element|null): void {

package/front_end/ui/legacy/inspectorCommon.css

@@ -629,15 +629,6 @@ button.link:focus-visible {
   --override-link-focus-background-color: rgb(230 230 230 / 8%);
 }
 
-/* See ARIAUtils.js */
-[data-aria-utils-animation-hack] {
-  animation: ANIMATION-HACK 0s;
-}
-
-@keyframes ANIMATION-HACK {
-  /* empty keyframe to trigger the animation hack above */
-}
-
 @media (forced-colors: active) {
   .dimmed,
   .chrome-select:disabled {

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1027150"
+  "version": "1.0.1027447"
 }