@brightspace-ui/core 2.93.2 → 2.94.0

package/README.md

@@ -68,7 +68,6 @@ npm install @brightspace-ui/core
   * [ArrowKeysMixin](mixins/arrow-keys-mixin.md): manage focus with arrow keys
   * [AsyncContainerMixin](mixins/async-container/): manage collective async state
   * [FocusMixin](mixins/focus-mixin.md): delegate focus to a nested element when `focus()` is called
-  * [FocusVisiblePolyfillMixin](mixins/focus-visible-polyfill-mixin.md): components can use the `:focus-visible` pseudo-class polyfill
   * [FormElementMixin](components/form/docs/form-element-mixin.md): allow components to participate in forms and validation
   * [InteractiveMixin](mixins/interactive-mixin.md): enables toggling interactive elements inside of nested grids
   * [LabelledMixin](mixins/labelled-mixin.md): label custom elements by referencing elements across DOM scopes

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

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -22,9 +23,11 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 
 	static get styles() {
 		return [super.styles, css`
-		:host(.focus-visible) d2l-icon,
 		:host([focus-ring]) d2l-icon,
-		d2l-icon.focus-visible {
+		: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);
 			outline: none;
 		}
@@ -105,8 +108,8 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 			${this.renderCount(numberStyles)}
 			<div class="d2l-skeletize d2l-count-badge-wrapper">
 				<d2l-icon id="${this._badgeId}"
-					icon="${this.icon}" 
-					tabindex="${ifDefined(tabbable ? '0' : undefined)}" 
+					icon="${this.icon}"
+					tabindex="${ifDefined(tabbable ? '0' : undefined)}"
 					aria-labelledby="${ifDefined(this.getAriaLabelId())}"
 					role="img">
 				</d2l-icon>

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

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { CountBadgeMixin } from './count-badge-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -8,9 +9,11 @@ class CountBadge extends CountBadgeMixin(LitElement) {
 
 	static get styles() {
 		return [super.styles, css`
-		:host(.focus-visible) .d2l-count-badge-wrapper,
 		:host([focus-ring]) .d2l-count-badge-wrapper,
-		.d2l-count-badge-wrapper.focus-visible {
+		: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);
 		}
 
@@ -22,7 +25,7 @@ class CountBadge extends CountBadgeMixin(LitElement) {
 			border-radius: 0.65rem;
 			outline: none;
 		}
-		
+
 		:host([size="large"]) .d2l-count-badge-wrapper {
 			border-radius: 0.8rem;
 			outline: none;
@@ -38,10 +41,10 @@ class CountBadge extends CountBadgeMixin(LitElement) {
 	render() {
 		const tabbable = (this.tabStop || this.hasTooltip) && !(this.hideZero && this.number === 0) && !this.skeleton;
 		const innerHtml =  html`
-			<div 
+			<div
 			class="d2l-count-badge-wrapper d2l-skeletize"
 			id="${this._badgeId}"
-			tabindex="${ifDefined(tabbable ? '0' : undefined)}" 
+			tabindex="${ifDefined(tabbable ? '0' : undefined)}"
 			aria-labelledby="${ifDefined(this.getAriaLabelId())}"
 			role="img">
 				${this.renderCount()}

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, tryApplyFocus } from '../../helpers/focus.js';
+import { forceFocusVisible, getComposedActiveElement, getNextFocusable, isFocusVisibleApplied, tryApplyFocus } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { html } from 'lit';
@@ -411,7 +411,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			const activeElement = getComposedActiveElement();
 			if (!activeElement
 			|| !isComposedAncestor(dialog, activeElement)
-			|| !activeElement.classList.contains('focus-visible')) {
+			|| !isFocusVisibleApplied(activeElement)) {
 				// wait till the dialog is visible for Safari
 				requestAnimationFrame(() => this._focusInitial());
 			}

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

@@ -101,6 +101,7 @@ 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/docs/input-search.md

@@ -85,4 +85,4 @@ To make your usage of `d2l-input-search` accessible, use the following property
 | Attribute | Description |
 |---|---|
 | `description` | Use when label on input does not provide enough context. |
-| label | **REQUIRED** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Not visible. |
+| `label` | **REQUIRED** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Not visible. |

package/components/link/link.js

@@ -20,6 +20,7 @@ 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,6 +21,8 @@ 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;
@@ -36,6 +38,7 @@ export const menuItemStyles = css`
 		opacity: 0.75;
 	}
 
+	:host([disabled].focus-visible),
 	:host([disabled]:${unsafeCSS(getFocusPseudoClass())}) {
 		cursor: default;
 		opacity: 0.75;

package/components/paging/pager-load-more.js

@@ -4,7 +4,6 @@ import { css, html, LitElement, nothing } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
@@ -18,7 +17,7 @@ const nativeFocus = document.createElement('div').focus;
  *  A pager component for load-more paging.
  * @fires d2l-pager-load-more - Dispatched when the user clicks the load-more button. Consumers must call the provided "complete" method once items have been loaded.
  */
-class LoadMore extends FocusMixin(FocusVisiblePolyfillMixin(LocalizeCoreElement(LitElement))) {
+class LoadMore extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	static get properties() {
 		return {

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

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
@@ -14,7 +14,7 @@ const SCROLL_AMOUNT = 0.8;
  * Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.
  * @slot - User provided content to wrap
  */
-class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
+class ScrollWrapper extends RtlMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -59,7 +59,8 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 				overflow-x: auto;
 				overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
 			}
-			.d2l-scroll-wrapper-container.focus-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);
 			}
 			:host([h-scrollbar]) .d2l-scroll-wrapper-container {

package/components/switch/switch-mixin.js

@@ -1,13 +1,13 @@
 import '../colors/colors.js';
-import { css, html } from 'lit';
+import { css, html, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
-export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(FocusVisiblePolyfillMixin(superclass))) {
+export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(superclass)) {
 
 	static get properties() {
 		return {
@@ -59,7 +59,8 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 				padding: 0.1rem;
 				vertical-align: middle;
 			}
-			.d2l-switch-container.focus-visible {
+			.d2l-switch-container.focus-visible,
+			.d2l-switch-container:${unsafeCSS(getFocusPseudoClass())} {
 				border-color: var(--d2l-color-celestine);
 			}
 			:host([disabled]) .d2l-switch-container {
@@ -221,9 +222,9 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(Focus
 	}
 
 	get _labelContent() {
-		return html`<span 
-						@click='${this._handleClick}' 
-						@mouseenter='${this._handleSwitchHover}' 
+		return html`<span
+						@click='${this._handleClick}'
+						@mouseenter='${this._handleSwitchHover}'
 						@mouseleave='${this._handleSwitchHoverLeave}'>
 						${this.text}
 					</span>`;

package/components/table/table-col-sort-button.js

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 /**
  * Button for sorting a table column in ascending/descending order.
@@ -55,7 +56,8 @@ export class TableColSortButton extends FocusMixin(LitElement) {
 			button:hover {
 				text-decoration: underline;
 			}
-			button:focus-visible {
+			button:focus-visible,
+			button:${unsafeCSS(getFocusPseudoClass())} {
 				border-radius: 0.2rem;
 				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
 				outline-style: none;

package/components/tabs/tab-internal.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 const keyCodes = {
@@ -62,7 +63,8 @@ class Tab extends RtlMixin(LitElement) {
 				margin-left: 0.6rem;
 				margin-right: 0;
 			}
-			:host(.focus-visible) > .d2l-tab-text {
+			: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);
 				color: var(--d2l-color-celestine);

package/components/tabs/tabs.js

@@ -2,12 +2,12 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import '../../helpers/queueMicrotask.js';
 import './tab-internal.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { cssEscape, findComposedAncestor } from '../../helpers/dom.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -52,7 +52,7 @@ if (!Array.prototype.findIndex) {
  * @slot ext - Additional content (e.g., a button) positioned at right
  * @fires d2l-tabs-initialized - Dispatched when the component is initialized
  */
-class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyfillMixin(LitElement)))) {
+class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -182,14 +182,17 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 				border: 0;
 			}
 			.d2l-tabs-scroll-button[disabled]:hover,
-			.d2l-tabs-scroll-button[disabled].focus-visible {
+			.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.focus-visible,
+			.d2l-tabs-scroll-button:${unsafeCSS(getFocusPseudoClass())} {
 				background-color: var(--d2l-color-gypsum);
 			}
-			.d2l-tabs-scroll-button.focus-visible {
+			.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);
 			}
 			.d2l-panels-container-no-whitespace ::slotted(*) {

package/components/tooltip/tooltip-help.js

@@ -1,10 +1,10 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
@@ -12,7 +12,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
  * A component used to display additional information when users focus or hover over some text.
  * @slot - Default content placed inside of the tooltip
  */
-class TooltipHelp extends SkeletonMixin(FocusMixin(FocusVisiblePolyfillMixin(LitElement))) {
+class TooltipHelp extends SkeletonMixin(FocusMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -60,7 +60,8 @@ class TooltipHelp extends SkeletonMixin(FocusMixin(FocusVisiblePolyfillMixin(Lit
 			#d2l-tooltip-help-text:focus {
 				outline-style: none;
 			}
-			#d2l-tooltip-help-text.focus-visible {
+			#d2l-tooltip-help-text.focus-visible,
+			#d2l-tooltip-help-text:${unsafeCSS(getFocusPseudoClass())} {
 				border-radius: 0.05rem;
 				outline: 2px solid var(--d2l-color-celestine);
 				outline-offset: 0.05rem;

package/directives/animate/animate.js

@@ -1,5 +1,5 @@
 import { directive, PartType } from 'lit/directive.js';
-import { getComposedActiveElement, getNextFocusable } from '../../helpers/focus.js';
+import { getComposedActiveElement, getNextFocusable, isFocusVisibleApplied } from '../../helpers/focus.js';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 import { noChange } from 'lit';
@@ -180,7 +180,7 @@ class AnimationState {
 
 		// if focus is inside and was placed by keyboard, move it to next focusable
 		const activeElem = getComposedActiveElement();
-		if (activeElem && activeElem.classList.contains('focus-visible')) {
+		if (activeElem && isFocusVisibleApplied(activeElem)) {
 			const focusIsInside = isComposedAncestor(this.elem, activeElem);
 			if (focusIsInside) {
 				const nextFocusable = getNextFocusable(activeElem);

package/helpers/README.md

@@ -130,6 +130,10 @@ 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:
+//	css`
+//		some-element.focus-visible, some-element:${unsafeCSS(getFocusPseudoClass())} { ... }
+//	`
 getFocusPseudoClass()
 
 // gets the last focusable descendant given a node, including those within the shadow DOM
@@ -147,6 +151,9 @@ 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()
 

package/helpers/focus.js

@@ -186,6 +186,12 @@ 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() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.93.2",
+  "version": "2.94.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -23,7 +23,7 @@
     "test:axe": "web-test-runner --group aXe",
     "test:headless": "web-test-runner --group default",
     "test:headless:watch": "web-test-runner --group default --watch",
-    "test:translations": "mfv -e -s en -p ./lang/"
+    "test:translations": "mfv -e -s en -p ./lang/ -i untranslated"
   },
   "files": [
     "custom-elements.json",
@@ -71,7 +71,6 @@
     "@brightspace-ui/intl": "^3",
     "@formatjs/intl-pluralrules": "^1",
     "@open-wc/dedupe-mixin": "^1",
-    "focus-visible": "^5",
     "ifrau": "^0.40",
     "intl-messageformat": "^7",
     "lit": "^2",

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

@@ -2,9 +2,9 @@ import '../../components/colors/colors.js';
 import '../../components/icons/icon-custom.js';
 import '../../components/icons/icon.js';
 import '../../components/offscreen/offscreen.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -536,7 +536,7 @@ class MobileTouchResizer extends Resizer {
  * @fires d2l-template-primary-secondary-resize-start - Dispatched when a user begins moving the divider.
  * @fires d2l-template-primary-secondary-resize-end - Dispatched when a user finishes moving the divider.
  */
-class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(LocalizeCoreElement(LitElement))) {
+class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement)) {
 
 	static get properties() {
 		return {
@@ -743,7 +743,9 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 				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.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;
 			}
 			:host(:not([dir="rtl"]):not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,
@@ -776,7 +778,9 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 				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][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);
 			}
 			.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,
@@ -786,7 +790,9 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 				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.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;
 			}
 
@@ -913,13 +919,15 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 					height: 1rem;
 					width: 2.2rem;
 				}
-				.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle {
+				.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.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;
 				}
@@ -927,7 +935,8 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 					color: white;
 					display: block;
 				}
-				.d2l-template-primary-secondary-divider.focus-visible .d2l-template-primary-secondary-divider-handle-mobile {
+				.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;
 				}

package/tools/web-test-runner-helpers.js

@@ -0,0 +1,12 @@
+import { resetMouse, sendKeys, sendMouse } from '@web/test-runner-commands';
+
+export const focusWithKeyboard = async(element) => {
+	await sendKeys({ press: 'Tab' });
+	element.focus({ focusVisible: true });
+};
+
+export const focusWithMouse = async(element) => {
+	const { x, y } = element.getBoundingClientRect();
+	await sendMouse({ type: 'click', position: [Math.ceil(x), Math.ceil(y)] });
+	await resetMouse();
+};

package/mixins/focus-visible-polyfill-mixin.js

@@ -1,29 +0,0 @@
-let polyfillLoading = false;
-
-export const FocusVisiblePolyfillMixin = superclass => class extends superclass {
-
-	connectedCallback() {
-
-		super.connectedCallback();
-
-		if (!this.shadowRoot) return;
-
-		if (window.applyFocusVisiblePolyfill) {
-			window.applyFocusVisiblePolyfill(this.shadowRoot);
-			return;
-		}
-
-		window.addEventListener('focus-visible-polyfill-ready', () => {
-			// somehow it's occasionally still not available
-			if (this.shadowRoot && window.applyFocusVisiblePolyfill) {
-				window.applyFocusVisiblePolyfill(this.shadowRoot);
-			}
-		}, { once: true });
-
-		if (!polyfillLoading) {
-			polyfillLoading = true;
-			import('focus-visible');
-		}
-
-	}
-};

package/mixins/focus-visible-polyfill-mixin.md

@@ -1,50 +0,0 @@
-# FocusVisiblePolyfillMixin
-
-From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible):
-
-> The `:focus-visible` pseudo-class applies while an element matches the `:focus` pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.
-
-In order words, it allows you to provide focus styles for an element that only get applied when the user accessed it via keyboard. But today only Chrome supports `:focus-visible`, so a polyfill is required.
-
-The `FocusVisiblePolyfillMixin` adds support to a component to use the [focus-visible polyfill](https://github.com/WICG/focus-visible), ensuring that the polyfill is lazy loaded only once and that it's properly applied to the component's shadow root.
-
-## Usage
-
-Apply the mixin and target the `focus-visible` CSS class for styles you'd like to apply when focus should be visible. 
-
-```js
-import { FocusVisiblePolyfillMixin } from '@brightspace-ui/core/mixins/focus-visible-polyfill-mixin.js';
-
-class MyComponent extends FocusVisiblePolyfillMixin(LitElement) {
-  static get styles() {
-    return css`
-      /* styles to apply when clicked or focused with a keyboard */
-      button:hover,
-      button:focus {
-        background-color: #cccccc;
-      }
-      /* styles to apply only when focused with a keyboard */
-      button.focus-visible {
-        outline: 2px solid black;
-      }
-    `;
-  }
-}
-```
-
-**Learn More:** [focus-visible polyfill documentation](https://github.com/WICG/focus-visible)
-
-## Forcing Visible Focus
-
-When applying focus programatically in JavaScript via `elem.focus()`, unless a `Tab` keyboard event has just occurred, a visible focus ring will not be shown. In certain circumstances, forcing focus to be visible is desired -- like when moving focus from one element to another.
-
-For example, opening a dialog moves the user's focus from an opener to inside the dialog and then closing the dialog moves it back to the opener. In cases like this, not being able to clearly see which element has focus can be disorienting for the user.
-
-To force visible focus, use the `forceFocusVisible()` helper:
-
-```js
-import { forceFocusVisible } from '@brightspace-ui/core/helpers/focus.js';
-
-// focus and force a visible focus ring
-forceFocusVisible(elem);
-```