@brightspace-ui/core 3.41.0 → 3.42.0

package/components/dialog/demo/dialog-confirm.html

@@ -22,7 +22,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-button id="openConfirm">Show Confirm</d2l-button>
-					<d2l-dialog-confirm id="confirm" text="Are you sure you want more cookies?">
+					<d2l-dialog-confirm id="confirm" title-text="Confirm Title" text="Are you sure you want more cookies?">
 						<d2l-button slot="footer" primary data-dialog-action="ok">Yes</d2l-button>
 						<d2l-button slot="footer" data-dialog-action>No</d2l-button>
 					</d2l-dialog-confirm>

package/components/dialog/demo/dialog.html

@@ -247,6 +247,32 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (overflowing content)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openScrollFocus">Show Dialog</d2l-button>
+					<d2l-dialog title-text="My Dialog" id="dialogScrollFocus">
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						document.querySelector('#openScrollFocus').addEventListener('click', () => {
+							document.querySelector('#dialogScrollFocus').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-confirm.js

@@ -3,6 +3,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 /**
@@ -81,6 +82,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 	}
 
 	render() {
+		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
 		const inner = html`
 			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
 			<div class="d2l-dialog-inner">
@@ -88,7 +90,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 					<div class="d2l-dialog-header">
 						<div><h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2></div>
 					</div>` : null}
-				<div id="${this._textId}" class="d2l-dialog-content">
+				<div id="${this._textId}" class="d2l-dialog-content" tabindex="${ifDefined(contentTabIndex)}">
 					<div>${this.text ? this.text.split('\n').map(line => html`<p>${line}</p>`) : null}</div>
 				</div>
 				<div class="d2l-dialog-footer">

package/components/dialog/dialog-fullscreen.js

@@ -7,6 +7,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -256,6 +257,8 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 			<div style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
+		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
+
 		const inner = html`
 			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
@@ -264,7 +267,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 						<d2l-button-icon icon="${this._icon}" text="${this.localize('components.dialog.close')}" @click="${this._abort}"></d2l-button-icon>
 					</div>
 				</div>
-				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}">${content}</div>
+				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}" tabindex="${ifDefined(contentTabIndex)}">${content}</div>
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
 				</div>

package/components/dialog/dialog-mixin.js

@@ -33,6 +33,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	static get properties() {
 		return {
+			/**
+			 * @ignore
+			 */
+			focusableContentElemPresent: { state: true },
 			/**
 			 * Whether or not the dialog is open
 			 */
@@ -64,6 +68,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	constructor() {
 		super();
+		this.focusableContentElemPresent = false;
 		this.opened = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
@@ -219,6 +224,9 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
 		if (content) {
 			const elementToFocus = this._findAutofocusElement(content) ?? getNextFocusable(content);
+			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-content'), elementToFocus)) {
+				this.focusableContentElemPresent = true;
+			}
 			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), elementToFocus)) {
 				this._focusElemOrDescendant(elementToFocus);
 				return;

package/components/dialog/dialog-styles.js

@@ -132,6 +132,12 @@ export const dialogStyles = css`
 		padding: 0 30px;
 	}
 
+	.d2l-dialog-content:focus-visible {
+		border-radius: 6px;
+		outline: 2px solid var(--d2l-color-celestine);
+		outline-offset: -2px;
+	}
+
 	.d2l-dialog-content > div {
 		position: relative; /* make this the positioned parent for absolute positioned elements like d2l-template-primary-secondary */
 	}

package/components/dialog/dialog.js

@@ -170,6 +170,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
+		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
 		const labelId = this.critical ? `${this._criticalLabelId} ${this._titleId}` : this._titleId;
 		const inner = html`
 			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
@@ -180,7 +181,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 						<d2l-button-icon icon="tier1:close-small" text="${this.localize('components.dialog.close')}" @click="${this._abort}"></d2l-button-icon>
 					</div>
 				</div>
-				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}">${content}</div>
+				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}" tabindex="${ifDefined(contentTabIndex)}">${content}</div>
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
 				</div>

package/custom-elements.json

@@ -2008,6 +2008,11 @@
           "description": "The optional title for the dialog",
           "type": "string"
         },
+        {
+          "name": "focusableContentElemPresent",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2109,6 +2114,11 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "focusableContentElemPresent",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2240,6 +2250,11 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "focusableContentElemPresent",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",

package/lang/ar.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "عنوان URL غير صالح",
 	"components.form-element.valueMissing": "{label} مطلوبة.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {تم العثور على {count} خطأ في المعلومات التي أرسلتها} other {تم العثور على {count} من الأخطاء في المعلومات التي أرسلتها}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "تبديل تفاصيل الخطأ",
 	"components.input-color.backgroundColor": "لون الخلفية",
 	"components.input-color.foregroundColor": "لون المقدمة",
 	"components.input-color.none": "لا شيء",

package/lang/cy.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "Nid yw'r URL yn ddilys.",
 	"components.form-element.valueMissing": "Mae angen {label}.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch} other {Canfuwyd {count} gwall yn y wybodaeth a gyflwynoch}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Toglo manylion gwall",
 	"components.input-color.backgroundColor": "Lliw Cefndir",
 	"components.input-color.foregroundColor": "Lliw Blaendir",
 	"components.input-color.none": "Dim",

package/lang/da.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL-adresse er ikke gyldig",
 	"components.form-element.valueMissing": "{label} er påkrævet.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Der blev fundet {count} fejl i de oplysninger, du indsendte} other {Der blev fundet {count} fejl i de oplysninger, du indsendte}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Slå fejloplysninger til/fra",
 	"components.input-color.backgroundColor": "Baggrundsfarve",
 	"components.input-color.foregroundColor": "Forgrundsfarve",
 	"components.input-color.none": "Ingen",

package/lang/de.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL ist ungültig",
 	"components.form-element.valueMissing": "{label} ist erforderlich.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Die von Ihnen übermittelten Informationen enthalten {count} Fehler} other {Die von Ihnen übermittelten Informationen enthalten {count} Fehler}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Fehlerdetails ein-/ausschalten",
 	"components.input-color.backgroundColor": "Hintergrundfarbe",
 	"components.input-color.foregroundColor": "Vordergrundfarbe",
 	"components.input-color.none": "Keine",

package/lang/es-es.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "La dirección URL no es válida",
 	"components.form-element.valueMissing": "{label} es obligatorio.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Se ha encontrado {count} error en la información que ha enviado} other {Se han encontrado {count} errores en la información que ha enviado}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Alternar detalles del error",
 	"components.input-color.backgroundColor": "Color de fondo",
 	"components.input-color.foregroundColor": "Color del primer plano",
 	"components.input-color.none": "Ninguno",

package/lang/es.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "La dirección URL no es válida",
 	"components.form-element.valueMissing": "{label} es obligatoria.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Se encontró {count} error en la información que envió} other {Se encontraron {count} errores en la información que envió}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Activar o desactivar la presentación de detalles de los errores",
 	"components.input-color.backgroundColor": "Color de fondo",
 	"components.input-color.foregroundColor": "Color del primer plano",
 	"components.input-color.none": "Ninguno",

package/lang/fr-fr.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL non valide",
 	"components.form-element.valueMissing": "{label} est obligatoire.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {{count} erreur trouvée dans les informations soumises} other {{count} erreurs trouvées dans les informations soumises}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Afficher/Masquer les détails de l’erreur",
 	"components.input-color.backgroundColor": "Couleur de l’arrière-plan",
 	"components.input-color.foregroundColor": "Couleur de l’avant-plan",
 	"components.input-color.none": "Aucune",

package/lang/fr.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "L'URL n'est pas valide",
 	"components.form-element.valueMissing": "{label} est requis.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Il y avait {count} erreur trouvée dans les informations que vous avez soumises} other {Il y avait {count} erreurs trouvées dans les informations que vous avez soumises}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Afficher les détails de l'erreur",
 	"components.input-color.backgroundColor": "Couleur d’arrière-plan",
 	"components.input-color.foregroundColor": "Couleur de l'avant-plan",
 	"components.input-color.none": "Aucun",

package/lang/hi.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL मान्य नहीं है",
 	"components.form-element.valueMissing": "{label} आवश्यक है।",
 	"components.form-error-summary.errorSummary": "{count, plural, one {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं} other {आपके द्वारा सबमिट की गई जानकारी में {count} त्रुटियाँ पाई गईं}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "त्रुटि विवरण टॉगल करें",
 	"components.input-color.backgroundColor": "पृष्ठभूमि का रंग",
 	"components.input-color.foregroundColor": "अग्रभूमि का रंग",
 	"components.input-color.none": "कोई नहीं",

package/lang/ja.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL が有効ではありません",
 	"components.form-element.valueMissing": "{label} は必須です。",
 	"components.form-error-summary.errorSummary": "{count, plural, other {送信した情報に {count} 件のエラーが見つかりました}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "エラーの詳細を切り替え",
 	"components.input-color.backgroundColor": "背景色",
 	"components.input-color.foregroundColor": "前景色",
 	"components.input-color.none": "なし",

package/lang/ko.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL이 유효하지 않습니다",
 	"components.form-element.valueMissing": "{label}이(가) 필요합니다.",
 	"components.form-error-summary.errorSummary": "{count, plural, other {제출한 정보에서 {count}개의 오류가 발견되었습니다}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "오류 세부 정보 전환",
 	"components.input-color.backgroundColor": "배경 색상",
 	"components.input-color.foregroundColor": "전경 색상",
 	"components.input-color.none": "없음",

package/lang/nl.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL is niet geldig",
 	"components.form-element.valueMissing": "{label} is vereist.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Er is {count} fout gevonden in de informatie die u hebt ingediend} other {Er zijn {count} fouten gevonden in de informatie die u hebt ingediend}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Foutdetails in-/uitschakelen",
 	"components.input-color.backgroundColor": "Achtergrondkleur",
 	"components.input-color.foregroundColor": "Voorgrondkleur",
 	"components.input-color.none": "Geen",

package/lang/pt.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL inválido",
 	"components.form-element.valueMissing": "{label} é obrigatório.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {{count} erro foi encontrado nas informações enviadas} other {{count} erros foram encontrados nas informações enviadas}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Alternar detalhes do erro",
 	"components.input-color.backgroundColor": "Cor do Plano de fundo",
 	"components.input-color.foregroundColor": "Cor do Primeiro plano",
 	"components.input-color.none": "Nenhum",

package/lang/sv.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL är inte giltigt",
 	"components.form-element.valueMissing": "{label} krävs.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Det finns {count} fel i informationen som du skickade} other {Det finns {count} fel i informationen som du skickade}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Växla felinformation",
 	"components.input-color.backgroundColor": "Bakgrundsfärg",
 	"components.input-color.foregroundColor": "Förgrundsfärg",
 	"components.input-color.none": "Inga",

package/lang/tr.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL geçerli değil",
 	"components.form-element.valueMissing": "{label} zorunludur.",
 	"components.form-error-summary.errorSummary": "{count, plural, one {Gönderdiğiniz bilgilerde {count} hata bulundu} other {Gönderdiğiniz bilgilerde {count} hata bulundu}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "Hata ayrıntılarını değiştir",
 	"components.input-color.backgroundColor": "Arka Plan Rengi",
 	"components.input-color.foregroundColor": "Ön Plan Rengi",
 	"components.input-color.none": "Yok",

package/lang/zh-cn.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL 无效",
 	"components.form-element.valueMissing": "{label} 为必填项。",
 	"components.form-error-summary.errorSummary": "{count, plural, other {在您提交的信息中发现 {count} 个错误}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "切换错误详细信息",
 	"components.input-color.backgroundColor": "背景颜色",
 	"components.input-color.foregroundColor": "前景颜色",
 	"components.input-color.none": "无",

package/lang/zh-tw.js

@@ -44,7 +44,7 @@ export default {
 	"components.form-element.input.url.typeMismatch": "URL 無效",
 	"components.form-element.valueMissing": "{label} 為必填。",
 	"components.form-error-summary.errorSummary": "{count, plural, other {您提交的資訊中發現 {count} 個錯誤}}",
-	"components.form-error-summary.text": "Toggle error details",
+	"components.form-error-summary.text": "切換錯誤詳細資料",
 	"components.input-color.backgroundColor": "背景顏色",
 	"components.input-color.foregroundColor": "前景顏色",
 	"components.input-color.none": "無",

package/package.json

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