fix(aria-valid-attr-value): allow empty value on aria-braille* & aria…

…-valuetext (#4109) * fix(aria-valid-attr-value): allow empty value on aria-braille* & aria-valuetext * Fix test * Fix tests
dequelabs · Aug 1, 2023 · c4c3e65 · c4c3e65
1 parent 758b069
commit c4c3e65
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 26 deletions.
diff --git a/lib/standards/aria-attrs.js b/lib/standards/aria-attrs.js
@@ -14,10 +14,12 @@ const ariaAttrs = {
   },
   'aria-braillelabel': {
     type: 'string',
+    allowEmpty: true,
     global: true
   },
   'aria-brailleroledescription': {
     type: 'string',
+    allowEmpty: true,
     global: true
   },
   'aria-busy': {
@@ -214,7 +216,8 @@ const ariaAttrs = {
     type: 'decimal'
   },
   'aria-valuetext': {
-    type: 'string'
+    type: 'string',
+    allowEmpty: true
   }
 };
 

diff --git a/test/checks/aria/valid-attr-value.js b/test/checks/aria/valid-attr-value.js
@@ -222,6 +222,10 @@ describe('aria-valid-attr-value', function () {
   });
 
   describe('null values', function () {
+    afterEach(() => {
+      axe.reset();
+    });
+
     it('returns undefined when a boolean attribute is null', function () {
       var vNode = queryFixture(
         '<div id="target" role="checkbox" aria-checked></div>'
@@ -249,6 +253,15 @@ describe('aria-valid-attr-value', function () {
     });
 
     it('returns false for empty string values that are not allowed to be empty', function () {
+      axe.configure({
+        standards: {
+          ariaAttrs: {
+            'aria-valuetext': {
+              allowEmpty: false
+            }
+          }
+        }
+      });
       var vNode = queryFixture(
         '<div id="target" aria-valuetext="" role="range"></div>'
       );

diff --git a/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html b/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html
@@ -39,57 +39,56 @@ <h2>Violations</h2>
     hi
   </div>
   <div id="violation35-ref"></div>
-  <div aria-valuetext="" id="violation36"></div>
   <!-- don't allow empty aria-valuetext -->
 
-  <div aria-level="0" id="violation37">hi</div>
-  <div aria-level="-1" id="violation38">hi</div>
-  <div aria-level="-22" id="violation39">hi</div>
+  <div aria-level="0" id="violation36">hi</div>
+  <div aria-level="-1" id="violation37">hi</div>
+  <div aria-level="-22" id="violation38">hi</div>
 
-  <div aria-posinset="0" id="violation40">hi</div>
-  <div aria-posinset="-1" id="violation41">hi</div>
-  <div aria-posinset="-22" id="violation42">hi</div>
+  <div aria-posinset="0" id="violation39">hi</div>
+  <div aria-posinset="-1" id="violation40">hi</div>
+  <div aria-posinset="-22" id="violation41">hi</div>
 
-  <div aria-setsize="-22" id="violation43">hi</div>
+  <div aria-setsize="-22" id="violation42">hi</div>
 
   <div>
     <input
       type="text"
-      id="violation44"
+      id="violation43"
       aria-invalid="true"
-      aria-errormessage="violation44-ref"
+      aria-errormessage="violation43-ref"
     />
-    <div id="violation44-ref" hidden>Error message 1</div>
+    <div id="violation43-ref" hidden>Error message 1</div>
   </div>
 
   <div>
     <input
       type="text"
-      id="violation45"
+      id="violation44"
       aria-invalid="true"
-      aria-errormessage="violation45-ref"
+      aria-errormessage="violation44-ref"
     />
-    <div id="violation45-ref" style="display: none">Error message 1</div>
+    <div id="violation44-ref" style="display: none">Error message 1</div>
   </div>
 
   <div>
     <input
       type="text"
-      id="violation46"
+      id="violation45"
       aria-invalid="true"
-      aria-errormessage="violation46-ref"
+      aria-errormessage="violation45-ref"
     />
-    <div id="violation46-ref" style="visibility: hidden">Error message 1</div>
+    <div id="violation45-ref" style="visibility: hidden">Error message 1</div>
   </div>
 
   <div>
     <input
       type="text"
-      id="violation47"
+      id="violation46"
       aria-invalid="true"
-      aria-errormessage="violation47-ref"
+      aria-errormessage="violation46-ref"
     />
-    <div id="violation47-ref" aria-hidden="true">Error message 1</div>
+    <div id="violation46-ref" aria-hidden="true">Error message 1</div>
   </div>
 </div>
 <h2>Possible False Positives</h2>
@@ -343,6 +342,12 @@ <h2>Possible False Positives</h2>
       aria-errormessage="violation44-ref"
     />
   </div>
+  <div
+    id="pass191"
+    aria-braillelabel=""
+    aria-brailleroledescription=""
+    aria-valuetext=""
+  ></div>
 
   <div id="ref">Hi</div>
   <div id="ref2">Hi2</div>

diff --git a/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json b/test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json
@@ -44,8 +44,7 @@
     ["#violation43"],
     ["#violation44"],
     ["#violation45"],
-    ["#violation46"],
-    ["#violation47"]
+    ["#violation46"]
   ],
   "passes": [
     ["#pass1"],
@@ -226,7 +225,8 @@
     ["#pass187"],
     ["#pass188"],
     ["#pass189"],
-    ["#pass190"]
+    ["#pass190"],
+    ["#pass191"]
   ],
   "incomplete": [
     ["#incomplete1"],

diff --git a/test/integration/virtual-rules/aria-valid-attr-value.js b/test/integration/virtual-rules/aria-valid-attr-value.js
@@ -23,7 +23,6 @@ describe('aria-valid-attr-value virtual-rule', function () {
       attributes: {
         role: 'slider',
         'aria-valuemin': true,
-        'aria-valuetext': '',
         'aria-expanded': 'grid',
         'aria-haspopup': 'Range',
         'aria-valuenow': false
@@ -34,7 +33,7 @@ describe('aria-valid-attr-value virtual-rule', function () {
     assert.lengthOf(results.violations, 1);
     assert.lengthOf(results.incomplete, 0);
 
-    assert.lengthOf(results.violations[0].nodes[0].all[0].data, 5);
+    assert.lengthOf(results.violations[0].nodes[0].all[0].data, 4);
   });
 
   it('should only mark invalid values', function () {