fix(nativeSelectValue): update selected value on change (#3154)

* Fix nativeSelectValue not picking up selection * Use props instead * Add test for selected prop
dequelabs · Sep 13, 2021 · 1ee88cb · 1ee88cb
1 parent d0d1d59
commit 1ee88cb
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/lib/commons/text/form-control-value.js b/lib/commons/text/form-control-value.js
@@ -106,7 +106,7 @@ function nativeSelectValue(node) {
   }
 
   const options = querySelectorAll(vNode, 'option');
-  const selectedOptions = options.filter(option => option.hasAttr('selected'));
+  const selectedOptions = options.filter(option => option.props.selected);
 
   // browser automatically selects the first option
   if (!selectedOptions.length) {

diff --git a/lib/core/base/virtual-node/virtual-node.js b/lib/core/base/virtual-node/virtual-node.js
@@ -62,7 +62,8 @@ class VirtualNode extends AbstractVirtualNode {
         id,
         multiple,
         nodeValue,
-        value
+        value,
+        selected
       } = this.actualNode;
 
       this._cache.props = {
@@ -72,7 +73,8 @@ class VirtualNode extends AbstractVirtualNode {
         type: this._type,
         multiple,
         nodeValue,
-        value
+        value,
+        selected
       };
     }
 

diff --git a/test/commons/text/form-control-value.js b/test/commons/text/form-control-value.js
@@ -2,6 +2,7 @@ describe('text.formControlValue', function() {
   var formControlValue = axe.commons.text.formControlValue;
   var queryFixture = axe.testUtils.queryFixture;
   var fixtureSetup = axe.testUtils.fixtureSetup;
+  var injectIntoFixture = axe.testUtils.injectIntoFixture;
   var fixture = document.querySelector('#fixture');
 
   function getNodeType(node) {
@@ -149,6 +150,19 @@ describe('text.formControlValue', function() {
       assert.equal(nativeSelectValue(target), 'baz');
     });
 
+    it('returns the selected option text after selection', function() {
+      injectIntoFixture(
+        '<select id="target">' +
+          '  <option value="foo" selected>foo</option>' +
+          '  <option value="bar">baz</option>' +
+          '</select>'
+      );
+      fixture.querySelector('#target').value = 'bar';
+      var rootNode = axe.setup(fixture);
+      var target = axe.utils.querySelectorAll(rootNode, '#target')[0];
+      assert.equal(nativeSelectValue(target), 'baz');
+    });
+
     it('returns multiple options, space seperated', function() {
       // Can't apply multiple "selected" props without setting "multiple"
       var target = queryFixture(

diff --git a/test/core/base/virtual-node/virtual-node.js b/test/core/base/virtual-node/virtual-node.js
@@ -39,6 +39,16 @@ describe('VirtualNode', function() {
       assert.equal(vNode.props.type, 'text');
     });
 
+    it('should reflect selected property', function() {
+      node = document.createElement('option');
+      var vNode = new VirtualNode(node);
+      assert.equal(vNode.props.selected, false);
+
+      node.selected = true;
+      vNode = new VirtualNode(node);
+      assert.equal(vNode.props.selected, true);
+    });
+
     it('should lowercase type', function() {
       var node = document.createElement('input');
       node.setAttribute('type', 'COLOR');