@brightspace-ui/core 3.126.2 → 3.126.4

package/components/filter/filter.js

@@ -30,7 +30,6 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
@@ -237,6 +236,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._displayKeyboardTooltip = false;
 		this._minWidth = 285;
 		this._openedDimensions = [];
+		this._resized = false;
 		this._totalAppliedCount = 0;
 
 		this._activeFilters = null;
@@ -351,16 +351,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		super.update(changedProperties);
 	}
 
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		const search = this.shadowRoot.querySelector('d2l-input-search');
-		if (search) {
-			if (this.#resizeObserver) this.#resizeObserver.disconnect();
-			this.#resizeObserver = new ResizeObserver(() => requestAnimationFrame(() => this.#handleSearchResize()));
-			this.#resizeObserver.observe(search);
-		}
-	}
-
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
@@ -455,6 +445,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const search = dimension.searchType === 'none' ? nothing : html`
 			<d2l-input-search
 				@d2l-input-search-searched="${this._handleSearch}"
+				@d2l-input-search-layout-updated="${this.#handleSearchLayoutUpdated}"
 				?disabled="${this._isDimensionEmpty(dimension)}"
 				label="${this.localize('components.input-search.search')}"
 				value="${ifDefined(dimension.searchValue)}">
@@ -684,6 +675,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._changeEventsToDispatch = new Map();
 		clearTimeout(this._changeEventTimeout);
 		this._activeFiltersSubscribers.updateSubscribers();
+		this.#handleSearchLayoutUpdated(); // in order to update dropdown position if count-badge size changes pointer position
 	}
 
 	_dispatchChangeEventValueDataChange(dimension, value, valueKey) {
@@ -1153,7 +1145,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		}
 	}
 
-	#handleSearchResize() {
+	#handleSearchLayoutUpdated() {
 		const content = this.shadowRoot.querySelector(`.${FILTER_CONTENT_CLASS}`);
 		content.resize();
 	}

package/components/inputs/input-search.js

@@ -132,6 +132,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 			<d2l-input-text
 				label="${ifDefined(this.label)}"
 				label-hidden
+				@d2l-input-text-layout-updated="${this.#handleLayoutUpdated}"
 				description="${this.description}"
 				?disabled="${this.disabled}"
 				@input="${this._handleInput}"
@@ -213,5 +214,15 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 		return (oldVal !== val);
 	}
 
+	#handleLayoutUpdated() {
+		requestAnimationFrame(() => {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent(
+				'd2l-input-search-layout-updated',
+				{ bubbles: false, composed: false }
+			));
+		});
+	}
+
 }
 customElements.define('d2l-input-search', InputSearch);

package/components/inputs/input-select-styles.js

@@ -1,18 +1,23 @@
 import '../colors/colors.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
+
+const focusClass = unsafeCSS(getFocusPseudoClass());
 
 export const selectStyles = css`
 	.d2l-input-select {
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
+		background-color: #ffffff;
+		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
 		background-origin: border-box;
 		background-position: center right 17px;
 		background-repeat: no-repeat;
 		background-size: 11px 7px;
+		border: none;
 		border-radius: 0.3rem;
-		border-style: solid;
-		box-sizing: border-box;
+		box-shadow: inset 0 2px 0 1px rgba(177, 185, 190, 0.2); /* corundum */
 		color: var(--d2l-color-ferrite);
 		display: inline-block;
 		font-family: inherit;
@@ -23,53 +28,32 @@ export const selectStyles = css`
 		line-height: 1.2rem;
 		margin: 0;
 		max-height: calc(2rem + 2px);
+		outline: 1px solid var(--d2l-color-galena);
+		outline-offset: -1px;
+		padding-block: calc(0.4rem + 1px);
+		padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
 		vertical-align: middle;
 	}
 	:host([dir="rtl"]) .d2l-input-select {
 		background-position: center left 17px;
 	}
-	.d2l-input-select,
-	.d2l-input-select:hover:disabled {
-		background-color: #ffffff;
-		border-color: var(--d2l-color-galena);
-		border-width: 1px;
-		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
-		padding: 0.4rem 0.75rem;
-	}
-	.d2l-input-select,
-	.d2l-input-select:disabled,
-	.d2l-input-select:hover:disabled,
-	.d2l-input-select:focus:disabled {
-		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
-		padding-right: calc(2px + 0.8rem + 1px + 11px + 16px);
-	}
-	:host([dir="rtl"]) .d2l-input-select,
-	:host([dir="rtl"]) .d2l-input-select:disabled,
-	:host([dir="rtl"]) .d2l-input-select:hover:disabled,
-	:host([dir="rtl"]) .d2l-input-select:focus:disabled {
-		padding-left: calc(2px + 0.8rem + 1px + 11px + 16px);
-		padding-right: 0.75rem;
-	}
-	.d2l-input-select:hover,
-	.d2l-input-select:focus {
-		border-color: var(--d2l-color-celestine);
-		border-width: 2px;
-		outline-style: none; /* Safari */
-		outline-width: 0;
-		padding: calc(0.4rem - 1px) calc(0.75rem - 1px);
-		padding-right: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
-	}
-	:host([dir="rtl"]) .d2l-input-select:hover,
-	:host([dir="rtl"]) .d2l-input-select:focus {
-		padding-left: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
-		padding-right: calc(0.75rem - 1px);
+
+	.d2l-input-select:not([disabled]):hover,
+	.d2l-input-select:not([disabled]):${focusClass} {
+		box-shadow: inset 0 2px 0 2px rgba(177, 185, 190, 0.2); /* corundum */
+		outline: 2px solid var(--d2l-color-celestine);
+		outline-offset: -2px;
 	}
 	.d2l-input-select[aria-invalid="true"] {
 		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
 		background-position: center right 17px, center right calc(1px + 11px + 17px);
 		background-repeat: no-repeat, no-repeat;
 		background-size: 11px 7px, 0.8rem 0.8rem;
-		border-color: var(--d2l-color-cinnabar);
+	}
+	.d2l-input-select[aria-invalid="true"],
+	.d2l-input-select[aria-invalid="true"]:${focusClass},
+	.d2l-input-select[aria-invalid="true"]:hover {
+		outline-color: var(--d2l-color-cinnabar);
 	}
 	:host([dir="rtl"]) .d2l-input-select[aria-invalid="true"] {
 		background-position: center left 17px, center left calc(1px + 11px + 17px);
@@ -77,19 +61,42 @@ export const selectStyles = css`
 	.d2l-input-select:disabled {
 		opacity: 0.5;
 	}
-	/* IE11 to prevent selection styling */
-	.d2l-input-select:focus::-ms-value,
-	.d2l-input-select:hover::-ms-value {
-		background-color: transparent;
-		color: var(--d2l-color-ferrite);
-	}
-	/* IE11 to hide the native chevron */
-	.d2l-input-select::-ms-expand {
-		display: none;
-	}
-	/* Prevents dotted outline when focused in Firefox */
-	.d2l-input-select:-moz-focusring {
-		color: transparent;
-		text-shadow: 0 0 0 #000000;
+
+	@media (prefers-contrast: more) {
+		.d2l-input-select {
+			appearance: auto;
+			background-color: Field;
+			background-image: none;
+			border: none;
+			border-inline-end: 0.75rem solid transparent;
+			box-shadow: none;
+			color: FieldText;
+			forced-color-adjust: none;
+			height: 2rem;
+			outline: 1px solid FieldText;
+			padding-inline: 0.6rem 16px;
+		}
+
+		.d2l-input-select:not([disabled]):${focusClass},
+		.d2l-input-select:not([disabled]):hover {
+			box-shadow: none;
+			outline: 2px solid Highlight;
+		}
+
+		.d2l-input-select[aria-invalid="true"] {
+			background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
+			background-position: center right calc(1px + 11px + 17px);
+			background-repeat: no-repeat;
+			background-size: 0.8rem 0.8rem;
+		}
+
+		.d2l-input-select[aria-invalid="true"],
+		.d2l-input-select[aria-invalid="true"]:${focusClass},
+		.d2l-input-select[aria-invalid="true"]:hover {
+			outline-color: var(--d2l-color-cinnabar);
+		}
+		:host([dir="rtl"]) .d2l-input-select[aria-invalid="true"] {
+			background-position: center left calc(1px + 11px + 17px);
+		}
 	}
 `;

package/components/inputs/input-text.js

@@ -678,6 +678,14 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			this._lastSlotWidth = 0;
 		}
 
+		requestAnimationFrame(() => {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent(
+				'd2l-input-text-layout-updated',
+				{ bubbles: false, composed: false }
+			));
+		});
+
 	}
 
 }

package/components/menu/demo/menu.html

@@ -17,6 +17,40 @@
 	<body unresolved>
 
 		<d2l-demo-page page-title="d2l-menu">
+			<h2>Basic Menu (demo of focus bug)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<div role="menu">
+						<div role="menuitem" tabindex="0">
+							<span>Menu Item 1</span>
+						</div><div role="menuitem" tabindex="-1">
+							<span>Menu Item 2</span>
+						</div><div role="menuitem" tabindex="-1">
+							<span>Menu Item 3</span>
+						</div>
+					</div>
+				<script>
+					const menu = document.querySelector('div[role="menu"]');
+					const menuItems = menu.querySelectorAll('div[role="menuitem"]');
+
+					menuItems.forEach(item => {
+						item.addEventListener('keydown', (e) => {
+							if (e.keyCode === 40 || e.keyCode === 38) {
+								// prevent scrolling when up/down arrows pressed
+								e.preventDefault();
+								e.stopPropagation();
+								if (e.keyCode === 40) {
+									if (item.nextSibling) item.nextSibling.focus();
+								} else if (e.keyCode === 38) {
+									if (item.previousSibling) item.previousSibling.focus();
+								}
+								return;
+							}
+						});
+					});
+				</script>
+				</template>
+			</d2l-demo-snippet>
 
 			<h2>Menu</h2>
 

package/components/menu/menu-item-mixin.js

@@ -166,6 +166,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 			return;
 		}
 		this.focus();
+		this.setAttribute('tabindex', '0');
 	}
 
 	__onKeyDown(e) {

package/components/menu/menu.js

@@ -102,6 +102,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 		this.addEventListener('d2l-menu-item-visibility-change', this._onMenuItemsChanged);
 		this.addEventListener('keydown', this._onKeyDown);
 		this.addEventListener('keypress', this._onKeyPress);
+		this.addEventListener('focusout', this._onFocusOut);
 
 		this._labelChanged();
 
@@ -175,28 +176,33 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 
 	_focusFirst() {
 		const item = this._tryGetNextFocusable();
-		if (item) item.focus();
+		if (item) this._focusItem(item);
+	}
+
+	_focusItem(item) {
+		item.setAttribute('tabindex', '0');
+		item.focus();
 	}
 
 	_focusLast() {
 		const item = this._tryGetPreviousFocusable();
-		if (item) item.focus();
+		if (item) this._focusItem(item);
 	}
 
 	_focusNext(item) {
 		item = this._tryGetNextFocusable(item);
-		item ? item.focus() : this._focusFirst();
+		item ? this._focusItem(item) : this._focusFirst();
 	}
 
 	_focusPrevious(item) {
 		item = this._tryGetPreviousFocusable(item);
-		item ? item.focus() : this._focusLast();
+		item ? this._focusItem(item) : this._focusLast();
 	}
 
 	_focusSelected() {
 		const selected = this.querySelector('[selected]');
 		if (selected) {
-			selected.focus();
+			this._focusItem(selected);
 		} else {
 			this._focusFirst();
 		}
@@ -260,6 +266,13 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 		if (returnItem) returnItem.setAttribute('text', this.label);
 	}
 
+	_onFocusOut(e) {
+		e.stopPropagation();
+		const isMenuItem = e.target.role === 'menuitem' || e.target.role === 'menuitemcheckbox' || e.target.role === 'menuitemradio';
+		if (!isMenuItem || e.target.hasAttribute('first') || e.target.hasChildView) return;
+		e.target.setAttribute('tabindex', '-1');
+	}
+
 	_onKeyDown(e) {
 		const rootTarget = e.composedPath()[0];
 		if (this._items.indexOf(rootTarget) === -1) return;
@@ -321,7 +334,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 		while (itemIndex !== targetItemIndex) {
 			const item = focusableItems[itemIndex];
 			if (startsWith(item, searchChar)) {
-				item.focus();
+				this._focusItem(item);
 				return;
 			}
 			itemIndex = getNextOrFirstIndex(itemIndex);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.126.2",
+  "version": "3.126.4",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",