@brightspace-ui/core 2.134.0 → 2.136.0

package/components/inputs/input-text.js

@@ -329,17 +329,21 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		if (this.hasAttribute('aria-label')) {
 			this.labelRequired = false;
 		}
+		this.addEventListener('mouseover', this._handleMouseEnter);
+		this.addEventListener('mouseout', this._handleMouseLeave);
+		this.addEventListener('click', this._handleClick);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
 		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
+		this.removeEventListener('mouseover', this._handleMouseEnter);
+		this.removeEventListener('mouseout', this._handleMouseLeave);
+		this.removeEventListener('click', this._handleClick);
 		if (!container) return;
 		container.removeEventListener('blur', this._handleBlur, true);
 		container.removeEventListener('focus', this._handleFocus, true);
-		container.removeEventListener('mouseover', this._handleMouseEnter);
-		container.removeEventListener('mouseout', this._handleMouseLeave);
 	}
 
 	firstUpdated(changedProperties) {
@@ -352,8 +356,6 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		if (!container) return;
 		container.addEventListener('blur', this._handleBlur, true);
 		container.addEventListener('focus', this._handleFocus, true);
-		container.addEventListener('mouseover', this._handleMouseEnter);
-		container.addEventListener('mouseout', this._handleMouseLeave);
 
 		// if initially hidden then update layout when it becomes visible
 		if (typeof(IntersectionObserver) === 'function') {
@@ -542,6 +544,12 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		));
 	}
 
+	_handleClick(e) {
+		const input = this.shadowRoot?.querySelector('.d2l-input');
+		if (!input || e.composedPath()[0] !== this) return;
+		input.focus();
+	}
+
 	_handleFocus() {
 		this._focused = true;
 	}

package/components/inputs/input-textarea.js

@@ -1,5 +1,6 @@
 import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
@@ -86,7 +87,8 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 			 * Value of the input
 			 * @type {string}
 			 */
-			value: { type: String }
+			value: { type: String },
+			_hovered: { state: true }
 		};
 	}
 
@@ -157,6 +159,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		this.value = '';
 
 		this._descriptionId = getUniqueId();
+		this._hovered = false;
 		this._textareaId = getUniqueId();
 	}
 
@@ -192,6 +195,16 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		if (this.hasAttribute('aria-label')) {
 			this.labelRequired = false;
 		}
+		this.addEventListener('mouseover', this._handleMouseEnter);
+		this.addEventListener('mouseout', this._handleMouseLeave);
+		this.addEventListener('click', this._handleClick);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('mouseover', this._handleMouseEnter);
+		this.removeEventListener('mouseout', this._handleMouseLeave);
+		this.removeEventListener('click', this._handleClick);
 	}
 
 	render() {
@@ -211,6 +224,11 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		if (this.rows > 0) mirrorStyles.minHeight = `calc(${this.rows + 1}rem + 2px)`;
 		if (this.maxRows > 0) mirrorStyles.maxHeight = `calc(${this.maxRows + 1}rem + 2px)`;
 
+		const inputClasses = {
+			'd2l-input': true,
+			'd2l-input-focus': !this.disabled && this._hovered
+		};
+
 		const textarea = html`
 			<div class="d2l-input-textarea-container d2l-skeletize">
 				<div class="d2l-input d2l-input-textarea-mirror" style="${styleMap(mirrorStyles)}" aria-invalid="${ifDefined(ariaInvalid)}">
@@ -222,7 +240,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 					aria-required="${ifDefined(ariaRequired)}"
 					@blur="${this._handleBlur}"
 					@change="${this._handleChange}"
-					class="d2l-input"
+					class=${classMap(inputClasses)}
 					?disabled="${disabled}"
 					id="${this._textareaId}"
 					@input="${this._handleInput}"
@@ -307,6 +325,12 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		));
 	}
 
+	_handleClick(e) {
+		const input = this.shadowRoot && this.shadowRoot.querySelector('textarea');
+		if (!input || e.composedPath()[0] !== this) return;
+		input.focus();
+	}
+
 	_handleInput(e) {
 		this.value = e.target.value;
 		return true;
@@ -316,6 +340,14 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		e.preventDefault();
 	}
 
+	_handleMouseEnter() {
+		this._hovered = true;
+	}
+
+	_handleMouseLeave() {
+		this._hovered = false;
+	}
+
 }
 
 customElements.define('d2l-input-textarea', InputTextArea);

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

@@ -683,7 +683,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		return html`
 			<div>${this.localize('components.list-item-tooltip.title')}</div>
 			<ul>
-				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.enter-key')}</span> - ${this.localize('components.list-item-tooltip.enter-desc')}</li>
 				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-tooltip.up-down-desc')}</li>
 				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-tooltip.left-right-desc')}</li>
 				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.page-up-down-key')}</span> - ${this.localize('components.list-item-tooltip.page-up-down-desc')}</li>

package/lang/ar.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "إعادة ترتيب إجراء المادة لـ {name}",
 	"components.list-item-drag-handle.keyboard": "إعادة ترتيب المواد، الموضع الحالي {currentPosition} من أصل {size}. لنقل هذه المادة، اضغط على السهم المتجه إلى أعلى أو السهم المتجه إلى أسفل.",
 	"components.list-item-tooltip.title": "التنقل عبر لوحة المفاتيح للقوائم:",
-	"components.list-item-tooltip.enter-key": "إدخال",
-	"components.list-item-tooltip.enter-desc": "تنشيط خيار التركيز.",
 	"components.list-item-tooltip.up-down-key": "أعلى/أسفل",
 	"components.list-item-tooltip.up-down-desc": "نقل التركيز بين مواد القائمة.",
 	"components.list-item-tooltip.left-right-key": "يسار/يمين",

package/lang/cy.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Aildrefnu gweithred eitem ar gyfer {name}",
 	"components.list-item-drag-handle.keyboard": "Aildrefnu eitemau, safle presennol {currentPosition} allan o {size}. I symud yr eitem hon, pwyswch y saeth i fyny neu'r saeth i lawr.",
 	"components.list-item-tooltip.title": "Llywio Bysellfwrdd ar gyfer Rhestrau:",
-	"components.list-item-tooltip.enter-key": "Nodi",
-	"components.list-item-tooltip.enter-desc": "Gweithredu'r opsiwn ffocysu.",
 	"components.list-item-tooltip.up-down-key": "I Fyny/I Lawr",
 	"components.list-item-tooltip.up-down-desc": "Symud y ffocws rhwng eitemau rhestr.",
 	"components.list-item-tooltip.left-right-key": "Chwith/De",

package/lang/da.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Omarranger elementhandling for {name}",
 	"components.list-item-drag-handle.keyboard": "Omarranger element, aktuel position {currentPosition} ud af {size}. For at flytte dette element skal du trykke på pil op eller pil ned.",
 	"components.list-item-tooltip.title": "Tastaturnavigering for lister:",
-	"components.list-item-tooltip.enter-key": "Indtast",
-	"components.list-item-tooltip.enter-desc": "Aktivér den fokuserede indstilling.",
 	"components.list-item-tooltip.up-down-key": "Op/ned",
 	"components.list-item-tooltip.up-down-desc": "Flyt fokus mellem listeelementer.",
 	"components.list-item-tooltip.left-right-key": "Venstre/højre",

package/lang/de.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Elementaktion für {name} neu anordnen",
 	"components.list-item-drag-handle.keyboard": "Elemente neu anordnen; aktuelle Position: {currentPosition} von {size}. Drücken Sie zum Bewegen dieses Elements auf den Pfeil nach oben oder den Pfeil nach unten.",
 	"components.list-item-tooltip.title": "Tastaturnavigation für Listen:",
-	"components.list-item-tooltip.enter-key": "Eingabe",
-	"components.list-item-tooltip.enter-desc": "Die fokussierte Option aktivieren.",
 	"components.list-item-tooltip.up-down-key": "Nach oben/unten",
 	"components.list-item-tooltip.up-down-desc": "Fokus zwischen Listeneinträgen verschieben.",
 	"components.list-item-tooltip.left-right-key": "Links/Rechts",

package/lang/en-gb.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Reorder item action for {name}",
 	"components.list-item-drag-handle.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press up or down arrows.",
 	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
-	"components.list-item-tooltip.enter-key": "Enter",
-	"components.list-item-tooltip.enter-desc": "Activate the focused option.",
 	"components.list-item-tooltip.up-down-key": "Up/Down",
 	"components.list-item-tooltip.up-down-desc": "Move focus between list items.",
 	"components.list-item-tooltip.left-right-key": "Left/Right",

package/lang/en.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Reorder item action for {name}",
 	"components.list-item-drag-handle.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press up or down arrows.",
 	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
-	"components.list-item-tooltip.enter-key": "Enter",
-	"components.list-item-tooltip.enter-desc": "Activate the focused option.",
 	"components.list-item-tooltip.up-down-key": "Up/Down",
 	"components.list-item-tooltip.up-down-desc": "Move focus between list items.",
 	"components.list-item-tooltip.left-right-key": "Left/Right",

package/lang/es-es.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Reordenar acción de elemento para {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar elementos, posición actual {currentPosition} de {size}. Para mover este elemento, pulse las flechas arriba o abajo.",
 	"components.list-item-tooltip.title": "Navegación de listas con el teclado:",
-	"components.list-item-tooltip.enter-key": "Intro",
-	"components.list-item-tooltip.enter-desc": "Activar la opción seleccionada.",
 	"components.list-item-tooltip.up-down-key": "Arriba/abajo",
 	"components.list-item-tooltip.up-down-desc": "Mover el enfoque entre los elementos de la lista.",
 	"components.list-item-tooltip.left-right-key": "Izquierda/derecha",

package/lang/es.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Acción de reordenar elemento de {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar elemento, posición actual {currentPosition} de {size}. Para mover este elemento, presione las flechas hacia arriba o hacia abajo.",
 	"components.list-item-tooltip.title": "Navegación con el teclado para listas:",
-	"components.list-item-tooltip.enter-key": "Ingresar",
-	"components.list-item-tooltip.enter-desc": "Activar la opción enfocada.",
 	"components.list-item-tooltip.up-down-key": "Arriba/abajo",
 	"components.list-item-tooltip.up-down-desc": "Mover el enfoque entre los elementos de la lista.",
 	"components.list-item-tooltip.left-right-key": "Izquierda/derecha",

package/lang/fr-fr.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Action de réorganisation de l'élément pour {name}",
 	"components.list-item-drag-handle.keyboard": "Réordonner les éléments, position actuelle {currentPosition} sur {size}. Pour déplacer cet élément, appuyez sur les flèches vers le haut ou vers le bas.",
 	"components.list-item-tooltip.title": "Navigation au clavier pour les listes :",
-	"components.list-item-tooltip.enter-key": "Saisir",
-	"components.list-item-tooltip.enter-desc": "Activez l'option ciblée.",
 	"components.list-item-tooltip.up-down-key": "Haut/bas",
 	"components.list-item-tooltip.up-down-desc": "Déplacez le focus entre les éléments de la liste.",
 	"components.list-item-tooltip.left-right-key": "Gauche/droite",

package/lang/fr.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Réordonner l'action de l'élément pour {name}",
 	"components.list-item-drag-handle.keyboard": "Réorganiser les éléments, position actuelle {currentPosition} de {size}. Pour déplacer cet élément, utilisez les flèches vers le haut et vers le bas.",
 	"components.list-item-tooltip.title": "Navigation au clavier pour les listes :",
-	"components.list-item-tooltip.enter-key": "Entrée",
-	"components.list-item-tooltip.enter-desc": "Activer l'option de mise au point.",
 	"components.list-item-tooltip.up-down-key": "Haut/bas",
 	"components.list-item-tooltip.up-down-desc": "Déplacer la priorité entre les éléments d'une liste.",
 	"components.list-item-tooltip.left-right-key": "Gauche/droite",

package/lang/hi.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "{name} के लिए आइटम कार्रवाई का क्रम बदलें",
 	"components.list-item-drag-handle.keyboard": "आइटम का क्रम बदलें, {size} में से वर्तमान स्थिति {currentPosition} इस आइटम को ले जाने के लिए, ऊपर या नीचे तीर दबाएँ।",
 	"components.list-item-tooltip.title": "सूचियों के लिए कीबोर्ड नेविगेशन:",
-	"components.list-item-tooltip.enter-key": "डालें",
-	"components.list-item-tooltip.enter-desc": "फ़ोकस किए गए विकल्प को सक्रिय करें।",
 	"components.list-item-tooltip.up-down-key": "ऊपर/नीचे",
 	"components.list-item-tooltip.up-down-desc": "सूची के आइटम के बीच फोकस ले जाएँ।",
 	"components.list-item-tooltip.left-right-key": "बायाँ/दायाँ",

package/lang/ja.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "{name} の項目並べ替えアクション",
 	"components.list-item-drag-handle.keyboard": "項目の並べ替え、現在の位置 {currentPosition}、サイズ {size}。この項目を移動するには、上矢印または下矢印を押します。",
 	"components.list-item-tooltip.title": "リストのキーボードナビゲーション:",
-	"components.list-item-tooltip.enter-key": "入力",
-	"components.list-item-tooltip.enter-desc": "フォーカスされたオプションを有効化します。",
 	"components.list-item-tooltip.up-down-key": "上/下",
 	"components.list-item-tooltip.up-down-desc": "リストの項目間でフォーカスを移動します。",
 	"components.list-item-tooltip.left-right-key": "左/右",

package/lang/ko.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "{name}에 대한 항목 작업 재정렬",
 	"components.list-item-drag-handle.keyboard": "전체 {size}에서 현재 위치 {currentPosition} 항목 재정렬 이 항목을 이동하라면 위쪽 또는 아래쪽 화살표를 누르십시오.",
 	"components.list-item-tooltip.title": "목록에 대한 키보드 탐색:",
-	"components.list-item-tooltip.enter-key": "입력",
-	"components.list-item-tooltip.enter-desc": "포커스 옵션을 활성화합니다.",
 	"components.list-item-tooltip.up-down-key": "위로/아래로",
 	"components.list-item-tooltip.up-down-desc": "목록 항목 간에 포커스를 이동합니다.",
 	"components.list-item-tooltip.left-right-key": "왼쪽/오른쪽",

package/lang/nl.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Itemactie voor {name} opnieuw rangschikken",
 	"components.list-item-drag-handle.keyboard": "Items opnieuw rangschikken, huidige positie {currentPosition} van {size}. Als u dit item wilt verplaatsen, drukt u op de pijl omhoog of omlaag.",
 	"components.list-item-tooltip.title": "Toetsenbordnavigatie voor lijsten:",
-	"components.list-item-tooltip.enter-key": "Invoeren",
-	"components.list-item-tooltip.enter-desc": "Activeer de optie met focus.",
 	"components.list-item-tooltip.up-down-key": "Omhoog/omlaag",
 	"components.list-item-tooltip.up-down-desc": "Verplaats focus tussen lijstitems.",
 	"components.list-item-tooltip.left-right-key": "Links/rechts",

package/lang/pt.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Reordenar ação de item para {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar item, posição atual {currentPosition} de {size}. Para mover este item, pressione as setas para cima ou para baixo.",
 	"components.list-item-tooltip.title": "Navegação do teclado para listas:",
-	"components.list-item-tooltip.enter-key": "Inserir",
-	"components.list-item-tooltip.enter-desc": "Ativar a opção focalizada.",
 	"components.list-item-tooltip.up-down-key": "Para cima/para baixo",
 	"components.list-item-tooltip.up-down-desc": "Mova o foco entre os itens da lista.",
 	"components.list-item-tooltip.left-right-key": "Esquerda/direita",

package/lang/sv.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "Åtgärd för att ändra ordning på objekt för {name}",
 	"components.list-item-drag-handle.keyboard": "Flytta objekt. Aktuell position: {currentPosition} av {size}. Om du vill flytta det här objektet trycker du på uppåt- eller nedåtpilen.",
 	"components.list-item-tooltip.title": "Tangentbordsnavigering för listor:",
-	"components.list-item-tooltip.enter-key": "Ange",
-	"components.list-item-tooltip.enter-desc": "Aktivera alternativet Fokuserat.",
 	"components.list-item-tooltip.up-down-key": "Upp/ned",
 	"components.list-item-tooltip.up-down-desc": "Flytta fokus mellan listobjekt.",
 	"components.list-item-tooltip.left-right-key": "Vänster/höger",

package/lang/tr.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "{name} için öğe eylemini yeniden sırala",
 	"components.list-item-drag-handle.keyboard": "Öğeyi yeniden sırala, mevcut konum {currentPosition} / {size}. Bu öğeyi taşımak için yukarı veya aşağı oklara basın.",
 	"components.list-item-tooltip.title": "Listeler için Klavye ile Gezinme:",
-	"components.list-item-tooltip.enter-key": "Gir",
-	"components.list-item-tooltip.enter-desc": "Odaklanmış seçeneğini etkinleştirin.",
 	"components.list-item-tooltip.up-down-key": "Yukarı/Aşağı",
 	"components.list-item-tooltip.up-down-desc": "Odağı liste öğeleri arasında taşıyın.",
 	"components.list-item-tooltip.left-right-key": "Sol/Sağ",

package/lang/zh-cn.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "对 {name} 的项目操作重新排序",
 	"components.list-item-drag-handle.keyboard": "对项目重新排序，当前位置 {currentPosition} 超出 {size}。要移动此项目，请按向上或向下箭头。",
 	"components.list-item-tooltip.title": "列表的键盘导航：",
-	"components.list-item-tooltip.enter-key": "输入",
-	"components.list-item-tooltip.enter-desc": "激活聚焦选项。",
 	"components.list-item-tooltip.up-down-key": "向上/向下",
 	"components.list-item-tooltip.up-down-desc": "在列表项之间移动焦点。",
 	"components.list-item-tooltip.left-right-key": "向左/向右",

package/lang/zh-tw.js

@@ -70,8 +70,6 @@ export default {
 	"components.list-item-drag-handle.default": "重新排序 {name} 的項目動作",
 	"components.list-item-drag-handle.keyboard": "重新排序項目，目前位置 {currentPosition}，總共為 {size}。若要移除這個項目，請按向上或向下箭頭。",
 	"components.list-item-tooltip.title": "清單的鍵盤導覽：",
-	"components.list-item-tooltip.enter-key": "輸入",
-	"components.list-item-tooltip.enter-desc": "啟動聚焦選項。",
 	"components.list-item-tooltip.up-down-key": "上 / 下",
 	"components.list-item-tooltip.up-down-desc": "在清單項目之間移動焦點。",
 	"components.list-item-tooltip.left-right-key": "左 / 右",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.134.0",
+  "version": "2.136.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -19,9 +19,9 @@
     "lint:style": "stylelint \"**/*.{js,html}\" --ignore-path .gitignore",
     "start": "web-dev-server --node-resolve --watch --open",
     "test": "npm run lint && npm run test:translations && npm run test:headless && npm run test:axe",
-    "test:axe": "web-test-runner --group aXe",
-    "test:headless": "web-test-runner --group unit",
-    "test:headless:watch": "web-test-runner --group unit --watch",
+    "test:axe": "d2l-test-runner aXe",
+    "test:headless": "d2l-test-runner",
+    "test:headless:watch": "d2l-test-runner --watch",
     "test:translations": "mfv -e -s en -p ./lang/ -i untranslated"
   },
   "files": [
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.15",
+    "@brightspace-ui/testing": "^0.18",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",