@vaadin/component-base - npm Package Compare versions

index.d.ts

		@@ -9,4 +9,5 @@ export { ActiveMixin } from './src/active-mixin.js';
		export { KeyboardMixin } from './src/keyboard-mixin.js';
		export { ResizeMixin } from './src/resize-mixin.js';
		export { SlotController } from './src/slot-controller.js';
		export { SlotMixin } from './src/slot-mixin.js';
		export { TabindexMixin } from './src/tabindex-mixin.js';

package.json

src/a11y-announcer.d.ts

		@@ -10,2 +10,2 @@ /**
		*/
		export function announce(text: string, options?: { mode?: 'polite' \| 'assertive'; timeout?: number }): void;
		export function announce(text: string, options?: { mode?: 'polite' \| 'assertive' \| 'alert'; timeout?: number }): void;

src/a11y-announcer.js

		@@ -7,2 +7,5 @@ /**

		import { animationFrame } from '@vaadin/component-base/src/async.js';
		import { Debouncer } from '@vaadin/component-base/src/debounce.js';

		const region = document.createElement('div');
		@@ -16,2 +19,3 @@

		let alertDebouncer;
		/**
		@@ -27,3 +31,15 @@ * Cause a text string to be announced by screen readers.

		region.setAttribute('aria-live', mode);
		if (mode === 'alert') {
		region.removeAttribute('aria-live');
		region.removeAttribute('role');
		alertDebouncer = Debouncer.debounce(alertDebouncer, animationFrame, () => {
		region.setAttribute('role', 'alert');
		});
		} else {
		if (alertDebouncer) {
		alertDebouncer.cancel();
		}
		region.removeAttribute('role');
		region.setAttribute('aria-live', mode);
		}

		@@ -30,0 +46,0 @@ region.textContent = '';

src/element-mixin.js

src/focus-trap-controller.js

		@@ -137,4 +137,5 @@ /**
		get __focusedElementIndex() {
		return this.__focusableElements.findIndex(isElementFocused);
		const focusableElements = this.__focusableElements;
		return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
		}
		}

src/focus-utils.js

		@@ -42,3 +42,3 @@ /**
		function normalizeTabIndex(element) {
		if (!isElementFocusable(element) \|\| isElementHiddenDirectly(element)) {
		if (!isElementFocusable(element)) {
		return -1;
		@@ -120,4 +120,4 @@ }
		function collectFocusableNodes(node, result) {
		if (node.nodeType !== Node.ELEMENT_NODE) {
		// Don't traverse children if the node is not an HTML element.
		if (node.nodeType !== Node.ELEMENT_NODE \|\| isElementHiddenDirectly(node)) {
		// Don't traverse children if the node is not an HTML element or not visible.
		return false;
		@@ -124,0 +124,0 @@ }

src/slot-controller.js

		@@ -6,2 +6,3 @@ /**
		*/
		import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
		import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
		@@ -34,6 +35,9 @@

		// Support dash-case slot names e.g. "error-message"
		const field = `${dashToCamelCase(prefix)}Id`;

		// Maintain the unique ID counter for a given prefix.
		this[`${prefix}Id`] = 1 + this[`${prefix}Id`] \|\| 0;
		this[field] = 1 + this[field] \|\| 0;

		return `${prefix}-${host.localName}-${this[`${prefix}Id`]}`;
		return `${prefix}-${host.localName}-${this[field]}`;
		}
		@@ -40,0 +44,0 @@

src/tabindex-mixin.js

		@@ -59,3 +59,5 @@ /**
		if (disabled) {
		this.__lastTabIndex = this.tabindex;
		if (this.tabindex !== undefined) {
		this.__lastTabIndex = this.tabindex;
		}
		this.tabindex = -1;
		@@ -62,0 +64,0 @@ } else if (oldDisabled) {

New alerts