@brightspace-ui/core 2.56.0 → 2.56.1

package/components/dialog/dialog-mixin.js

@@ -407,14 +407,19 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (!activeElement
 			|| !isComposedAncestor(dialog, activeElement)
 			|| !activeElement.classList.contains('focus-visible')) {
-				this._focusInitial();
+				// wait till the dialog is visible for Safari
+				requestAnimationFrame(() => this._focusInitial());
 			}
 
-			if (!reduceMotion) await animPromise;
+			// if not animating, we need to wait a frame before dispatching due to focus rAF above
+			if (reduceMotion) await new Promise(resolve => requestAnimationFrame(resolve));
+			else await animPromise;
+
 			/** Dispatched when the dialog is opened */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-dialog-open', { bubbles: true, composed: true }
 			));
+
 		}, 0);
 
 	}

package/helpers/focus.js

@@ -1,4 +1,4 @@
-import { findComposedAncestor, getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling } from './dom.js';
+import { findComposedAncestor, getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
 
 const focusableElements = {
 	a: true,
@@ -175,7 +175,7 @@ export function isFocusable(node, includeHidden, includeTabbablesOnly, includeDi
 
 	if (_isFocusable && !includeHidden) {
 		// only perform visibility check if absolutely necessary
-		if (nodeName !== 'body' && node.offsetParent === null) return false;
+		if (nodeName !== 'body' && !isVisible(node)) return false;
 	}
 
 	return _isFocusable;

package/package.json

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