Merge pull request #450 from ing-bank/fix/aria-invalid

fix(select-rich): add aria-invalid when invalid

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'));
+      }
     }
   }
 

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');
+    });
   });
 });