fix(access-name): get name from header elements (#4097)

* fix(dialog-name): get name from header elements

* Never get content from elements with a value

* Fix failing test

* Grrr, prettier

* More tests

* Update test/testutils.js

Author: WilcoFiers

lib/commons/text/form-control-value.js

@@ -13,7 +13,7 @@ import isHiddenForEveryone from '../dom/is-hidden-for-everyone';
 import { nodeLookup, querySelectorAll } from '../../core/utils';
 import log from '../../core/log';
 
-const controlValueRoles = [
+export const controlValueRoles = [
   'textbox',
   'progressbar',
   'scrollbar',

lib/commons/text/subtree-text.js

@@ -1,8 +1,10 @@
 import accessibleTextVirtual from './accessible-text-virtual';
 import namedFromContents from '../aria/named-from-contents';
 import getOwnedVirtual from '../aria/get-owned-virtual';
+import getRole from '../aria/get-role';
 import getElementsByContentType from '../standards/get-elements-by-content-type';
 import getElementSpec from '../standards/get-element-spec';
+import { controlValueRoles } from './form-control-value';
 
 /**
  * Get the accessible text for an element that can get its name from content
@@ -16,20 +18,23 @@ function subtreeText(virtualNode, context = {}) {
   const { alreadyProcessed } = accessibleTextVirtual;
   context.startNode = context.startNode || virtualNode;
   const { strict, inControlContext, inLabelledByContext } = context;
+  const role = getRole(virtualNode);
   const { contentTypes } = getElementSpec(virtualNode, {
     noMatchAccessibleName: true
   });
   if (
     alreadyProcessed(virtualNode, context) ||
     virtualNode.props.nodeType !== 1 ||
-    contentTypes?.includes('embedded') // canvas, video, etc
+    contentTypes?.includes('embedded') || // canvas, video, etc
+    controlValueRoles.includes(role)
   ) {
     return '';
   }
 
   if (
-    !namedFromContents(virtualNode, { strict }) &&
-    !context.subtreeDescendant
+    !context.subtreeDescendant &&
+    !context.inLabelledByContext &&
+    !namedFromContents(virtualNode, { strict })
   ) {
     return '';
   }
@@ -40,6 +45,7 @@ function subtreeText(virtualNode, context = {}) {
    * chosen to ignore this, but only for direct content, not for labels / aria-labelledby.
    * That way in `a[href] > article > #text` the text is used for the accessible name,
    * See: https://github.com/dequelabs/axe-core/issues/1461
+   * See: https://github.com/w3c/accname/issues/120
    */
   if (!strict) {
     const subtreeDescendant = !inControlContext && !inLabelledByContext;

lib/commons/text/unsupported.js

@@ -1,5 +1,7 @@
-const unsupported = {
-  accessibleNameFromFieldValue: ['combobox', 'listbox', 'progressbar']
+export default {
+  // Element's who's value is not consistently picked up in the accessible name
+  // Supported in Chrome 114, Firefox 115, but not Safari 16.5:
+  // <input aria-labelledby="lbl">
+  // <div id="lbl" role="progressbar" aria-valuenow="23"></div>
+  accessibleNameFromFieldValue: ['progressbar']
 };
-
-export default unsupported;