fix(required-attr): allow aria-valuetext on slider instead of valuenow (#4518)

Closes: #4515

Author: WilcoFiers

lib/checks/aria/aria-required-attr-evaluate.js

@@ -54,6 +54,11 @@ export default function ariaRequiredAttrEvaluate(
   ) {
     return true;
   }
+  // Non-normative exception for things like media player seek slider.
+  // Tested to work in various screen readers.
+  if (role === 'slider' && virtualNode.attr('aria-valuetext')?.trim()) {
+    return true;
+  }
 
   const elmSpec = getElementSpec(virtualNode);
   const missingAttrs = requiredAttrs.filter(

test/checks/aria/aria-required-attr.js

@@ -49,6 +49,13 @@ describe('aria-required-attr', () => {
     assert.isTrue(requiredAttrCheck.apply(checkContext, params));
   });
 
+  it('passes aria-valuenow if element has aria-valuetext', () => {
+    const params = checkSetup(
+      '<div id="target" role="slider" aria-valuetext="foo"></div>'
+    );
+    assert.isTrue(requiredAttrCheck.apply(checkContext, params));
+  });
+
   it('passes aria-checkbox if element has checked property', () => {
     const params = checkSetup(
       '<input id="target" type="checkbox" role="switch">'

test/integration/rules/aria-required-attr/required-attr.html

@@ -52,6 +52,13 @@
 <div role="spinbutton" id="pass11">fail</div>
 <div role="separator" id="pass12"></div>
 <div role="separator" id="pass13" tabindex="0" aria-valuenow="foo"></div>
+<div
+  role="slider"
+  id="pass14-aria-valuetext-slider"
+  aria-valuetext="3 minutes 20 second"
+>
+  ok
+</div>
 
 <div role="scrollbar" id="violation1">fail</div>
 <div role="slider" id="violation2">fail</div>

test/integration/rules/aria-required-attr/required-attr.json

@@ -23,6 +23,7 @@
     ["#pass10"],
     ["#pass11"],
     ["#pass12"],
-    ["#pass13"]
+    ["#pass13"],
+    ["#pass14-aria-valuetext-slider"]
   ]
 }