@brightspace-ui/core 2.29.4 → 2.30.0

package/components/dialog/README.md

@@ -256,6 +256,16 @@ document.querySelector('#open').addEventListener('click', () => {
 });
 ```
 
+## Focus Management
+
+When opened, focus will be automatically placed within the dialog. The element to be focused will either be the content element having the optional `autofocus` attribute, or a focusable element identified by the dialog depending on the type of dialog. For `d2l-dialog` and `d2l-dialog-fullscreen`, the first focusable element will be focused. For `d2l-dialog-confirm`, the least destructive action will be focused, which is assumed to be the first non-primary button in the footer.
+
+### Specifying an `autofocus` Element (Optional)
+
+To specify which element should be focused, add the `autofocus` attribute to that element. An element with the `autofocus` attribute will receive focus if the element has a `tabindex` value of `0` or `-1`, or is a naturally focusable element (e.g. button).
+
+Note that the element must be in the dialog content's DOM scope and not within another component's Shadow DOM.
+
 <!-- docs: start hidden content -->
 ## Future Improvements
 

package/components/dialog/dialog-mixin.js

@@ -177,13 +177,35 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		}
 	}
 
+	_findAutofocusElement(node) {
+		if (this._useNative) {
+			// Do not override native autofocus attribute implementation
+			return null;
+		}
+
+		const slot = node.querySelector('slot');
+		if (!slot) {
+			// We are in a confirm dialog, autofocus attribute will never be set
+			return null;
+		}
+
+		const content = slot.assignedElements({ flatten: true });
+
+		let autofocusElement = null;
+		for (const el of content) {
+			autofocusElement = el.hasAttribute('autofocus') ? el : el.querySelector('[autofocus]');
+			if (autofocusElement) break;
+		}
+		return autofocusElement;
+	}
+
 	_focusFirst() {
 		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
 		if (content) {
-			const firstFocusable = getNextFocusable(content);
-			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), firstFocusable)) {
-				forceFocusVisible(firstFocusable);
+			const elementToFocus = this._findAutofocusElement(content) ?? getNextFocusable(content);
+			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), elementToFocus)) {
+				forceFocusVisible(elementToFocus, false);
 				return;
 			}
 		}

package/components/tooltip/tooltip-help.js

@@ -50,7 +50,6 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 				border: none;
 				cursor: text;
 				padding: 0;
-				text-decoration-color: var(--d2l-color-galena);
 				text-decoration-line: underline;
 				text-decoration-style: dashed;
 				text-decoration-thickness: 1px;