+
...
${this.closeTemplate}
@@ -166,9 +185,9 @@ export class Pill extends ControlElement {
* @returns true if element property pressed could be set
*/
private couldBePressed (event: Event): boolean {
- const element = this.closeElement;
+ const closeIconEl = this.closeIconRef.value;
- return !this.readonly && (!element || !event.composedPath().includes(element));
+ return !this.readonly && (!closeIconEl || !event.composedPath().includes(closeIconEl));
}
/**
diff --git a/packages/elements/src/radio-button/__test__/radio-button.test.js b/packages/elements/src/radio-button/__test__/radio-button.test.js
index 73c3446d23..f22fd8a76d 100644
--- a/packages/elements/src/radio-button/__test__/radio-button.test.js
+++ b/packages/elements/src/radio-button/__test__/radio-button.test.js
@@ -715,25 +715,22 @@ describe('radio-button/RadioButton', () => {
});
it('should pass a11y test with aria-label', async () => {
const el = await fixture(`
`);
- expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
- expect(el.ariaChecked).to.be.equal(String(el.checked), 'ariaChecked');
- expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked), 'aria-checked');
+ expect(el).to.be.accessible();
+ expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked));
});
it('should pass a11y test with slotted label', async () => {
const el = await fixture(`Radio Button`);
- expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
- expect(el.ariaChecked).to.be.equal(String(el.checked), 'ariaChecked');
- expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked), 'aria-checked');
+ expect(el).to.be.accessible();
+ expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked));
});
it('should pass a11y test when radio button is checked', async () => {
const el = await fixture(`Radio Button`);
- expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
- expect(el.ariaChecked).to.be.equal(String(el.checked), 'ariaChecked');
- expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked), 'aria-checked');
+ expect(el).to.be.accessible();
+ expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked));
});
it('should pass a11y test when disabled', async () => {
const el = await fixture(`Radio Button`);
- expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
+ expect(el).to.be.accessible();
});
});
});
diff --git a/packages/elements/src/radio-button/index.ts b/packages/elements/src/radio-button/index.ts
index e207a62e7d..4b9177f28f 100644
--- a/packages/elements/src/radio-button/index.ts
+++ b/packages/elements/src/radio-button/index.ts
@@ -83,34 +83,11 @@ export class RadioButton extends ControlElement {
`;
}
- private _checked = false;
-
/**
* Radio button checked state
- * @param value checked state
- * @default false
- * @returns {void}
*/
@property({ type: Boolean, reflect: true })
- public set checked (value: boolean) {
- const oldValue = this._checked;
- if (oldValue !== value) {
- this._checked = value;
-
- this.ariaChecked = String(value);
- void this.requestUpdate('checked', oldValue);
- }
- }
- public get checked (): boolean {
- return this._checked;
- }
-
- /**
- * Aria indicating checked state
- * @ignore
- */
- @property({ type: String, reflect: true, attribute: 'aria-checked' })
- public ariaChecked = String(this.checked);
+ public checked = false;
/**
* Getter for label
@@ -137,6 +114,19 @@ export class RadioButton extends ControlElement {
super.disconnectedCallback();
}
+ /**
+ * Called before update() to compute values needed during the update.
+ * @param changedProperties Properties that has changed
+ * @returns {void}
+ */
+ protected willUpdate (changedProperties: PropertyValues): void {
+ super.willUpdate(changedProperties);
+
+ if (changedProperties.has('checked')) {
+ this.setAttribute('aria-checked', String(this.checked));
+ }
+ }
+
/**
* Invoked whenever the element is updated
* @param changedProperties changed properties
diff --git a/packages/elements/src/select/__test__/select.events.test.js b/packages/elements/src/select/__test__/select.events.test.js
index 2432540bec..c76441ef7d 100644
--- a/packages/elements/src/select/__test__/select.events.test.js
+++ b/packages/elements/src/select/__test__/select.events.test.js
@@ -1,5 +1,5 @@
import { fixture, expect, elementUpdated, nextFrame, keyboardEvent, triggerFocusFor, isIE } from '@refinitiv-ui/test-helpers';
-import { getOptions, openedUpdated, getData } from './utils';
+import { getOptions, openedUpdated, getData, getMenuEl } from './utils';
import '@refinitiv-ui/elements/select';
import '@refinitiv-ui/elemental-theme/light/ef-select';
@@ -173,7 +173,7 @@ describe('select/Events', () => {
el.opened = true;
await openedUpdated(el);
const key = closeEvents[i];
- el.menuEl.dispatchEvent(keyboardEvent('keydown', { key }));
+ getMenuEl(el).dispatchEvent(keyboardEvent('keydown', { key }));
await openedUpdated(el);
expect(counter).to.equal(i + 1, `opened-changed should fire for "${key}"`);
expect(opened).to.equal(false, `opened-changed did not pass correct value for "${key}"`);
@@ -247,7 +247,7 @@ describe('select/Events', () => {
el.setItemHighlight(options[1]); // AF
await nextFrame();
const key = valueChangedEvents[i];
- el.menuEl.dispatchEvent(keyboardEvent('keydown', { key }));
+ getMenuEl(el).dispatchEvent(keyboardEvent('keydown', { key }));
await openedUpdated(el);
expect(counter).to.equal(i + 1, `value-changed should fire when item selected for "${key}"`);
expect(changedValue).to.equal('AF', `value-changed detail: value should pass the selected value for "${key}"`);
diff --git a/packages/elements/src/select/__test__/select.navigation.test.js b/packages/elements/src/select/__test__/select.navigation.test.js
index 42eeabf740..545e22a9fa 100644
--- a/packages/elements/src/select/__test__/select.navigation.test.js
+++ b/packages/elements/src/select/__test__/select.navigation.test.js
@@ -1,8 +1,8 @@
import { fixture, expect, elementUpdated, aTimeout, nextFrame, isIE, keyboardEvent as fireKeyBoardEvent } from '@refinitiv-ui/test-helpers';
-import { getOptions, openedUpdated, getData } from './utils';
+import { getOptions, openedUpdated, getData, getMenuEl } from './utils';
const keyBoardEvent = async (el, key, options = {}) => {
- el.menuEl.dispatchEvent(fireKeyBoardEvent('keydown', Object.assign({ key }, options)));
+ getMenuEl(el).dispatchEvent(fireKeyBoardEvent('keydown', Object.assign({ key }, options)));
await elementUpdated(el);
await nextFrame();
await nextFrame(); // need this for IE11 to ensure focus is set
@@ -64,7 +64,7 @@ describe('select/Navigation', () => {
el.data = getData();
el.value = 'AL';
await openedUpdated(el);
- expect(el.menuEl.querySelector('[highlighted]').value).to.equal('AL', 'Selected value should be highlighted by default');
+ expect(getMenuEl(el).querySelector('[highlighted]').value).to.equal('AL', 'Selected value should be highlighted by default');
});
it('Options: Up key', async () => {
const el = await fixture(`${getOptions()}`);
@@ -73,7 +73,7 @@ describe('select/Navigation', () => {
it('Data: Up key', async () => {
const el = await fixture('');
el.data = getData();
- await iterate(el, el.menuEl, ['Up', 'Up', 'Up', 'Up', 'ArrowUp'], [4, 2, 1, 4, 2]);
+ await iterate(el, getMenuEl(el), ['Up', 'Up', 'Up', 'Up', 'ArrowUp'], [4, 2, 1, 4, 2]);
});
it('Options: Down key', async () => {
const el = await fixture(`${getOptions()}`);
@@ -82,7 +82,7 @@ describe('select/Navigation', () => {
it('Data: Down key', async () => {
const el = await fixture('');
el.data = getData();
- await iterate(el, el.menuEl, ['Down', 'Down', 'Down', 'Down', 'ArrowDown'], [1, 2, 4, 1, 2]);
+ await iterate(el, getMenuEl(el), ['Down', 'Down', 'Down', 'Down', 'ArrowDown'], [1, 2, 4, 1, 2]);
});
it('Options: Tab key', async () => {
const el = await fixture(`${getOptions()}`);
@@ -91,7 +91,7 @@ describe('select/Navigation', () => {
it('Data: Tab key', async () => {
const el = await fixture('');
el.data = getData();
- await iterate(el, el.menuEl, ['Tab', 'Tab', 'Tab', 'Tab'], [1, 2, 4, 1]);
+ await iterate(el, getMenuEl(el), ['Tab', 'Tab', 'Tab', 'Tab'], [1, 2, 4, 1]);
});
it('Options: Shift+Tab key', async () => {
const el = await fixture(`${getOptions()}`);
@@ -102,7 +102,7 @@ describe('select/Navigation', () => {
it('Data: Shift+Tab key', async () => {
const el = await fixture('');
el.data = getData();
- await iterate(el, el.menuEl, ['Tab', 'Tab', 'Tab', 'Tab'], [4, 2, 1, 4], {
+ await iterate(el, getMenuEl(el), ['Tab', 'Tab', 'Tab', 'Tab'], [4, 2, 1, 4], {
shiftKey: true
});
});
@@ -113,7 +113,7 @@ describe('select/Navigation', () => {
it('Data: Home key', async () => {
const el = await fixture('');
el.data = getData();
- await iterate(el, el.menuEl, ['Tab', 'Tab', 'Home'], [1, 2, 1]);
+ await iterate(el, getMenuEl(el), ['Tab', 'Tab', 'Home'], [1, 2, 1]);
});
it('Options: End key', async () => {
const el = await fixture(`${getOptions()}`);
@@ -122,7 +122,7 @@ describe('select/Navigation', () => {
it('Data: End key', async () => {
const el = await fixture('');
el.data = getData();
- await iterate(el, el.menuEl, ['End'], [4]);
+ await iterate(el, getMenuEl(el), ['End'], [4]);
});
});
@@ -134,7 +134,7 @@ describe('select/Navigation', () => {
it('Date: Mouse move event highlights the item', async () => {
const el = await fixture('');
el.data = getData();
- await emulateMouseMove(el, el.menuEl);
+ await emulateMouseMove(el, getMenuEl(el));
});
});
@@ -176,7 +176,7 @@ describe('select/Navigation', () => {
it('Date: quick search highlights the item', async () => {
const el = await fixture('');
el.data = getData();
- await emulateQuickSearch(el, el.menuEl);
+ await emulateQuickSearch(el, getMenuEl(el));
});
});
});
diff --git a/packages/elements/src/select/__test__/select.template.test.js b/packages/elements/src/select/__test__/select.template.test.js
index ad38b51c4c..df5f3417ac 100644
--- a/packages/elements/src/select/__test__/select.template.test.js
+++ b/packages/elements/src/select/__test__/select.template.test.js
@@ -1,5 +1,5 @@
import { fixture, expect, elementUpdated, isIE } from '@refinitiv-ui/test-helpers';
-import { getData, getOptions, openedUpdated, snapshotIgnore } from './utils';
+import { getData, getMenuEl, getOptions, openedUpdated, snapshotIgnore } from './utils';
import '@refinitiv-ui/elements/select';
import '@refinitiv-ui/elemental-theme/light/ef-select';
@@ -29,12 +29,12 @@ describe('select/Template', () => {
el.opened = true;
await openedUpdated(el);
expect(el.hasAttribute('opened')).to.equal(true, 'opened attribute is not reflected');
- expect(el.menuEl.hasAttribute('opened')).to.equal(true, 'opened attribute is not reflected on popup');
+ expect(getMenuEl(el).hasAttribute('opened')).to.equal(true, 'opened attribute is not reflected on popup');
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
el.opened = false;
await elementUpdated(el);
expect(el.hasAttribute('opened')).to.equal(false, 'opened attribute is not reflected');
- expect(el.menuEl.hasAttribute('opened')).to.equal(false, 'opened attribute is not reflected on popup');
+ expect(getMenuEl(el).hasAttribute('opened')).to.equal(false, 'opened attribute is not reflected on popup');
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
@@ -46,12 +46,12 @@ describe('select/Template', () => {
el.opened = true;
await openedUpdated(el);
expect(el.hasAttribute('opened')).to.equal(true, 'opened attribute is not reflected');
- expect(el.menuEl.hasAttribute('opened')).to.equal(true, 'opened attribute is not reflected on popup');
+ expect(getMenuEl(el).hasAttribute('opened')).to.equal(true, 'opened attribute is not reflected on popup');
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
el.opened = false;
await elementUpdated(el);
expect(el.hasAttribute('opened')).to.equal(false, 'opened attribute is not reflected');
- expect(el.menuEl.hasAttribute('opened')).to.equal(false, 'opened attribute is not reflected on popup');
+ expect(getMenuEl(el).hasAttribute('opened')).to.equal(false, 'opened attribute is not reflected on popup');
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
@@ -78,7 +78,7 @@ describe('select/Template', () => {
const el = await fixture(`${getOptions()}`);
await openedUpdated(el);
- const styles = window.getComputedStyle(el.menuEl);
+ const styles = window.getComputedStyle(getMenuEl(el));
expect(styles.maxWidth).to.equal('50px', 'CSS Variable is not passed');
expect(styles.minWidth).to.equal('0px', 'min width is not reset');
});
diff --git a/packages/elements/src/select/__test__/select.value.test.js b/packages/elements/src/select/__test__/select.value.test.js
index b534463835..b823909899 100644
--- a/packages/elements/src/select/__test__/select.value.test.js
+++ b/packages/elements/src/select/__test__/select.value.test.js
@@ -1,5 +1,5 @@
import { fixture, expect, elementUpdated } from '@refinitiv-ui/test-helpers';
-import { getData, getOptions, openedUpdated, snapshotIgnore } from './utils';
+import { getData, getMenuEl, getOptions, openedUpdated, snapshotIgnore } from './utils';
import '@refinitiv-ui/elements/select';
import '@refinitiv-ui/elemental-theme/light/ef-select';
@@ -39,17 +39,17 @@ describe('select/Value', () => {
el.data = getData();
await openedUpdated(el);
expect(el.value).to.equal('AF', 'Value getter does not get correct value');
- expect(el.menuEl.querySelector('ef-item[selected]').value).to.equal('AF', 'Item is not selected from value');
+ expect(getMenuEl(el).querySelector('ef-item[selected]').value).to.equal('AF', 'Item is not selected from value');
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
el.value = 'AL';
await elementUpdated(el);
expect(el.value).to.equal('AL', 'Value is not reflected from selected attribute');
- expect(el.menuEl.querySelector('ef-item[selected]').value).to.equal('AL', 'Item is not selected from value');
+ expect(getMenuEl(el).querySelector('ef-item[selected]').value).to.equal('AL', 'Item is not selected from value');
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
el.value = '';
await elementUpdated(el);
expect(el.value).to.equal('', 'Value is not reflected from selected attribute');
- expect(el.menuEl.querySelector('ef-item[selected]')).to.equal(null, 'Selected item is not reset');
+ expect(getMenuEl(el).querySelector('ef-item[selected]')).to.equal(null, 'Selected item is not reset');
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
});
diff --git a/packages/elements/src/select/__test__/utils.js b/packages/elements/src/select/__test__/utils.js
index c1bb20b112..aef120e460 100644
--- a/packages/elements/src/select/__test__/utils.js
+++ b/packages/elements/src/select/__test__/utils.js
@@ -51,3 +51,8 @@ export const getOptions = (selected = [], disabled = [], readonly = []) => {
});
return options.join('');
};
+
+/**
+ * Get private menu element property
+ */
+export const getMenuEl = select => select.menuRef.value;
diff --git a/packages/elements/src/select/index.ts b/packages/elements/src/select/index.ts
index f8441c5e08..7bc8d634fe 100644
--- a/packages/elements/src/select/index.ts
+++ b/packages/elements/src/select/index.ts
@@ -11,8 +11,8 @@ import {
} from '@refinitiv-ui/core';
import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { createRef, ref, Ref } from '@refinitiv-ui/core/directives/ref.js';
import { VERSION } from '../version.js';
import '../overlay/index.js';
import '../item/index.js';
@@ -20,6 +20,8 @@ import '../icon/index.js';
import { Item } from '../item/index.js';
import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
import { TimeoutTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
import type { Overlay } from '../overlay';
import type { SelectData, SelectDataItem } from './helpers/types';
import type { OpenedChangedEvent } from '../events';
@@ -297,8 +299,15 @@ export class Select extends ControlElement implements MultiValue {
return this.selectedSlotItems.map(item => this.getItemValue(item));
}
- @query('#menu')
- private menuEl?: Overlay;
+ /**
+ * Reference to the menu element
+ */
+ private menuRef: Ref = createRef();
+
+ /**
+ * Reference to the label element
+ */
+ private labelRef: Ref = createRef();
/**
* Called when connected to DOM
@@ -357,6 +366,9 @@ export class Select extends ControlElement implements MultiValue {
protected firstUpdated (changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties);
this.addEventListener('keydown', this.onKeyDown); /* keydown when select is closed */
+ registerOverflowTooltip(this,
+ () => this.labelText,
+ () => this.labelRef.value ? isElementOverflown(this.labelRef.value) : false);
}
/**
@@ -605,7 +617,10 @@ export class Select extends ControlElement implements MultiValue {
* @returns {void}
*/
private onPopupMouseMove (event: MouseEvent): void {
- this.menuEl?.focus();
+ if (this.menuRef.value) {
+ this.menuRef.value.focus();
+ }
+
const item = this.findSelectableElement(event);
if (item) {
this.setItemHighlight(item);
@@ -800,7 +815,7 @@ export class Select extends ControlElement implements MultiValue {
* @returns A list of selectable HTML elements
*/
private getSelectableElements (): Item[] {
- const root = this.hasDataItems() ? this.menuEl : this;
+ const root = this.hasDataItems() ? this.menuRef.value : this;
/* istanbul ignore next */
if (!root) {
@@ -955,6 +970,14 @@ export class Select extends ControlElement implements MultiValue {
return this.getSelectedElements();
}
+ /**
+ * Get text for labels
+ * @returns Label
+ */
+ private get labelText (): string {
+ return this.multiple ? this.labels.join(LABEL_SEPARATOR) : this.label;
+ }
+
/**
* Calculating whether the placeholder should be hidden
* @returns result
@@ -1001,7 +1024,7 @@ export class Select extends ControlElement implements MultiValue {
* Template for label
*/
private get labelTemplate (): TemplateResult {
- return html`${this.multiple ? this.labels.join(LABEL_SEPARATOR) : this.label}
`;
+ return html`${this.labelText}
`;
}
/**
@@ -1036,6 +1059,7 @@ export class Select extends ControlElement implements MultiValue {
private get popupTemplate (): TemplateResult | undefined {
if (this.lazyRendered) {
return html`