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

See #4421 for context Closes: #4701
dequelabs · Feb 11, 2025 · 60d11f2 · 60d11f2
1 parent 8a0faff
commit 60d11f2
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 16 deletions.
diff --git a/lib/checks/aria/valid-scrollable-semantics-evaluate.js b/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
 };
 
 /**

diff --git a/lib/standards/aria-roles.js b/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'],

diff --git a/test/checks/aria/has-widget-role.js b/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');

diff --git a/test/checks/aria/valid-scrollable-semantics.js b/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');

diff --git a/test/integration/full/target-size/too-many-rects.html b/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"
       >

diff --git a/test/integration/rules/focus-order-semantics/focus-order-semantics.html b/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

diff --git a/test/integration/rules/focus-order-semantics/focus-order-semantics.json b/test/integration/rules/focus-order-semantics/focus-order-semantics.json
@@ -16,7 +16,8 @@
     ["#pass12"],
     ["#pass13"],
     ["#pass14"],
-    ["#pass15"]
+    ["#pass15"],
+    ["#pass16"]
   ],
   "violations": [
     ["#violation1"],

diff --git a/test/integration/rules/target-size/target-size.html b/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

diff --git a/test/integration/rules/target-size/target-size.json b/test/integration/rules/target-size/target-size.json
@@ -27,6 +27,8 @@
     ["#pass13"],
     ["#pass14"],
     ["#pass15"],
+    ["#pass16"],
+    ["#pass17"],
     ["#pass-adjacent"],
     ["#pass-fixed"]
   ],