@brightspace-ui/core 2.97.0 → 2.98.0

package/components/button/button-icon.js

@@ -117,7 +117,6 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
 					background-color: var(--d2l-button-icon-background-color-hover);
 				}
-				button.focus-visible,
 				button:${unsafeCSS(getFocusPseudoClass())} {
 					box-shadow: var(--d2l-button-icon-focus-box-shadow);
 				}

package/components/button/button-styles.js

@@ -22,7 +22,6 @@ export const buttonStyles = css`
 		white-space: nowrap;
 		width: auto;
 	}
-	button.focus-visible, /* still required for when forceFocusVisible is used programatically */
 	button:${unsafeCSS(getFocusPseudoClass())} {
 		box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
 	}

package/components/count-badge/count-badge-icon.js

@@ -25,8 +25,6 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 	static get styles() {
 		return [super.styles, css`
 		:host([focus-ring]) d2l-icon,
-		:host(.focus-visible) d2l-icon,
-		d2l-icon.focus-visible,
 		:host(:${unsafeCSS(getFocusPseudoClass())}) d2l-icon,
 		d2l-icon:${unsafeCSS(getFocusPseudoClass())} {
 			box-shadow: 0 0 0 2px var(--d2l-color-celestine);

package/components/count-badge/count-badge.js

@@ -11,8 +11,6 @@ class CountBadge extends FocusMixin(CountBadgeMixin(LitElement)) {
 	static get styles() {
 		return [super.styles, css`
 		:host([focus-ring]) .d2l-count-badge-wrapper,
-		:host(.focus-visible) .d2l-count-badge-wrapper,
-		.d2l-count-badge-wrapper.focus-visible,
 		:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-count-badge-wrapper,
 		.d2l-count-badge-wrapper:${unsafeCSS(getFocusPseudoClass())} {
 			box-shadow: 0 0 0 2px var(--d2l-color-celestine);

package/components/dialog/dialog-confirm.js

@@ -1,7 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
-import { forceFocusVisible } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { heading3Styles } from '../typography/styles.js';
 
@@ -106,7 +105,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
 			const node = nodes[i];
 			if (node.nodeType !== Node.ELEMENT_NODE) continue;
 			if (!node.hasAttribute('primary')) {
-				forceFocusVisible(node);
+				this._focusElemOrDescendant(node);
 				return;
 			}
 		}

package/components/dialog/dialog-mixin.js

@@ -3,7 +3,7 @@ import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
-import { forceFocusVisible, getComposedActiveElement, getNextFocusable, isFocusVisibleApplied, tryApplyFocus } from '../../helpers/focus.js';
+import { getComposedActiveElement, getFirstFocusableDescendant, getNextFocusable, isFocusable } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { html } from 'lit';
@@ -201,13 +201,20 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		return autofocusElement;
 	}
 
+	_focusElemOrDescendant(elem) {
+		if (!isFocusable(elem, false, false)) {
+			elem = getFirstFocusableDescendant(elem);
+		}
+		if (elem) elem.focus();
+	}
+
 	_focusFirst() {
 		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
 		if (content) {
 			const elementToFocus = this._findAutofocusElement(content) ?? getNextFocusable(content);
 			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), elementToFocus)) {
-				forceFocusVisible(elementToFocus, false);
+				this._focusElemOrDescendant(elementToFocus);
 				return;
 			}
 		}
@@ -219,7 +226,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		const header = this.shadowRoot.querySelector('.d2l-dialog-header');
 		if (header) {
 			const firstFocusable = getNextFocusable(header);
-			if (firstFocusable) forceFocusVisible(firstFocusable);
+			if (firstFocusable) this._focusElemOrDescendant(firstFocusable);
 		}
 	}
 
@@ -231,7 +238,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		if (this._opener && this._opener.focus) {
 			// wait for inactive focus trap
 			requestAnimationFrame(() => {
-				tryApplyFocus(this._opener);
+				this._tryApplyFocus(this._opener);
 				this._opener = null;
 			});
 		}
@@ -410,8 +417,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			// edge case: no children were focused, try again after one redraw
 			const activeElement = getComposedActiveElement();
 			if (!activeElement
-			|| !isComposedAncestor(dialog, activeElement)
-			|| !isFocusVisibleApplied(activeElement)) {
+			|| !isComposedAncestor(dialog, activeElement)) {
 				// wait till the dialog is visible for Safari
 				requestAnimationFrame(() => this._focusInitial());
 			}
@@ -495,6 +501,17 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	}
 
+	_tryApplyFocus(focusable) {
+		if (!isFocusable(focusable)) {
+			focusable = findComposedAncestor(focusable, (node) => (isFocusable(node) || getFirstFocusableDescendant(node) !== null));
+			if (focusable === null) return;
+			if (!isFocusable(focusable)) {
+				focusable = getFirstFocusableDescendant(focusable);
+			}
+		}
+		if (isFocusable(focusable)) focusable.focus();
+	}
+
 	_updateOverflow() {
 		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');

package/components/html-block/html-block.js

@@ -101,7 +101,6 @@ export const htmlBlockContentStyles = css`
 		color: var(--d2l-color-celestine-minus-1, #004489);
 		text-decoration: underline;
 	}
-	a.focus-visible,
 	a:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 2px;
 		outline: 2px solid var(--d2l-color-celestine, #006fbf);

package/components/inputs/input-color.js

@@ -213,7 +213,6 @@ class InputColor extends FocusMixin(FormElementMixin(LocalizeCoreElement(LitElem
 				.readonly-wrapper:focus {
 					outline: none;
 				}
-				.readonly-wrapper.focus-visible,
 				.readonly-wrapper:${unsafeCSS(getFocusPseudoClass())} {
 					box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
 				}

package/components/link/link.js

@@ -20,7 +20,6 @@ export const linkStyles = css`
 		color: var(--d2l-color-celestine-minus-1);
 		text-decoration: underline;
 	}
-	.d2l-link.focus-visible,
 	.d2l-link:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 2px;
 		outline: 2px solid var(--d2l-color-celestine);

package/components/menu/menu-item-styles.js

@@ -21,8 +21,6 @@ export const menuItemStyles = css`
 		color: var(--d2l-menu-foreground-color-hover);
 	}
 
-	:host(.focus-visible),
-	:host([first].focus-visible),
 	:host(:${unsafeCSS(getFocusPseudoClass())}),
 	:host([first]:${unsafeCSS(getFocusPseudoClass())}) {
 		border-radius: 6px;
@@ -38,7 +36,6 @@ export const menuItemStyles = css`
 		opacity: 0.75;
 	}
 
-	:host([disabled].focus-visible),
 	:host([disabled]:${unsafeCSS(getFocusPseudoClass())}) {
 		cursor: default;
 		opacity: 0.75;

package/components/scroll-wrapper/scroll-wrapper.js

@@ -59,7 +59,6 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 				overflow-x: auto;
 				overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
 			}
-			.d2l-scroll-wrapper-container.focus-visible,
 			.d2l-scroll-wrapper-container:${unsafeCSS(getFocusPseudoClass())} {
 				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
 			}

package/components/switch/switch-mixin.js

@@ -59,7 +59,6 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				padding: 0.1rem;
 				vertical-align: middle;
 			}
-			.d2l-switch-container.focus-visible,
 			.d2l-switch-container:${unsafeCSS(getFocusPseudoClass())} {
 				border-color: var(--d2l-color-celestine);
 			}

package/components/tabs/tab-internal.js

@@ -63,7 +63,6 @@ class Tab extends RtlMixin(LitElement) {
 				margin-left: 0.6rem;
 				margin-right: 0;
 			}
-			:host(.focus-visible) > .d2l-tab-text,
 			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
 				border-radius: 0.3rem;
 				box-shadow: 0 0 0 2px var(--d2l-color-celestine);

package/components/tabs/tabs.js

@@ -182,16 +182,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
 				border: 0;
 			}
 			.d2l-tabs-scroll-button[disabled]:hover,
-			.d2l-tabs-scroll-button[disabled].focus-visible,
 			.d2l-tabs-scroll-button[disabled]:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: transparent;
 			}
 			.d2l-tabs-scroll-button:hover,
-			.d2l-tabs-scroll-button.focus-visible,
 			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: var(--d2l-color-gypsum);
 			}
-			.d2l-tabs-scroll-button.focus-visible,
 			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
 				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
 			}

package/components/tag-list/demo/tag-list.html

@@ -68,7 +68,7 @@
 					<d2l-tag-list-item text="Example 9"></d2l-tag-list-item>
 				</d2l-tag-list>
 				<script type="module">
-					import { forceFocusVisible, getNextFocusable } from '../../../helpers/focus.js';
+					import { getNextFocusable } from '../../../helpers/focus.js';
 
 					document.addEventListener('d2l-tag-list-item-clear', (e) => {
 						e.target.parentNode.removeChild(e.target);
@@ -82,7 +82,7 @@
 							e.target.removeChild(tag);
 						});
 						// consumer must move focus someplace logical
-						forceFocusVisible(nextFocusable);
+						nextFocusable?.focus();
 					});
 				</script>
 			</d2l-demo-snippet>

package/components/tooltip/tooltip-help.js

@@ -60,7 +60,6 @@ class TooltipHelp extends SkeletonMixin(FocusMixin(LitElement)) {
 			#d2l-tooltip-help-text:focus {
 				outline-style: none;
 			}
-			#d2l-tooltip-help-text.focus-visible,
 			#d2l-tooltip-help-text:${unsafeCSS(getFocusPseudoClass())} {
 				border-radius: 0.05rem;
 				outline: 2px solid var(--d2l-color-celestine);

package/directives/animate/animate.js

@@ -1,5 +1,5 @@
 import { directive, PartType } from 'lit/directive.js';
-import { getComposedActiveElement, getNextFocusable, isFocusVisibleApplied } from '../../helpers/focus.js';
+import { getComposedActiveElement, getNextFocusable, isFocusVisibleSupported } from '../../helpers/focus.js';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 import { noChange } from 'lit';
@@ -10,6 +10,11 @@ const showTransitionDuration = 300;
 const hideTransitionDuration = 200;
 const moveYValue = 20;
 
+function isFocusVisibleApplied(node) {
+	if (!node) return false;
+	return isFocusVisibleSupported() && node.parentNode?.querySelector(':focus-visible') === node;
+}
+
 class AnimationState {
 
 	constructor(partInfo) {

package/helpers/README.md

@@ -120,9 +120,6 @@ Focus helper functions to easily select focusable DOM nodes
 ```js
 import { ... } from '@brightspace-ui/core/helpers/focus.js';
 
-// focuses on an element and forces a visible focus ring
-forceFocusVisible(node);
-
 // gets the active element, including shadow DOM active elements
 getComposedActiveElement()
 
@@ -130,9 +127,9 @@ getComposedActiveElement()
 getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly)
 
 // gets the focus pseudo-class to used in selectors (focus-visible if supported, or focus)
-// Always also include `.focus-visible` as a selector, to support `forceFocusVisible`. Usage:
+// Usage:
 //	css`
-//		some-element.focus-visible, some-element:${unsafeCSS(getFocusPseudoClass())} { ... }
+//		some-element:${unsafeCSS(getFocusPseudoClass())} { ... }
 //	`
 getFocusPseudoClass()
 
@@ -151,15 +148,8 @@ getPreviousFocusableAncestor(node, includeHidden, includeTabbablesOnly)
 // returns true/false whether the element is focusable
 isFocusable(node, includeHidden, includeTabbablesOnly, includeDisabled)
 
-// returns true/false whether the element has :focus-visible or .focus-visible applied
-isFocusVisibleApplied(node)
-
 // returns true/false whether the :focus-visible is supported
 isFocusVisibleSupported()
-
-// returns true and focuses on node or its nearest focusable ancestor;
-// or false if node and its ancestors are not focusable
-tryApplyFocus(node)
 ```
 
 ## Gesture - Swipe

package/helpers/focus.js

@@ -1,4 +1,4 @@
-import { findComposedAncestor, getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
+import { getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
 
 const focusableElements = {
 	a: true,
@@ -13,18 +13,6 @@ const focusableElements = {
 	textarea: true
 };
 
-export function forceFocusVisible(elem, includeTabbablesOnly) {
-	if (!isFocusable(elem, false, includeTabbablesOnly)) {
-		elem = getFirstFocusableDescendant(elem);
-	}
-	if (!elem) return;
-	elem.addEventListener('blur', () => {
-		elem.classList.remove('focus-visible');
-	}, { once: true });
-	elem.classList.add('focus-visible');
-	elem.focus();
-}
-
 export function getComposedActiveElement() {
 	let node = document.activeElement;
 
@@ -186,12 +174,6 @@ export function isFocusable(node, includeHidden, includeTabbablesOnly, includeDi
 
 }
 
-export function isFocusVisibleApplied(node) {
-	if (!node) return false;
-	if (node.classList.contains('focus-visible')) return true;
-	return isFocusVisibleSupported() && node.parentNode?.querySelector(':focus-visible') === node;
-}
-
 let _isFocusVisibleSupported;
 
 export function isFocusVisibleSupported() {
@@ -210,16 +192,3 @@ export function isFocusVisibleSupported() {
 
 	return _isFocusVisibleSupported;
 }
-
-export function tryApplyFocus(elem) {
-	if (isFocusable(elem)) {
-		forceFocusVisible(elem);
-		return true;
-	}
-	const focusable = findComposedAncestor(elem, (node) => (isFocusable(node) || getFirstFocusableDescendant(node) !== null));
-	if (focusable) {
-		forceFocusVisible(focusable);
-		return true;
-	}
-	return false;
-}

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -742,8 +742,6 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				display: inline-block;
 				width: 0.1rem;
 			}
-			.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle-right,
-			.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle-left,
 			.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-right,
 			.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {
 				display: block;
@@ -777,8 +775,6 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 				background-color: var(--d2l-color-mica);
 				box-shadow: none;
 			}
-			:host([resizable]) .d2l-template-primary-secondary-divider.focus-visible,
-			:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider.focus-visible,
 			:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())},
 			:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: var(--d2l-color-celestine);
@@ -789,8 +785,6 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 			.d2l-template-primary-secondary-divider:hover .d2l-template-primary-secondary-divider-handle-line::after {
 				background-color: var(--d2l-color-ferrite);
 			}
-			.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle-line::before,
-			.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle-line::after,
 			.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::before,
 			.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-line::after {
 				background-color: white;
@@ -919,14 +913,12 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 					height: 1rem;
 					width: 2.2rem;
 				}
-				.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle,
 				.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {
 					box-shadow: none;
 					height: 1.2rem;
 					right: 17px;
 					width: 2.6rem;
 				}
-				:host([dir="rtl"]) .d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle,
 				:host([dir="rtl"]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {
 					left: 17px;
 					right: auto;
@@ -935,7 +927,6 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
 					color: white;
 					display: block;
 				}
-				.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle-mobile,
 				.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-mobile {
 					box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem var(--d2l-color-celestine);
 					right: 0.2rem;