@brightspace-ui/core 3.41.1 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.41.1",
+  "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",