@brightspace-ui/core 3.21.0 → 3.21.2

package/components/dropdown/dropdown-content-mixin.js

@@ -1030,6 +1030,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			leftOverride = `${Math.max(window.innerWidth - window.screen.width, 0)}px`;
 		}
 
+		if (minWidthOverride > maxWidthOverride) {
+			minWidthOverride = maxWidthOverride;
+		}
 		const widthStyle = {
 			maxWidth: maxWidthOverride,
 			minWidth: minWidthOverride,

package/components/meter/meter-circle.js

@@ -56,7 +56,8 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		const dashOffset = 7 * Math.PI * 2 - 10; // approximation perimeter of circle divide by 3 subtract the rounded edges (5 pixels each)
 
 		const primary = this._primary(this.value, this.max) || '';
-		const secondary = this._secondary(this.value, this.max, this.text);
+		const primaryAria = this._primary(this.value, this.max, true) || '';
+		const secondaryAria = this._secondary(this.value, this.max, this.text, true);
 		const textClasses = {
 			'd2l-meter-circle-text-ltr': !this.percent,
 			'd2l-body-standard': true,
@@ -64,7 +65,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		};
 
 		return html`
-			<svg viewBox="0 0 48 48" shape-rendering="geometricPrecision" role="img" aria-label="${this._ariaLabel(primary, secondary)}">
+			<svg viewBox="0 0 48 48" shape-rendering="geometricPrecision" role="img" aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
 				<circle class="d2l-meter-circle-full-bar" cx="24" cy="24" r="21"></circle>
 				<circle
 					class="d2l-meter-circle-progress-bar"

package/components/meter/meter-linear.js

@@ -112,6 +112,8 @@ class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
 		}
 		const primary = this._primary(this.value, this.max);
 		const secondary = this._secondary(this.value, this.max, this.text);
+		const primaryAria = this._primary(this.value, this.max, true);
+		const secondaryAria = this._secondary(this.value, this.max, this.text, true);
 		const textClasses = {
 			'd2l-meter-linear-text-space-between': !this.textInline && secondary !== this.text,
 			'd2l-body-small': true,
@@ -126,7 +128,7 @@ class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
 		return html `
 			<div
 				role="img"
-				aria-label="${this._ariaLabel(primary, secondary)}">
+				aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
 				<div class="d2l-meter-linear-full-bar">
 					<div class="d2l-meter-linear-inner-bar" style="width:${percentage}%;"></div>
 				</div>

package/components/meter/meter-mixin.js

@@ -40,26 +40,31 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
 	}
 
 	_ariaLabel(primary, secondary) {
-		const mainLabel = this.localize(`${this._namespace}.commaSeperatedAria`, 'term1', primary, 'term2', this.localize(`${this._namespace}.progressIndicator`));
-		return secondary ? this.localize(`${this._namespace}.commaSeperatedAria`, 'term1', secondary, 'term2', mainLabel) : mainLabel;
+		// todo: these should be using CLDR data/patterns instead of translated message fragments
+		// example: https://www.unicode.org/cldr/cldr-aux/charts/37/summary/en.html#4480e9e541ba33de
+		const mainLabel = this.localize(`${this._namespace}.commaSeperatedAria`, { term1: primary, term2: this.localize(`${this._namespace}.progressIndicator`) });
+		return secondary ? this.localize(`${this._namespace}.commaSeperatedAria`, { term1: secondary, term2: mainLabel }) : mainLabel;
 	}
 
-	_primary(value, max) {
+	_primary(value, max, aria = false) {
 		const percentage = max > 0 ? value / max : 0;
+		const key = aria ? 'fractionAria' : 'fraction';
 
 		return this.percent
 			? formatPercent(percentage, { maximumFractionDigits: 0 })
-			: this.localize(`${this._namespace}.fraction`, 'x', value, 'y', max);
+			: this.localize(`${this._namespace}.${key}`, { x: value, y: max });
 	}
 
-	_secondary(value, max, context) {
+	_secondary(value, max, context, aria = false) {
 		if (!context) {
 			return '';
 		}
 
+		const key = aria ? 'fractionAria' : 'fraction';
+
 		const percentage = this.max > 0 ? value / max : 0;
 		context = context.replace('{%}', formatPercent(percentage, { maximumFractionDigits: 0 }));
-		context = context.replace('{x/y}', this.localize(`${this._namespace}.fraction`, 'x', value, 'y', max));
+		context = context.replace('{x/y}', this.localize(`${this._namespace}.${key}`, { x: value, y: max }));
 		context = context.replace('{x}', value);
 		context = context.replace('{y}', max);
 

package/components/meter/meter-radial.js

@@ -61,6 +61,8 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
 		const progressFill = percent * lengthOfLine;
 		const primary = this._primary(this.value, this.max);
 		const secondary = this._secondary(this.value, this.max, this.text);
+		const primaryAria = this._primary(this.value, this.max, true) || '';
+		const secondaryAria = this._secondary(this.value, this.max, this.text, true) || '';
 		const secondaryTextElement = this.text ? html`<div class="d2l-body-small d2l-meter-radial-text">${secondary}</div>` : nothing;
 		const textClasses = {
 			'd2l-meter-radial-text-ltr': !this.percent,
@@ -72,7 +74,7 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
 			<div
 				class="d2l-meter-radial"
 				role="img"
-				aria-label="${this._ariaLabel(primary, secondary)}">
+				aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
 				<svg viewBox="0 0 84 46">
 					<path class="d2l-meter-radial-full-bar" d="M5 40a37 35 0 0 1 74 0" />
 					<path

package/lang/ar.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "العودة إلى القائمة السابقة. يتم عرض {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}، ‏{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "مؤشر التقدم",
 	"components.more-less.less": "أقل",
 	"components.more-less.more": "المزيد",

package/lang/cy.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Dychwelyd i'r ddewislen flaenorol. Rydych chi'n edrych ar {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Dangosydd Cynnydd",
 	"components.more-less.less": "llai",
 	"components.more-less.more": "mwy",

package/lang/da.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Gå tilbage til forrige menu. Du ser på {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Statusindikator",
 	"components.more-less.less": "færre",
 	"components.more-less.more": "flere",

package/lang/de.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Zum vorherigen Menü zurückkehren. Sie betrachten gerade {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Fortschrittsanzeige",
 	"components.more-less.less": "Weniger",
 	"components.more-less.more": "mehr",

package/lang/en-gb.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Return to previous menu. You are viewing {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Progress Indicator",
 	"components.more-less.less": "less",
 	"components.more-less.more": "more",

package/lang/en.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Return to previous menu. You are viewing {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Progress Indicator",
 	"components.more-less.less": "less",
 	"components.more-less.more": "more",

package/lang/es-es.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Vuelva al menú anterior. Está en {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicador de progreso",
 	"components.more-less.less": "menos",
 	"components.more-less.more": "más",

package/lang/es.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Regresar al menú anterior. Está viendo {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicador de progreso",
 	"components.more-less.less": "menos",
 	"components.more-less.more": "más",

package/lang/fr-fr.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Revenir au menu précédent. Vous consultez {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicateur de progrès",
 	"components.more-less.less": "moins",
 	"components.more-less.more": "plus",

package/lang/fr.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Retour au menu précédent. Vous voyez actuellement {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicateur de progrès",
 	"components.more-less.less": "moins",
 	"components.more-less.more": "plus",

package/lang/hi.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "पिछले मेनू पर वापस जाएँ। आप {menuTitle} देख रहे हैं।",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "प्रगति संकेतक",
 	"components.more-less.less": "कम",
 	"components.more-less.more": "अधिक",

package/lang/ja.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "前のメニューに戻ります。{menuTitle} を表示しています。",
 	"components.meter-mixin.commaSeperatedAria": "{term1}、{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "進捗状況インジケータ",
 	"components.more-less.less": "減らす",
 	"components.more-less.more": "増やす",

package/lang/ko.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "이전 메뉴로 돌아갑니다. {menuTitle}을(를) 보고 있습니다.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "진도 표시기",
 	"components.more-less.less": "축소",
 	"components.more-less.more": "더 보기",

package/lang/nl.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Keer terug naar het vorige menu. U bekijkt {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Voortgangsindicator",
 	"components.more-less.less": "minder",
 	"components.more-less.more": "meer",

package/lang/pt.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Voltar ao menu anterior. Você está visualizando {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Indicador de progresso",
 	"components.more-less.less": "menos",
 	"components.more-less.more": "mais",

package/lang/sv.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Återgå till föregående meny. Du visar {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Förloppsindikator",
 	"components.more-less.less": "mindre",
 	"components.more-less.more": "mer",

package/lang/tr.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "Önceki menüye dönün. {menuTitle} başlığını görüntülüyorsunuz.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "Gelişim Göstergesi",
 	"components.more-less.less": "daha az",
 	"components.more-less.more": "daha fazla",

package/lang/zh-cn.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "返回至上级菜单。您正在浏览 {menuTitle}。",
 	"components.meter-mixin.commaSeperatedAria": "{term1}、{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "进度指示符",
 	"components.more-less.less": "更少",
 	"components.more-less.more": "更多",

package/lang/zh-tw.js

@@ -94,6 +94,7 @@ export default {
 	"components.menu-item-return.returnCurrentlyShowing": "返回上一個功能表。您正在檢視 {menuTitle}。",
 	"components.meter-mixin.commaSeperatedAria": "{term1}，{term2}",
 	"components.meter-mixin.fraction": "{x}∕{y}",
+	"components.meter-mixin.fractionAria": "{x} out of {y}",
 	"components.meter-mixin.progressIndicator": "進度指示器",
 	"components.more-less.less": "較少",
 	"components.more-less.more": "較多",

package/mixins/interactive/interactive-mixin.js

@@ -124,7 +124,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	async _handleInteractiveKeyDown(e) {
-		if (this._interactive && e.keyCode === 9) e.stopPropagation(); // tab
+		if (this._interactive && e.keyCode !== 27) e.stopPropagation(); // stop propagation for any key other than escape
 	}
 
 	_handleInteractiveToggleBlur() {

package/package.json

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