tests

Author: straker

lib/commons/dom/is-in-text-block.js

@@ -2,6 +2,7 @@ import getComposedParent from './get-composed-parent';
 import sanitize from '../text/sanitize';
 import { getNodeFromTree, nodeLookup } from '../../core/utils';
 import getRoleType from '../aria/get-role-type';
+import isFocusable from './is-focusable';
 
 function walkDomNode(node, functor) {
   if (functor(node.actualNode) !== false) {
@@ -19,8 +20,7 @@ function isBlock(node) {
   return blockLike.includes(display) || display.substr(0, 6) === 'table-';
 }
 
-function isInlineBlockLike(node) {
-  const { vNode } = nodeLookup(node);
+function isInlineBlockLike(vNode) {
   const display = vNode.getComputedStylePropertyValue('display');
   return inlineBlockLike.includes(display);
 }
@@ -47,30 +47,41 @@ function getBlockParent(node) {
  * @return {Boolean}      [description]
  */
 function isInTextBlock(node, { noLengthCompare, permissive = false } = {}) {
-  if (isBlock(node)) {
+  const { vNode, domNode } = nodeLookup(node);
+
+  if (isBlock(domNode)) {
     // Ignore if the link is a block
     return false;
   }
 
   // Find all the text part of the parent block not in a link, and all the text in a link
-  const virtualParent = getBlockParent(node);
+  const virtualParent = getBlockParent(domNode);
 
   // if the element is a block-like element, look at the siblings of the node and if any
   // are inline or text nodes then return the desired permissive option value so the
   // caller determine what to do with them.
-  // widget parents and sibling elements should be ignored
   // @see https://github.com/dequelabs/axe-core/issues/4392
-  if (isInlineBlockLike(node) && getRoleType(virtualParent) !== 'widget') {
+  if (isInlineBlockLike(vNode)) {
+    // widget parents should be ignored
+    if (getRoleType(virtualParent) === 'widget' || isFocusable(virtualParent)) {
+      return false;
+    }
+
     for (const siblingVNode of virtualParent.children) {
       if (
         siblingVNode.actualNode === node ||
-        getRoleType(siblingVNode) === 'widget' ||
         // BR and HR elements break the line
         ['br', 'hr'].includes(siblingVNode.props.nodeName)
       ) {
         continue;
       }
 
+      // if there is a widget as a sibling we break out of the loop as we won't count two
+      // widgets as being inline
+      if (getRoleType(siblingVNode) === 'widget') {
+        break;
+      }
+
       if (siblingVNode.props.nodeType === window.Node.TEXT_NODE) {
         if (sanitize(siblingVNode.props.nodeValue)) {
           return permissive;
@@ -110,7 +121,7 @@ function isInTextBlock(node, { noLengthCompare, permissive = false } = {}) {
     }
 
     const nodeName = (currNode.nodeName || '').toUpperCase();
-    if (currNode === node) {
+    if (currNode === domNode) {
       inBrBlock = 1;
     }
     // BR and HR elements break the line

lib/rules/widget-not-inline-matches.js

@@ -14,7 +14,7 @@ const matchesFns = [
   (node, vNode) => isFocusable(vNode),
   // Skip nested widgets with tabindex=-1
   (node, vNode) => isInTabOrder(vNode) || !hasWidgetAncestorInTabOrder(vNode),
-  node => !isInTextBlock(node, { noLengthCompare: true, permissive: false })
+  node => !isInTextBlock(node, { noLengthCompare: true, permissive: true })
 ];
 
 function isWidgetType(vNode) {