element
+ *
+ * @customElement
+ * @extends LionField
+ */
+export class LionSelectRich extends FormRegistrarMixin(
+ InteractionStateMixin(ValidateMixin(FormControlMixin(SlotMixin(LitElement)))),
+) {
+ static get properties() {
+ return {
+ ...super.properties,
+ checkedValue: {
+ type: Object,
+ },
+
+ disabled: {
+ type: Boolean,
+ reflect: true,
+ },
+
+ opened: {
+ type: Boolean,
+ reflect: true,
+ },
+
+ interactionMode: {
+ type: String,
+ attribute: 'interaction-mode',
+ },
+
+ modelValue: {
+ type: Array,
+ },
+
+ name: {
+ type: String,
+ },
+ };
+ }
+
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: block;
+ }
+
+ :host([disabled]) {
+ color: #adadad;
+ }
+ `,
+ ];
+ }
+
+ static _isPrefilled(modelValue) {
+ if (!modelValue) {
+ return false;
+ }
+ const checkedModelValue = modelValue.find(subModelValue => subModelValue.checked === true);
+ if (!checkedModelValue) {
+ return false;
+ }
+
+ const { value } = checkedModelValue;
+ return super._isPrefilled(value);
+ }
+
+ get slots() {
+ return {
+ ...super.slots,
+ invoker: () => {
+ return document.createElement('lion-select-invoker');
+ },
+ };
+ }
+
+ get _invokerNode() {
+ return this.querySelector('[slot=invoker]');
+ }
+
+ get _listboxNode() {
+ return this.querySelector('[slot=input]');
+ }
+
+ get _listboxActiveDescendantNode() {
+ return this._listboxNode.querySelector(`#${this._listboxActiveDescendant}`);
+ }
+
+ get checkedIndex() {
+ if (this.modelValue) {
+ return this.modelValue.findIndex(el => el.value === this.checkedValue);
+ }
+ return -1;
+ }
+
+ set checkedIndex(index) {
+ if (this.formElements[index]) {
+ this.formElements[index].checked = true;
+ }
+ }
+
+ get activeIndex() {
+ return this.formElements.findIndex(el => el.active === true);
+ }
+
+ set activeIndex(index) {
+ if (this.formElements[index]) {
+ this.formElements[index].active = true;
+ }
+ }
+
+ constructor() {
+ super();
+ this.interactionMode = 'auto';
+ this.disabled = false;
+ this.opened = false;
+ // for interaction states
+ // we use a different event as 'model-value-changed' would bubble up from all options
+ this._valueChangedEvent = 'select-model-value-changed';
+ this._listboxActiveDescendant = null;
+ this.__hasInitialSelectedFormElement = false;
+
+ this.__setupEventListeners();
+ }
+
+ connectedCallback() {
+ if (super.connectedCallback) {
+ super.connectedCallback();
+ }
+
+ this.__setupOverlay();
+ this.__setupInvokerNode();
+ this.__setupListboxNode();
+ }
+
+ disconnectedCallback() {
+ if (super.disconnectedCallback) {
+ super.disconnectedCallback();
+ }
+ this.__teardownEventListeners();
+ this.__teardownOverlay();
+ this.__teardownInvokerNode();
+ this.__teardownListboxNode();
+ }
+
+ _requestUpdate(name, oldValue) {
+ super._requestUpdate(name, oldValue);
+ if (
+ name === 'checkedValue' &&
+ !this.__isSyncingCheckedAndModelValue &&
+ this.modelValue &&
+ this.modelValue.length > 0
+ ) {
+ if (this.checkedIndex) {
+ this.checkedIndex = this.checkedIndex;
+ }
+ }
+
+ if (name === 'modelValue') {
+ this.dispatchEvent(new CustomEvent('select-model-value-changed'));
+ this.__onModelValueChanged();
+ }
+
+ if (name === 'interactionMode') {
+ if (this.interactionMode === 'auto') {
+ this.interactionMode = detectInteractionMode();
+ }
+ }
+ }
+
+ updated(changedProps) {
+ super.updated(changedProps);
+ if (changedProps.has('opened')) {
+ if (this.opened) {
+ this.__overlay.show();
+ } else {
+ this.__overlay.hide();
+ }
+ }
+
+ if (changedProps.has('disabled')) {
+ if (this.disabled) {
+ this._invokerNode.makeRequestToBeDisabled();
+ this.__requestOptionsToBeDisabled();
+ } else {
+ this._invokerNode.retractRequestToBeDisabled();
+ this.__retractRequestOptionsToBeDisabled();
+ }
+ }
+ }
+
+ toggle() {
+ this.opened = !this.opened;
+ }
+
+ /**
+ * @override
+ */
+ // eslint-disable-next-line
+ inputGroupInputTemplate() {
+ return html`
+
+
+
+
+ `;
+ }
+
+ /**
+ * Overrides FormRegistrar adding to make sure children have specific default states when added
+ *
+ * @override
+ * @param {*} child
+ */
+ addFormElement(child) {
+ super.addFormElement(child);
+ // we need to adjust the elements being registered
+ /* eslint-disable no-param-reassign */
+ child.id = child.id || `${this.localName}-option-${uuid()}`;
+
+ if (this.disabled) {
+ child.makeRequestToBeDisabled();
+ }
+ // the first elements checked by default
+ if (!this.__hasInitialSelectedFormElement && (!child.disabled || this.disabled)) {
+ child.active = true;
+ child.checked = true;
+ this.__hasInitialSelectedFormElement = true;
+ }
+
+ this.__setAttributeForAllFormElements('aria-setsize', this.formElements.length);
+ child.setAttribute('aria-posinset', this.formElements.length);
+
+ this.__onChildModelValueChanged({ target: child });
+ this.resetInteractionState();
+ /* eslint-enable no-param-reassign */
+ }
+
+ _getFromAllFormElements(property) {
+ return this.formElements.map(e => e[property]);
+ }
+
+ /**
+ * add same aria-label to invokerNode as inputElement
+ * @override
+ */
+ _onAriaLabelledbyChanged({ _ariaLabelledby }) {
+ if (this.inputElement) {
+ this.inputElement.setAttribute('aria-labelledby', _ariaLabelledby);
+ }
+ if (this._invokerNode) {
+ this._invokerNode.setAttribute(
+ 'aria-labelledby',
+ `${_ariaLabelledby} ${this._invokerNode.id}`,
+ );
+ }
+ }
+
+ /**
+ * add same aria-label to invokerNode as inputElement
+ * @override
+ */
+ _onAriaDescribedbyChanged({ _ariaDescribedby }) {
+ if (this.inputElement) {
+ this.inputElement.setAttribute('aria-describedby', _ariaDescribedby);
+ }
+ if (this._invokerNode) {
+ this._invokerNode.setAttribute('aria-describedby', _ariaDescribedby);
+ }
+ }
+
+ __setupEventListeners() {
+ this.__onChildActiveChanged = this.__onChildActiveChanged.bind(this);
+ this.__onChildModelValueChanged = this.__onChildModelValueChanged.bind(this);
+ this.__onKeyUp = this.__onKeyUp.bind(this);
+
+ this.addEventListener('active-changed', this.__onChildActiveChanged);
+ this.addEventListener('model-value-changed', this.__onChildModelValueChanged);
+ this.addEventListener('keyup', this.__onKeyUp);
+ }
+
+ __teardownEventListeners() {
+ this.removeEventListener('active-changed', this.__onChildActiveChanged);
+ this.removeEventListener('model-value-changed', this.__onChildModelValueChanged);
+ this.removeEventListener('keyup', this.__onKeyUp);
+ }
+
+ __onChildActiveChanged({ target }) {
+ if (target.active === true) {
+ this.formElements.forEach(formElement => {
+ if (formElement !== target) {
+ // eslint-disable-next-line no-param-reassign
+ formElement.active = false;
+ }
+ });
+ this._listboxNode.setAttribute('aria-activedescendant', target.id);
+ }
+ }
+
+ __setAttributeForAllFormElements(attribute, value) {
+ this.formElements.forEach(formElement => {
+ formElement.setAttribute(attribute, value);
+ });
+ }
+
+ __onChildModelValueChanged({ target }) {
+ if (target.checked) {
+ this.formElements.forEach(formElement => {
+ if (formElement !== target) {
+ // eslint-disable-next-line no-param-reassign
+ formElement.checked = false;
+ }
+ });
+ }
+ this.modelValue = this._getFromAllFormElements('modelValue');
+ }
+
+ __onModelValueChanged() {
+ this.__isSyncingCheckedAndModelValue = true;
+
+ const foundChecked = this.modelValue.find(subModelValue => subModelValue.checked);
+ if (foundChecked && foundChecked.value !== this.checkedValue) {
+ this.checkedValue = foundChecked.value;
+
+ // sync to invoker
+ this._invokerNode.selectedElement = this.formElements[this.checkedIndex];
+ }
+
+ this.__isSyncingCheckedAndModelValue = false;
+ }
+
+ __getNextEnabledOption(currentIndex, offset = 1) {
+ for (let i = currentIndex + offset; i < this.formElements.length; i += 1) {
+ if (this.formElements[i] && !this.formElements[i].disabled) {
+ return i;
+ }
+ }
+ return currentIndex;
+ }
+
+ __getPreviousEnabledOption(currentIndex, offset = -1) {
+ for (let i = currentIndex + offset; i >= 0; i -= 1) {
+ if (this.formElements[i] && !this.formElements[i].disabled) {
+ return i;
+ }
+ }
+ return currentIndex;
+ }
+
+ /**
+ * @desc
+ * Handle various keyboard controls; UP/DOWN will shift focus; SPACE selects
+ * an item.
+ *
+ * @param ev - the keydown event object
+ */
+ __listboxOnKeyUp(ev) {
+ if (this.disabled) {
+ return;
+ }
+
+ const { key } = ev;
+
+ switch (key) {
+ case 'Escape':
+ ev.preventDefault();
+ this.opened = false;
+ break;
+ case 'Enter':
+ case ' ':
+ ev.preventDefault();
+ if (this.interactionMode === 'mac') {
+ this.checkedIndex = this.activeIndex;
+ }
+ this.opened = false;
+ break;
+ case 'ArrowUp':
+ ev.preventDefault();
+ this.activeIndex = this.__getPreviousEnabledOption(this.activeIndex);
+ break;
+ case 'ArrowDown':
+ ev.preventDefault();
+ this.activeIndex = this.__getNextEnabledOption(this.activeIndex);
+ break;
+ case 'Home':
+ ev.preventDefault();
+ this.activeIndex = this.__getNextEnabledOption(0, 0);
+ break;
+ case 'End':
+ ev.preventDefault();
+ this.activeIndex = this.__getPreviousEnabledOption(this.formElements.length - 1, 0);
+ break;
+ /* no default */
+ }
+
+ const keys = ['ArrowUp', 'ArrowDown', 'Home', 'End'];
+ if (keys.includes(key) && this.interactionMode === 'windows/linux') {
+ this.checkedIndex = this.activeIndex;
+ }
+ }
+
+ __listboxOnKeyDown(ev) {
+ if (this.disabled) {
+ return;
+ }
+
+ const { key } = ev;
+
+ switch (key) {
+ case 'Tab':
+ // Tab can only be caught in keydown
+ ev.preventDefault();
+ this.opened = false;
+ break;
+ /* no default */
+ }
+ }
+
+ __onKeyUp(ev) {
+ if (this.disabled) {
+ return;
+ }
+
+ if (this.opened) {
+ return;
+ }
+
+ const { key } = ev;
+ switch (key) {
+ case 'ArrowUp':
+ ev.preventDefault();
+ if (this.interactionMode === 'mac') {
+ this.opened = true;
+ } else {
+ this.checkedIndex = this.__getPreviousEnabledOption(this.checkedIndex);
+ }
+ break;
+ case 'ArrowDown':
+ ev.preventDefault();
+ if (this.interactionMode === 'mac') {
+ this.opened = true;
+ } else {
+ this.checkedIndex = this.__getNextEnabledOption(this.checkedIndex);
+ }
+ break;
+ /* no default */
+ }
+ }
+
+ __requestOptionsToBeDisabled() {
+ this.formElements.forEach(el => {
+ if (el.makeRequestToBeDisabled) {
+ el.makeRequestToBeDisabled();
+ }
+ });
+ }
+
+ __retractRequestOptionsToBeDisabled() {
+ this.formElements.forEach(el => {
+ if (el.retractRequestToBeDisabled) {
+ el.retractRequestToBeDisabled();
+ }
+ });
+ }
+
+ __setupInvokerNode() {
+ this._invokerNode.id = `invoker-${this._inputId}`;
+ this._invokerNode.setAttribute('aria-haspopup', 'listbox');
+
+ this.__setupInvokerNodeEventListener();
+ }
+
+ __setupInvokerNodeEventListener() {
+ this.__invokerOnClick = () => {
+ if (!this.disabled) {
+ this.toggle();
+ }
+ };
+ this._invokerNode.addEventListener('click', this.__invokerOnClick);
+
+ this.__invokerOnBlur = () => {
+ this.dispatchEvent(new Event('blur'));
+ };
+ this._invokerNode.addEventListener('blur', this.__invokerOnBlur);
+ }
+
+ __teardownInvokerNode() {
+ this._invokerNode.removeEventListener('click', this.__invokerOnClick);
+ this._invokerNode.removeEventListener('blur', this.__invokerOnBlur);
+ }
+
+ /**
+ * For ShadyDom the listboxNode is available right from the start so we can add those events
+ * immediately.
+ * For native ShadowDom the select gets render before the listboxNode is available so we
+ * will add an event to the slotchange and add the events once available.
+ */
+ __setupListboxNode() {
+ if (this._listboxNode) {
+ this.__setupListboxNodeEventListener();
+ } else {
+ const inputSlot = this.shadowRoot.querySelector('slot[name=input]');
+ if (inputSlot) {
+ inputSlot.addEventListener('slotchange', () => {
+ this.__setupListboxNodeEventListener();
+ });
+ }
+ }
+ }
+
+ __setupListboxNodeEventListener() {
+ this.__listboxOnClick = () => {
+ this.opened = false;
+ };
+ this._listboxNode.addEventListener('click', this.__listboxOnClick);
+
+ this.__listboxOnKeyUp = this.__listboxOnKeyUp.bind(this);
+ this._listboxNode.addEventListener('keyup', this.__listboxOnKeyUp);
+
+ this.__listboxOnKeyDown = this.__listboxOnKeyDown.bind(this);
+ this._listboxNode.addEventListener('keydown', this.__listboxOnKeyDown);
+ }
+
+ __teardownListboxNode() {
+ if (this._listboxNode) {
+ this._listboxNode.removeEventListener('click', this.__listboxOnClick);
+ this._listboxNode.removeEventListener('keyup', this.__listboxOnKeyUp);
+ this._listboxNode.removeEventListener('keydown', this.__listboxOnKeyDown);
+ }
+ }
+
+ __setupOverlay() {
+ this.__overlay = overlays.add(
+ new LocalOverlayController({
+ contentNode: this._listboxNode,
+ invokerNode: this._invokerNode,
+ hidesOnEsc: false,
+ hidesOnOutsideClick: true,
+ inheritsReferenceObjectWidth: true,
+ popperConfig: {
+ placement: 'bottom-start',
+ modifiers: {
+ offset: {
+ enabled: false,
+ },
+ },
+ },
+ }),
+ );
+
+ this.__overlayOnShow = () => {
+ this.opened = true;
+ if (this.checkedIndex) {
+ this.activeIndex = this.checkedIndex;
+ }
+ this._listboxNode.focus();
+ };
+ this.__overlay.addEventListener('show', this.__overlayOnShow);
+
+ this.__overlayOnHide = () => {
+ this.opened = false;
+ this._invokerNode.focus();
+ };
+ this.__overlay.addEventListener('hide', this.__overlayOnHide);
+ }
+
+ __teardownOverlay() {
+ this.__overlay.removeEventListener('show', this.__overlayOnShow);
+ this.__overlay.removeEventListener('hide', this.__overlayOnHide);
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ __isRequired(modelValue) {
+ const checkedModelValue = modelValue.find(subModelValue => subModelValue.checked === true);
+ if (!checkedModelValue) {
+ return { required: false };
+ }
+ const { value } = checkedModelValue;
+ return {
+ required:
+ (typeof value === 'string' && value !== '') ||
+ (typeof value !== 'string' && value !== undefined && value !== null),
+ };
+ }
+}
diff --git a/packages/select-rich/src/differentKeyNamesShimIE.js b/packages/select-rich/src/differentKeyNamesShimIE.js
new file mode 100644
index 000000000..65b6d49d1
--- /dev/null
+++ b/packages/select-rich/src/differentKeyNamesShimIE.js
@@ -0,0 +1,33 @@
+const event = KeyboardEvent.prototype;
+const descriptor = Object.getOwnPropertyDescriptor(event, 'key');
+if (descriptor) {
+ const keys = {
+ Win: 'Meta',
+ Scroll: 'ScrollLock',
+ Spacebar: ' ',
+
+ Down: 'ArrowDown',
+ Left: 'ArrowLeft',
+ Right: 'ArrowRight',
+ Up: 'ArrowUp',
+
+ Del: 'Delete',
+ Apps: 'ContextMenu',
+ Esc: 'Escape',
+
+ Multiply: '*',
+ Add: '+',
+ Subtract: '-',
+ Decimal: '.',
+ Divide: '/',
+ };
+ Object.defineProperty(event, 'key', {
+ // eslint-disable-next-line object-shorthand, func-names
+ get: function() {
+ const key = descriptor.get.call(this);
+
+ // eslint-disable-next-line no-prototype-builtins
+ return keys.hasOwnProperty(key) ? keys[key] : key;
+ },
+ });
+}
diff --git a/packages/select-rich/stories/index.stories.js b/packages/select-rich/stories/index.stories.js
new file mode 100644
index 000000000..1ade3e10e
--- /dev/null
+++ b/packages/select-rich/stories/index.stories.js
@@ -0,0 +1,183 @@
+import { storiesOf, html } from '@open-wc/demoing-storybook';
+import { css } from '@lion/core';
+
+import '@lion/form/lion-form.js';
+import '@lion/option/lion-option.js';
+
+import '../lion-select-rich.js';
+import '../lion-options.js';
+
+const selectRichDemoStyle = css`
+ .demo-area {
+ margin: 50px;
+ }
+`;
+
+storiesOf('Forms|Select Rich', module)
+ .add(
+ 'Default',
+ () => html`
+
+
+
+
+ Red
+ Hotpink
+ Teal
+
+
+
+ `,
+ )
+ .add(
+ 'Options with HTML',
+ () => html`
+
+
+
+
+
+ I am red
+ and multi Line
+
+
+ I am hotpink
+ and multi Line
+
+
+ I am teal
+ and multi Line
+
+
+
+
+
+
+ Red
+ Hotpink
+ Teal
+
+
+
+
+
+ Red
+ Blue
+ Hotpink
+ Green
+ Teal
+
+
+
+ `,
+ )
+ .add('Validation', () => {
+ const submit = () => {
+ const form = document.querySelector('#form');
+ if (form.errorState === false) {
+ console.log(form.serializeGroup());
+ }
+ };
+ return html`
+
+
+
+
+
+
+ `;
+ })
+ .add('Render Options', () => {
+ const objs = [
+ { type: 'mastercard', label: 'Master Card', amount: 12000, active: true },
+ { type: 'visacard', label: 'Visa Card', amount: 0, active: false },
+ ];
+
+ function showOutput() {
+ // eslint-disable-next-line no-undef
+ output.innerHTML = JSON.stringify(this.checkedValue, null, 2);
+ }
+ return html`
+
+
+ `;
+ })
+ .add(
+ 'Interaction mode',
+ () => html`
+
+ By default the select-rich uses the same interaction-mode as the operating system.
+
+
+
+ Red
+ Hotpink
+ Teal
+
+
+
+
+
+ Red
+ Hotpink
+ Teal
+
+
+
+ `,
+ );
diff --git a/packages/select-rich/test/keyboardEventShimIE.js b/packages/select-rich/test/keyboardEventShimIE.js
new file mode 100644
index 000000000..45e834217
--- /dev/null
+++ b/packages/select-rich/test/keyboardEventShimIE.js
@@ -0,0 +1,49 @@
+if (typeof window.KeyboardEvent !== 'function') {
+ // e.g. is IE and needs "polyfill"
+ const KeyboardEvent = (event, _params) => {
+ // current spec for it https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent
+ const params = {
+ bubbles: false,
+ cancelable: false,
+ view: document.defaultView,
+ key: false,
+ location: false,
+ ctrlKey: false,
+ shiftKey: false,
+ altKey: false,
+ metaKey: false,
+ repeat: false,
+ ..._params,
+ };
+ const modifiersListArray = [];
+ if (params.ctrlKey) {
+ modifiersListArray.push('Control');
+ }
+ if (params.shiftKey) {
+ modifiersListArray.push('Shift');
+ }
+ if (params.altKey) {
+ modifiersListArray.push('Alt');
+ }
+ if (params.metaKey) {
+ modifiersListArray.push('Meta');
+ }
+
+ const ev = document.createEvent('KeyboardEvent');
+ // IE Spec for it https://technet.microsoft.com/en-us/windows/ff975297(v=vs.60)
+ ev.initKeyboardEvent(
+ event,
+ params.bubbles,
+ params.cancelable,
+ params.view,
+ params.key,
+ params.location,
+ modifiersListArray.join(' '),
+ params.repeat ? 1 : 0,
+ params.locale,
+ );
+ return ev;
+ };
+ KeyboardEvent.prototype = window.Event.prototype;
+ window.KeyboardEvent = KeyboardEvent;
+}
diff --git a/packages/select-rich/test/lion-options.test.js b/packages/select-rich/test/lion-options.test.js
new file mode 100644
index 000000000..903ba7fd6
--- /dev/null
+++ b/packages/select-rich/test/lion-options.test.js
@@ -0,0 +1,12 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../lion-options.js';
+
+describe('lion-options', () => {
+ it('should have role="listbox"', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el.role).to.equal('listbox');
+ });
+});
diff --git a/packages/select-rich/test/lion-select-invoker.test.js b/packages/select-rich/test/lion-select-invoker.test.js
new file mode 100644
index 000000000..fdec095ac
--- /dev/null
+++ b/packages/select-rich/test/lion-select-invoker.test.js
@@ -0,0 +1,76 @@
+import { expect, fixture, html, defineCE } from '@open-wc/testing';
+import { LionButton } from '@lion/button';
+import { LionSelectInvoker } from '../src/LionSelectInvoker.js';
+
+import '../lion-select-invoker.js';
+
+describe('lion-select-invoker', () => {
+ it('should behave as a button', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el instanceof LionButton).to.be.true;
+ });
+
+ it('renders invoker info based on selectedElement child elements', async () => {
+ const el = await fixture(html`
+
+ `);
+ el.selectedElement = await fixture(``);
+ await el.updateComplete;
+
+ expect(el.contentWrapper).lightDom.to.equal(
+ `
+ I am
+ 2 lines
+ `,
+ {
+ ignoreAttributes: ['class'], // ShadyCss automatically adds classes
+ },
+ );
+ });
+
+ it('renders invoker info based on selectedElement textContent', async () => {
+ const el = await fixture(html`
+
+ `);
+ el.selectedElement = await fixture(`just textContent
`);
+ await el.updateComplete;
+
+ expect(el.contentWrapper).lightDom.to.equal('just textContent');
+ });
+
+ it('has tabindex="0"', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el.tabIndex).to.equal(0);
+ expect(el.getAttribute('tabindex')).to.equal('0');
+ });
+
+ describe('Subclassers', () => {
+ it('supports a custom _contentTemplate', async () => {
+ const myTag = defineCE(
+ class extends LionSelectInvoker {
+ _contentTemplate() {
+ if (this.selectedElement && this.selectedElement.textContent === 'cat') {
+ return html`
+ cat selected
+ `;
+ }
+ return `no valid selection`;
+ }
+ },
+ );
+ const el = await fixture(`<${myTag}>`);
+
+ el.selectedElement = await fixture(`cat
`);
+ await el.updateComplete;
+ expect(el.contentWrapper).lightDom.to.equal('cat selected');
+
+ el.selectedElement = await fixture(`dog
`);
+ await el.updateComplete;
+ expect(el.contentWrapper).lightDom.to.equal('no valid selection');
+ });
+ });
+});
diff --git a/packages/select-rich/test/lion-select-rich-interaction.test.js b/packages/select-rich/test/lion-select-rich-interaction.test.js
new file mode 100644
index 000000000..29abb7b37
--- /dev/null
+++ b/packages/select-rich/test/lion-select-rich-interaction.test.js
@@ -0,0 +1,657 @@
+import { expect, fixture, html, triggerFocusFor, triggerBlurFor } from '@open-wc/testing';
+import './keyboardEventShimIE.js';
+
+import '@lion/option/lion-option.js';
+import '../lion-options.js';
+import '../lion-select-rich.js';
+
+describe('lion-select-rich interactions', () => {
+ describe('values', () => {
+ it('registers options', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el.formElements.length).to.equal(2);
+ expect(el.formElements).to.eql([
+ el.querySelectorAll('lion-option')[0],
+ el.querySelectorAll('lion-option')[1],
+ ]);
+ });
+
+ it('has the first element by default checked and active', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+
+ expect(el.querySelector('lion-option').checked).to.be.true;
+ expect(el.querySelector('lion-option').active).to.be.true;
+ expect(el.modelValue).to.deep.equal([
+ { value: 10, checked: true },
+ { value: 20, checked: false },
+ ]);
+ expect(el.checkedValue).to.equal(10);
+
+ expect(el.checkedIndex).to.equal(0);
+ expect(el.activeIndex).to.equal(0);
+ });
+
+ it('allows null choiceValue', async () => {
+ const el = await fixture(html`
+
+
+ Please select value
+ Item 2
+
+
+ `);
+ expect(el.modelValue).to.deep.equal([
+ { value: null, checked: true },
+ { value: 20, checked: false },
+ ]);
+ expect(el.checkedValue).to.be.null;
+ });
+
+ it('has the checked option as modelValue', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el.modelValue).to.deep.equal([
+ { value: 10, checked: false },
+ { value: 20, checked: true },
+ ]);
+ expect(el.checkedValue).to.equal(20);
+ });
+
+ it('syncs checkedValue to modelValue', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ el.checkedValue = 20;
+ expect(el.modelValue).to.deep.equal([
+ { value: 10, checked: false },
+ { value: 20, checked: true },
+ ]);
+ });
+
+ it('has an activeIndex', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el.activeIndex).to.equal(0);
+
+ el.querySelectorAll('lion-option')[1].active = true;
+ expect(el.querySelectorAll('lion-option')[0].active).to.be.false;
+ expect(el.activeIndex).to.equal(1);
+ });
+ });
+
+ describe('Keyboard navigation', () => {
+ it('does not allow to navigate above the first or below the last option', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+
+
+ `);
+ expect(() => {
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ }).to.not.throw();
+ expect(el.checkedIndex).to.equal(0);
+ expect(el.activeIndex).to.equal(0);
+ });
+
+ it('navigates to first and last option with [Home] and [End] keys', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+
+
+ `);
+ expect(el.checkedValue).to.equal(30);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Home' }));
+ expect(el.checkedValue).to.equal(10);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'End' }));
+ expect(el.checkedValue).to.equal(40);
+ });
+
+ // TODO: nice to have
+ it.skip('selects a value with single [character] key', async () => {
+ const el = await fixture(html`
+
+
+ A
+ B
+ C
+
+
+ `);
+ expect(el.choiceValue).to.equal('a');
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'C' }));
+ expect(el.choiceValue).to.equal('c');
+ });
+
+ it.skip('selects a value with multiple [character] keys', async () => {
+ const el = await fixture(html`
+
+
+ Bar
+ Far
+ Foo
+
+
+ `);
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'F' }));
+ expect(el.choiceValue).to.equal('far');
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'O' }));
+ expect(el.choiceValue).to.equal('foo');
+ });
+ });
+
+ describe('Keyboard navigation Windows', () => {
+ it('navigates through list with [ArrowDown] [ArrowUp] keys activates and checks the option', async () => {
+ function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
+ options.forEach((option, i) => {
+ if (i === selectedIndex) {
+ expect(option.checked).to.be.true;
+ } else {
+ expect(option.checked).to.be.false;
+ }
+ });
+ }
+
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+
+ const options = Array.from(el.querySelectorAll('lion-option'));
+ expect(el.activeIndex).to.equal(0);
+ expect(el.checkedIndex).to.equal(0);
+ expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ expect(el.activeIndex).to.equal(1);
+ expect(el.checkedIndex).to.equal(1);
+ expectOnlyGivenOneOptionToBeChecked(options, 1);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+ expect(el.activeIndex).to.equal(0);
+ expect(el.checkedIndex).to.equal(0);
+ expectOnlyGivenOneOptionToBeChecked(options, 0);
+ });
+
+ it('navigates through list with [ArrowDown] [ArrowUp] keys checks the option while listbox unopened', async () => {
+ function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
+ options.forEach((option, i) => {
+ if (i === selectedIndex) {
+ expect(option.checked).to.be.true;
+ } else {
+ expect(option.checked).to.be.false;
+ }
+ });
+ }
+
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+
+ const options = Array.from(el.querySelectorAll('lion-option'));
+ expect(el.checkedIndex).to.equal(0);
+ expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ expect(el.checkedIndex).to.equal(1);
+ expectOnlyGivenOneOptionToBeChecked(options, 1);
+
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+ expect(el.checkedIndex).to.equal(0);
+ expectOnlyGivenOneOptionToBeChecked(options, 0);
+ });
+ });
+
+ describe('Keyboard navigation Mac', () => {
+ it('navigates through open list with [ArrowDown] [ArrowUp] keys activates the option', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+ expect(el.activeIndex).to.equal(0);
+ expect(el.checkedIndex).to.equal(0);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ expect(el.activeIndex).to.equal(1);
+ expect(el.checkedIndex).to.equal(0);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+ expect(el.activeIndex).to.equal(0);
+ expect(el.checkedIndex).to.equal(0);
+ });
+ });
+
+ describe('Disabled', () => {
+ it('cannot be focused if disabled', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el._invokerNode.tabIndex).to.equal(-1);
+ });
+
+ it('still has a checked value', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el.checkedValue).to.equal(10);
+ });
+
+ it('cannot be navigated with keyboard if disabled', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ expect(el.checkedValue).to.equal(10);
+ });
+
+ it('cannot be opened via click if disabled', async () => {
+ const el = await fixture(html`
+
+ `);
+ el._invokerNode.click();
+ expect(el.opened).to.be.false;
+ });
+
+ it('reflects disabled attribute to invoker', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el._invokerNode.hasAttribute('disabled')).to.be.true;
+ el.removeAttribute('disabled');
+ await el.updateComplete;
+ expect(el._invokerNode.hasAttribute('disabled')).to.be.false;
+ });
+
+ it('skips disabled options while navigating through list with [ArrowDown] [ArrowUp] keys', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ expect(el.activeIndex).to.equal(2);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+ expect(el.activeIndex).to.equal(0);
+ });
+
+ it('skips disabled options while navigates to first and last option with [Home] and [End] keys', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+
+
+ `);
+ expect(el.activeIndex).to.equal(2);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Home' }));
+ expect(el.activeIndex).to.equal(1);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'End' }));
+ expect(el.activeIndex).to.equal(2);
+ });
+
+ it('checks the first enabled option', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+ expect(el.activeIndex).to.equal(1);
+ expect(el.checkedIndex).to.equal(1);
+ });
+
+ it('sync its disabled state to all options', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ const options = [...el.querySelectorAll('lion-option')];
+ el.disabled = true;
+ await el.updateComplete;
+ expect(options[0].disabled).to.be.true;
+ expect(options[1].disabled).to.be.true;
+
+ el.disabled = false;
+ await el.updateComplete;
+ expect(options[0].disabled).to.be.true;
+ expect(options[1].disabled).to.be.false;
+ });
+
+ it('can be enabled (incl. its options) even if it starts as disabled', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ const options = [...el.querySelectorAll('lion-option')];
+ expect(options[0].disabled).to.be.true;
+ expect(options[1].disabled).to.be.true;
+
+ el.disabled = false;
+ await el.updateComplete;
+ expect(options[0].disabled).to.be.true;
+ expect(options[1].disabled).to.be.false;
+ });
+ });
+
+ // TODO: nice to have
+ describe.skip('Read only', () => {
+ it('can be focused if readonly', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el.tabIndex).to.equal('-1');
+ });
+
+ it('cannot be navigated with keyboard if readonly', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ expect(el.choiceValue).to.equal(10);
+ });
+ });
+
+ describe('Programmatic interaction', () => {
+ it('can set active state', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ const opt = el.querySelectorAll('lion-option')[1];
+ opt.active = true;
+ expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('myId');
+ });
+
+ it('can set checked state', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ const option = el.querySelectorAll('lion-option')[1];
+ option.checked = true;
+ expect(el.modelValue).to.deep.equal([
+ { value: 10, checked: false },
+ { value: 20, checked: true },
+ ]);
+ });
+
+ it('does not allow to set checkedIndex or activeIndex to be out of bound', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+
+
+ `);
+ expect(() => {
+ el.activeIndex = -1;
+ el.activeIndex = 1;
+ el.checkedIndex = -1;
+ el.checkedIndex = 1;
+ }).to.not.throw();
+ expect(el.checkedIndex).to.equal(0);
+ expect(el.activeIndex).to.equal(0);
+ });
+
+ it('unsets checked on other options when option becomes checked', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ const options = el.querySelectorAll('lion-option');
+ expect(options[0].checked).to.be.true;
+ options[1].checked = true;
+ expect(options[0].checked).to.be.false;
+ });
+
+ it('unsets active on other options when option becomes active', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ const options = el.querySelectorAll('lion-option');
+ expect(options[0].active).to.be.true;
+ options[1].active = true;
+ expect(options[0].active).to.be.false;
+ });
+ });
+
+ describe('Interaction states', () => {
+ it('becomes dirty if value changed once', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el.dirty).to.be.false;
+ el.checkedValue = 20;
+ expect(el.dirty).to.be.true;
+ });
+
+ it('becomes touched if blurred once', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el.touched).to.be.false;
+ await triggerFocusFor(el._invokerNode);
+ await triggerBlurFor(el._invokerNode);
+ expect(el.touched).to.be.true;
+ });
+
+ it('is prefilled if there is a value on init', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+
+
+ `);
+ expect(el.prefilled).to.be.true;
+
+ const elEmpty = await fixture(html`
+
+
+ Please select a value
+ Item 1
+
+
+ `);
+ expect(elEmpty.prefilled).to.be.false;
+ });
+ });
+
+ describe('Validation', () => {
+ it('can be required', async () => {
+ const el = await fixture(html`
+
+
+ Please select a value
+ Item 2
+
+
+ `);
+ expect(el.error.required).to.be.true;
+ el.checkedValue = 20;
+ expect(el.error.required).to.be.undefined;
+ });
+ });
+
+ describe('Accessibility', () => {
+ it('creates unique ids for all children', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+ expect(el.querySelectorAll('lion-option')[0].id).to.exist;
+ expect(el.querySelectorAll('lion-option')[1].id).to.exist;
+ expect(el.querySelectorAll('lion-option')[2].id).to.equal('predefined');
+ });
+
+ it('has a reference to the selected option', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('first');
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ expect(el._listboxNode.getAttribute('aria-activedescendant')).to.equal('second');
+ });
+
+ it('puts "aria-setsize" on all options to indicate the total amount of options', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+ const optionEls = [].slice.call(el.querySelectorAll('lion-option'));
+ optionEls.forEach(optionEl => {
+ expect(optionEl.getAttribute('aria-setsize')).to.equal('3');
+ });
+ });
+
+ it('puts "aria-posinset" on all options to indicate their position in the listbox', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ `);
+ const optionEls = [].slice.call(el.querySelectorAll('lion-option'));
+ optionEls.forEach((oEl, i) => {
+ expect(oEl.getAttribute('aria-posinset')).to.equal(`${i + 1}`);
+ });
+ });
+ });
+});
diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js
new file mode 100644
index 000000000..d1c70d369
--- /dev/null
+++ b/packages/select-rich/test/lion-select-rich.test.js
@@ -0,0 +1,321 @@
+import { expect, fixture, html, aTimeout } from '@open-wc/testing';
+import './keyboardEventShimIE.js';
+
+import '@lion/option/lion-option.js';
+import '../lion-options.js';
+import '../lion-select-rich.js';
+
+describe('lion-select-rich', () => {
+ it('does not have a tabindex', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el.hasAttribute('tabindex')).to.be.false;
+ });
+
+ describe('Invoker', () => {
+ it('generates an lion-select-invoker if no invoker is provided', async () => {
+ const el = await fixture(html`
+
+ `);
+
+ expect(el._invokerNode).to.exist;
+ expect(el._invokerNode.tagName).to.equal('LION-SELECT-INVOKER');
+ });
+
+ it('syncs the selected element to the invoker', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ const options = Array.from(el.querySelectorAll('lion-option'));
+ expect(el._invokerNode.selectedElement).to.equal(options[0]);
+
+ el.checkedIndex = 1;
+ expect(el._invokerNode.selectedElement).to.equal(el.querySelectorAll('lion-option')[1]);
+ });
+ });
+
+ describe('overlay', () => {
+ it('should be closed by default', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el.opened).to.be.false;
+ });
+
+ it('shows/hides the listbox via opened attribute', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el.opened = true;
+ await el.updateComplete;
+ expect(el._listboxNode.style.display).to.be.equal('inline-block');
+
+ el.opened = false;
+ await el.updateComplete;
+ expect(el._listboxNode.style.display).to.be.equal('none');
+ });
+
+ it('syncs opened state with overlay shown', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ const outerEl = await fixture('');
+
+ expect(el.opened).to.be.true;
+ // a click on the button will trigger hide on outside click
+ // which we then need to sync back to "opened"
+ outerEl.click();
+ await aTimeout();
+ expect(el.opened).to.be.false;
+ });
+
+ it('will focus the listbox on open and invoker on close', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el.opened = true;
+ await el.updateComplete;
+ expect(document.activeElement === el._listboxNode).to.be.true;
+ expect(document.activeElement === el._invokerNode).to.be.false;
+
+ el.opened = false;
+ await el.updateComplete;
+ expect(document.activeElement === el._listboxNode).to.be.false;
+ expect(document.activeElement === el._invokerNode).to.be.true;
+ });
+
+ it('opens the listbox with checked option as active', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ el.opened = true;
+ await el.updateComplete;
+ const options = Array.from(el.querySelectorAll('lion-option'));
+
+ expect(options[1].active).to.be.true;
+ expect(options[1].checked).to.be.true;
+ });
+ });
+
+ describe('interaction-mode', () => {
+ it('allows to specify an interaction-mode which determines other behaviors', async () => {
+ const el = await fixture(html`
+
+ `);
+ expect(el.interactionMode).to.equal('mac');
+ });
+ });
+
+ describe('Keyboard navigation', () => {
+ it('opens the listbox with [Enter] key via click handler', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el._invokerNode.click();
+ await el.updateComplete;
+ expect(el.opened).to.be.true;
+ });
+
+ it('opens the listbox with [ ](Space) key via click handler', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el._invokerNode.click();
+ await el.updateComplete;
+ expect(el.opened).to.be.true;
+ });
+
+ it('closes the listbox with [Escape] key once opened', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
+ await el.updateComplete;
+ expect(el.opened).to.be.false;
+ });
+
+ it('closes the listbox with [Tab] key once opened', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ // tab can only be caught via keydown
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+ await el.updateComplete;
+ expect(el.opened).to.be.false;
+ });
+ });
+
+ describe('Mouse navigation', () => {
+ it('opens the listbox via click on invoker', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ expect(el.opened).to.be.false;
+ el._invokerNode.click();
+ expect(el.opened).to.be.true;
+ });
+
+ it('closes the listbox when an option gets clicked', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+
+
+ `);
+ expect(el.opened).to.be.true;
+ el.querySelector('lion-option').click();
+ expect(el.opened).to.be.false;
+ });
+ });
+
+ describe('Keyboard navigation Windows', () => {
+ it('closes the listbox with [Enter] key once opened', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+ await el.updateComplete;
+ expect(el.opened).to.be.false;
+ });
+ });
+
+ describe('Keyboard navigation Mac', () => {
+ it('checks active item and closes the listbox with [Enter] key via click handler once opened', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+
+ // changes active but not checked
+ el.activeIndex = 1;
+ expect(el.checkedIndex).to.equal(0);
+
+ el._listboxNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+ expect(el.opened).to.be.false;
+ expect(el.checkedIndex).to.equal(1);
+ });
+
+ it('opens the listbox with [ArrowUp] key', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+ await el.updateComplete;
+ expect(el.opened).to.be.true;
+ });
+
+ it('opens the listbox with [ArrowDown] key', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+ await el.updateComplete;
+ expect(el.opened).to.be.true;
+ });
+ });
+
+ describe('Accessibility', () => {
+ it('has the right references to its inner elements', async () => {
+ const el = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+ expect(el._invokerNode.getAttribute('aria-labelledby')).to.contain(el._labelNode.id);
+ expect(el._invokerNode.getAttribute('aria-labelledby')).to.contain(el._invokerNode.id);
+ expect(el._invokerNode.getAttribute('aria-describedby')).to.contain(el._helpTextNode.id);
+ expect(el._invokerNode.getAttribute('aria-describedby')).to.contain(el._feedbackNode.id);
+ expect(el._invokerNode.getAttribute('aria-haspopup')).to.equal('listbox');
+ });
+
+ it('notifies when the listbox is expanded or not', async () => {
+ // smoke test for overlay functionality
+ const el = await fixture(html`
+
+
+
+ `);
+ expect(el._invokerNode.getAttribute('aria-expanded')).to.equal('false');
+ el.opened = true;
+ await el.updateComplete;
+ expect(el._invokerNode.getAttribute('aria-expanded')).to.equal('true');
+ });
+ });
+
+ describe('Use cases', () => {
+ it('works for complex array data', async () => {
+ const objs = [
+ { type: 'mastercard', label: 'Master Card', amount: 12000, active: true },
+ { type: 'visacard', label: 'Visa Card', amount: 0, active: false },
+ ];
+ const el = await fixture(html`
+
+
+ ${objs.map(
+ obj => html`
+ ${obj.label}
+ `,
+ )}
+
+
+ `);
+ expect(el.checkedValue).to.deep.equal({
+ type: 'mastercard',
+ label: 'Master Card',
+ amount: 12000,
+ active: true,
+ });
+
+ el.checkedIndex = 1;
+ expect(el.checkedValue).to.deep.equal({
+ type: 'visacard',
+ label: 'Visa Card',
+ amount: 0,
+ active: false,
+ });
+ });
+ });
+});
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 00329be36..dbf8e0500 100755
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -24,3 +24,6 @@ import '../packages/overlays/stories/index.stories.js';
import '../packages/popup/stories/index.stories.js';
import '../packages/tooltip/stories/index.stories.js';
import '../packages/calendar/stories/index.stories.js';
+
+import '../packages/option/stories/index.stories.js';
+import '../packages/select-rich/stories/index.stories.js';