@brightspace-ui/core 2.93.3 → 2.95.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/table/table-controls.js

@@ -30,6 +30,10 @@ class TableControls extends SelectionControls {
 		`];
 	}
 
+	_getSelectionControlsLabel() {
+		return this.localize('components.table-controls.label');
+	}
+
 	_renderSelection() {
 		return html`
 			<d2l-selection-summary

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/lang/ar.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "مرئي.",
 	"components.switch.hidden": "مخفي",
 	"components.switch.conditions": "يجب استيفاء الشروط",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "التمرير إلى الأمام",
 	"components.tabs.previous": "التمرير إلى الخلف",
 	"components.tag-list.clear": "انقر فوق، أو اضغط على مسافة للخلف، أو اضغط على مفتاح حذف لإزالة العنصر {value}",

package/lang/cy.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Gweladwy.",
 	"components.switch.hidden": "Cudd",
 	"components.switch.conditions": "Rhaid bodloni’r amodau",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Sgrolio Ymlaen",
 	"components.tabs.previous": "Sgrolio Yn Ôl",
 	"components.tag-list.clear": "Cliciwch, pwyswch yn ôl, neu pwyswch y bysell dileu i dynnu’r eitem {value}",

package/lang/da.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Synlig.",
 	"components.switch.hidden": "Skjult",
 	"components.switch.conditions": "Betingelserne skal være opfyldt",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Rul frem",
 	"components.tabs.previous": "Rul tilbage",
 	"components.tag-list.clear": "Klik, tryk på tilbagetasten, eller tryk på slettasten for at fjerne element {value}",

package/lang/de.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Sichtbar.",
 	"components.switch.hidden": "Ausgeblendet",
 	"components.switch.conditions": "Bedingungen müssen erfüllt sein",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Weiterblättern",
 	"components.tabs.previous": "Zurückblättern",
 	"components.tag-list.clear": "Klicken Sie, drücken Sie die Rücktaste, oder drücken Sie die Entfernen-Taste, um das Element {value} zu entfernen",

package/lang/en-gb.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Visible.",
 	"components.switch.hidden": "Hidden",
 	"components.switch.conditions": "Conditions must be met",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Scroll Forward",
 	"components.tabs.previous": "Scroll Backward",
 	"components.tag-list.clear": "Click, press backspace, or press delete key to remove item {value}",

package/lang/en.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Visible.",
 	"components.switch.hidden": "Hidden",
 	"components.switch.conditions": "Conditions must be met",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Scroll Forward",
 	"components.tabs.previous": "Scroll Backward",
 	"components.tag-list.clear": "Click, press backspace, or press delete key to remove item {value}",

package/lang/es-es.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Visible.", // mfv-translated
 	"components.switch.hidden": "Oculto",
 	"components.switch.conditions": "Deben cumplirse las condiciones",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Desplazarse hacia delante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
 	"components.tag-list.clear": "Haga clic, pulse Retroceso o pulse la tecla Supr para eliminar el elemento {value}",

package/lang/es.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Visible.", // mfv-translated
 	"components.switch.hidden": "Oculto",
 	"components.switch.conditions": "Se deben cumplir las condiciones",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Desplazarse hacia adelante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
 	"components.tag-list.clear": "Haga clic, presione Retroceso o presione la tecla Suprimir para eliminar el elemento {value}",

package/lang/fr-fr.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Visible.", // mfv-translated
 	"components.switch.hidden": "Masqué",
 	"components.switch.conditions": "Les conditions doivent être remplies",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Faire défiler vers l'avant",
 	"components.tabs.previous": "Faire défiler vers l'arrière",
 	"components.tag-list.clear": "Cliquez sur l’élément, appuyez sur la touche Retour arrière ou sur la touche Suppr pour supprimer l’élément {value}",

package/lang/fr.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Visible.", // mfv-translated
 	"components.switch.hidden": "Masqué(e)",
 	"components.switch.conditions": "Les conditions doivent être remplies",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Défilement avant",
 	"components.tabs.previous": "Défilement arrière",
 	"components.tag-list.clear": "Cliquez sur le bouton, appuyez sur retour arrière ou appuyez sur la touche de suppression pour supprimer l’élément {value}",

package/lang/hi.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "दृश्यमान।",
 	"components.switch.hidden": "छुपा हुआ",
 	"components.switch.conditions": "शर्तें पूरी होनी चाहिए",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "आगे स्क्रॉल करें",
 	"components.tabs.previous": "पीछे स्क्रॉल करें",
 	"components.tag-list.clear": "{value} को हटाने के लिए क्लिक करें, बैकस्पेस दबाएँ, या हटाएँ कुंजी को दबाएँ",

package/lang/ja.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "表示。",
 	"components.switch.hidden": "非表示",
 	"components.switch.conditions": "条件が一致する必要があります",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "前方にスクロール",
 	"components.tabs.previous": "後方にスクロール",
 	"components.tag-list.clear": "クリックする、Backspace キーを押す、または Delete キーを押すと項目 {value} が削除されます",

package/lang/ko.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "표시.",
 	"components.switch.hidden": "숨김",
 	"components.switch.conditions": "조건을 충족해야 합니다",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "앞으로 스크롤",
 	"components.tabs.previous": "뒤로 스크롤",
 	"components.tag-list.clear": "항목 {value}을(를) 제거하려면 클릭하거나, 백스페이스 또는 삭제 키를 누릅니다.",

package/lang/nl.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Zichtbaar.",
 	"components.switch.hidden": "Verborgen",
 	"components.switch.conditions": "Er moet aan de voorwaarden worden voldaan",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Naar voren scrollen",
 	"components.tabs.previous": "Naar achteren scrollen",
 	"components.tag-list.clear": "Klik, druk op Backspace of druk op de Delete-toets om item {value} te verwijderen",

package/lang/pt.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Visível.",
 	"components.switch.hidden": "Oculto",
 	"components.switch.conditions": "As condições devem ser atendidas",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Ir para frente",
 	"components.tabs.previous": "Ir para trás",
 	"components.tag-list.clear": "Clique em, pressione Backspace ou pressione a tecla Delete para remover o item {value}",

package/lang/sv.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Synlig.",
 	"components.switch.hidden": "Dold",
 	"components.switch.conditions": "Villkoren måste uppfyllas",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "Bläddra framåt",
 	"components.tabs.previous": "Bläddra bakåt",
 	"components.tag-list.clear": "Klicka, tryck på backstegstangenten eller Delete-tangenten för att ta bort objektet {value}",

package/lang/tr.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "Görünür.",
 	"components.switch.hidden": "Gizli",
 	"components.switch.conditions": "Koşullar karşılanmalıdır",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "İleri Kaydır",
 	"components.tabs.previous": "Geri Kaydır",
 	"components.tag-list.clear": "Öğe {value} değerini kaldırmak için tıklatın, geri al tuşuna veya sil tuşuna basın",

package/lang/zh-cn.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "可见。",
 	"components.switch.hidden": "隐藏",
 	"components.switch.conditions": "必须符合条件",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "向前滚动",
 	"components.tabs.previous": "向后滚动",
 	"components.tag-list.clear": "单击、按退格键或按 Delete 键以移除项目 {value}",

package/lang/zh-tw.js

@@ -106,6 +106,7 @@ export default {
 	"components.switch.visibleWithPeriod": "可見。",
 	"components.switch.hidden": "隱藏",
 	"components.switch.conditions": "必須符合條件",
+	"components.table-controls.label": "Actions for table",
 	"components.tabs.next": "向前捲動",
 	"components.tabs.previous": "向後捲動",
 	"components.tag-list.clear": "按一下、按下退格鍵或按下刪除鍵以移除項目 {value}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.93.3",
+  "version": "2.95.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -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);
-```