From db5f2ef38c97a7130a1f20540821f4237706e7c7 Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Mon, 23 Dec 2019 09:37:23 +0100
Subject: [PATCH] fix(select-rich): add aria-invalid when invalid

---
 packages/select-rich/src/LionSelectRich.js    |  5 ++++
 .../test/lion-select-rich-interaction.test.js | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index 36e83c3e4..8a6c608f3 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -278,6 +278,11 @@ export class LionSelectRich extends OverlayMixin(
           this._inputNode.getAttribute('aria-describedby'),
         );
       }
+
+      if (changedProps.has('showsFeedbackFor')) {
+        // The ValidateMixin sets aria-invalid on the inputNode, but in this component we also need it on the invoker
+        this._invokerNode.setAttribute('aria-invalid', this._hasFeedbackVisibleFor('error'));
+      }
     }
   }
 
diff --git a/packages/select-rich/test/lion-select-rich-interaction.test.js b/packages/select-rich/test/lion-select-rich-interaction.test.js
index 75b7e5fb1..6de767761 100644
--- a/packages/select-rich/test/lion-select-rich-interaction.test.js
+++ b/packages/select-rich/test/lion-select-rich-interaction.test.js
@@ -667,5 +667,31 @@ describe('lion-select-rich interactions', () => {
         expect(oEl.getAttribute('aria-posinset')).to.equal(`${i + 1}`);
       });
     });
+
+    it('sets [aria-invalid="true"] to "._invokerNode" when there is an error', async () => {
+      const el = await fixture(html`
+        <lion-select-rich .validators=${[new Required()]}>
+          <lion-options slot="input">
+            <lion-option .choiceValue=${null}>Please select a value</lion-option>
+            <lion-option .modelValue=${{ value: 10, checked: true }}>Item 1</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      `);
+      const invokerNode = el._invokerNode;
+      const options = el.querySelectorAll('lion-option');
+      await el.feedbackComplete;
+      await el.updateComplete;
+      expect(invokerNode.getAttribute('aria-invalid')).to.equal('false');
+
+      options[0].checked = true;
+      await el.feedbackComplete;
+      await el.updateComplete;
+      expect(invokerNode.getAttribute('aria-invalid')).to.equal('true');
+
+      options[1].checked = true;
+      await el.feedbackComplete;
+      await el.updateComplete;
+      expect(invokerNode.getAttribute('aria-invalid')).to.equal('false');
+    });
   });
 });