fix(target-size): do not treat focusable tabpanels as targets (#4702)

See #4421 for context

Closes: #4701

Author: dbjorge

lib/checks/aria/valid-scrollable-semantics-evaluate.js

@@ -30,7 +30,8 @@ const VALID_ROLES_FOR_SCROLLABLE_REGIONS = {
   navigation: true,
   region: true,
   search: false,
-  status: true
+  status: true,
+  tabpanel: true
 };
 
 /**

lib/standards/aria-roles.js

@@ -781,7 +781,10 @@ const ariaRoles = {
     superclassRole: ['composite']
   },
   tabpanel: {
-    type: 'widget',
+    // Spec ambiguity: Aria 1.1 and 1.2 both say that tabpanel rolls up to
+    // structure via its section superclass, but also include it as a widget
+    // in §5.3.2 Widget Roles.
+    type: 'structure',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],

test/checks/aria/has-widget-role.js

@@ -172,15 +172,6 @@ describe('has-widget-role', function () {
     );
   });
 
-  it('should return true for role=tabpanel', function () {
-    node = document.createElement('div');
-    node.setAttribute('role', 'tabpanel');
-    fixture.appendChild(node);
-    assert.isTrue(
-      axe.testUtils.getCheckEvaluate('has-widget-role').call(checkContext, node)
-    );
-  });
-
   it('should return true for role=textbox', function () {
     node = document.createElement('div');
     node.setAttribute('role', 'textbox');
@@ -479,6 +470,15 @@ describe('has-widget-role', function () {
     );
   });
 
+  it('should return false for role=tabpanel', function () {
+    node = document.createElement('div');
+    node.setAttribute('role', 'tabpanel');
+    fixture.appendChild(node);
+    assert.isFalse(
+      axe.testUtils.getCheckEvaluate('has-widget-role').call(checkContext, node)
+    );
+  });
+
   it('should return false for role=term', function () {
     node = document.createElement('div');
     node.setAttribute('role', 'term');

test/checks/aria/valid-scrollable-semantics.js

@@ -186,6 +186,18 @@ describe('valid-scrollable-semantics', function () {
     );
   });
 
+  it('should return true for role=tabpanel', function () {
+    var node = document.createElement('div');
+    node.setAttribute('role', 'tabpanel');
+    fixture.appendChild(node);
+    flatTreeSetup(fixture);
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('valid-scrollable-semantics')
+        .call(checkContext, node)
+    );
+  });
+
   it('should return true for role=tooltip', function () {
     var node = document.createElement('div');
     node.setAttribute('role', 'tooltip');

test/integration/full/target-size/too-many-rects.html

@@ -24,7 +24,7 @@
     <section id="incomplete">
       <div
         id="incomplete-many-rects"
-        role="tabpanel"
+        role="button"
         tabindex="0"
         style="display: inline-block"
       >

test/integration/rules/focus-order-semantics/focus-order-semantics.html

@@ -36,11 +36,12 @@ <h4>Valid landmark roles for scrollable containers</h4>
       <div id="pass11" role="alert" tabindex="0"></div>
       <div id="pass12" role="log" tabindex="0"></div>
       <div id="pass13" role="status" tabindex="0"></div>
+      <div id="pass14" role="tabpanel" tabindex="0"></div>
     </div>
     <h4>Valid window roles for scrollable containers</h4>
     <div>
-      <div id="pass14" role="alertdialog" tabindex="0"></div>
-      <div id="pass15" role="dialog" tabindex="0"></div>
+      <div id="pass15" role="alertdialog" tabindex="0"></div>
+      <div id="pass16" role="dialog" tabindex="0"></div>
     </div>
     <h4>
       Valid scrollable HTML tags for scrollable regions, not selected by this

test/integration/rules/focus-order-semantics/focus-order-semantics.json

@@ -16,7 +16,8 @@
     ["#pass12"],
     ["#pass13"],
     ["#pass14"],
-    ["#pass15"]
+    ["#pass15"],
+    ["#pass16"]
   ],
   "violations": [
     ["#violation1"],

test/integration/rules/target-size/target-size.html

@@ -60,7 +60,12 @@
 
 <div>
   <button id="pass15">x</button>
-  <div role="timer" tabindex="0" id="ignore6">Timer</div>
+  <div role="tabpanel" tabindex="0" id="ignore6">Tabpanel</div>
+</div>
+
+<div>
+  <button id="pass16">x</button>
+  <div role="timer" tabindex="0" id="ignore7">Timer</div>
 </div>
 
 <!-- Nested controls-->
@@ -88,6 +93,11 @@
   </a>
 </p>
 
+<div role="tabpanel" tabindex="0">
+  Focusable tabpanel containing small control
+  <button id="pass17">x</button>
+</div>
+
 <!-- Failed examples -->
 <p>
   <button id="fail1">x</button

test/integration/rules/target-size/target-size.json

@@ -27,6 +27,8 @@
     ["#pass13"],
     ["#pass14"],
     ["#pass15"],
+    ["#pass16"],
+    ["#pass17"],
     ["#pass-adjacent"],
     ["#pass-fixed"]
   ],