@brightspace-ui/core 3.139.0 → 3.140.0

package/components/button/button-icon.js

@@ -64,17 +64,17 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 				:host([translucent]) {
 					--d2l-button-icon-background-color: rgba(0, 0, 0, 0.5);
 					--d2l-button-icon-background-color-hover: var(--d2l-color-celestine);
-					--d2l-button-focus-color: white;
-					--d2l-button-focus-offset: -4px;
+					--d2l-focus-ring-color: white;
+					--d2l-focus-ring-offset: -4px;
 					--d2l-button-icon-fill-color: white;
 					--d2l-button-icon-fill-color-hover: white;
 				}
 				:host([theme="dark"]) {
 					--d2l-button-icon-background-color: transparent;
 					--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
-					--d2l-button-focus-color: var(--d2l-color-celestine-plus-1);
 					--d2l-button-icon-fill-color: var(--d2l-color-sylvite);
 					--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
+					--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
 				}
 
 				button {

package/components/button/button-move.js

@@ -102,8 +102,8 @@ class ButtonMove extends ThemeMixin(FocusMixin(RtlMixin(LitElement))) {
 				:host([theme="dark"]) {
 					--d2l-button-move-background-color-focus: #000000;
 					--d2l-button-move-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
-					--d2l-button-focus-color: var(--d2l-color-celestine-plus-1);
 					--d2l-icon-fill-color: var(--d2l-color-sylvite);
+					--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
 				}
 				button {
 					background-color: transparent;

package/components/button/button-styles.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
-import { css, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 
 export const buttonStyles = css`
 	button {
@@ -24,10 +24,7 @@ export const buttonStyles = css`
 		white-space: nowrap;
 		width: auto;
 	}
-	button:${unsafeCSS(getFocusPseudoClass())} {
-		outline: 2px solid var(--d2l-button-focus-color, var(--d2l-color-celestine));
-		outline-offset: var(--d2l-button-focus-offset, 2px);
-	}
+	${getFocusRingStyles('button')}
 	@media (prefers-contrast: more) {
 		button {
 			border: 2px solid transparent;

package/components/dialog/dialog-styles.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 
 export const dialogStyles = css`
 
@@ -131,13 +132,7 @@ export const dialogStyles = css`
 		overflow: hidden; /* scrollbar is kept hidden while we update the scroll position to avoid scrollbar flash */
 		padding: 0 30px;
 	}
-
-	.d2l-dialog-content:focus-visible {
-		border-radius: 6px;
-		outline: 2px solid var(--d2l-color-celestine);
-		outline-offset: -2px;
-	}
-
+	${getFocusRingStyles('.d2l-dialog-content', { extraStyles: css`--d2l-focus-ring-offset: -2px; border-radius: 6px;` })}
 	.d2l-dialog-content > div {
 		position: relative; /* make this the positioned parent for absolute positioned elements like d2l-template-primary-secondary */
 	}

package/components/empty-state/empty-state-styles.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
-import { css, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { css } from 'lit';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 
 export const emptyStateStyles = css`
 
@@ -20,13 +20,11 @@ export const emptyStateStyles = css`
 	.action-slot::slotted(d2l-empty-state-action-link:first-of-type) {
 		display: inline;
 	}
-
-	.d2l-empty-state-description:${unsafeCSS(getFocusPseudoClass())} {
+	.d2l-empty-state-description {
+		--d2l-focus-ring-offset: 3px;
 		border-radius: 0.3rem;
-		outline: 2px solid var(--d2l-color-celestine);
-		outline-offset: 3px;
 	}
-
+	${getFocusRingStyles('.d2l-empty-state-description')}
 `;
 
 export const emptyStateSimpleStyles = css`

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

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { renderEmbeds } from '../../helpers/embeds.js';
 import { requestInstance } from '../../mixins/provider/provider-mixin.js';
@@ -108,12 +108,11 @@ export const htmlBlockContentStyles = css`
 		color: var(--d2l-color-celestine-minus-1, #004489);
 		text-decoration: underline;
 	}
-	a:${unsafeCSS(getFocusPseudoClass())} {
-		border-radius: 2px;
-		outline: 2px solid var(--d2l-color-celestine, #006fbf);
-		outline-offset: 1px;
-		text-decoration: underline;
+	a {
+		--d2l-focus-ring-offset: 1px;
+		--d2l-focus-ring-color: var(--d2l-color-celestine, #006fbf);
 	}
+	${getFocusRingStyles('a', { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
 	@media print {
 		a,
 		a:visited,

package/components/inputs/input-color.js

@@ -1,12 +1,12 @@
 import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-content.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { getValidHexColor } from '../../helpers/color.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -226,14 +226,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 					outline: none;
 					width: 1.2rem;
 				}
-				.readonly-wrapper:focus {
-					outline: none;
-				}
-				.readonly-wrapper:${unsafeCSS(getFocusPseudoClass())} {
-					outline: 2px solid var(--d2l-color-celestine);
-					outline-offset: 2px;
-				}
-
+				${getFocusRingStyles('.readonly-wrapper')}
 				@media (prefers-contrast: more) {
 					.swatch {
 						border: 1px solid FieldText;

package/components/inputs/input-search.js

@@ -80,7 +80,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 					--d2l-button-icon-min-height: 1.5rem;
 					--d2l-button-icon-min-width: 1.5rem;
 					--d2l-button-icon-border-radius: 4px;
-					--d2l-button-focus-offset: 1px;
+					--d2l-focus-ring-offset: 1px;
 					margin-left: 0.3rem;
 					margin-right: 0.3rem;
 				}

package/components/link/link.js

@@ -1,9 +1,9 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -11,6 +11,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 export const linkStyles = css`
 	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
+		--d2l-focus-ring-offset: 1px;
 		color: var(--d2l-color-celestine);
 		cursor: pointer;
 		outline-style: none;
@@ -24,12 +25,7 @@ export const linkStyles = css`
 		color: var(--d2l-color-celestine-minus-1);
 		text-decoration: underline;
 	}
-	.d2l-link:${unsafeCSS(getFocusPseudoClass())} {
-		border-radius: 2px;
-		outline: 2px solid var(--d2l-color-celestine);
-		outline-offset: 1px;
-		text-decoration: underline;
-	}
+	${getFocusRingStyles('.d2l-link', { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
 	.d2l-link.d2l-link-main {
 		font-weight: 700;
 	}

package/components/switch/switch-mixin.js

@@ -1,8 +1,8 @@
 import '../colors/colors.js';
-import { css, html, unsafeCSS } from 'lit';
+import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
@@ -47,6 +47,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 			}
 
 			.d2l-switch-container {
+				--d2l-focus-ring-offset: 0;
 				background-color: var(--d2l-switch-container-background-color, #ffffff);
 				border-radius: 1rem;
 				box-sizing: border-box;
@@ -58,9 +59,7 @@ export const SwitchMixin = superclass => class extends FocusMixin(RtlMixin(super
 				padding: 0.1rem;
 				vertical-align: middle;
 			}
-			.d2l-switch-container:${unsafeCSS(getFocusPseudoClass())} {
-				outline: 2px solid var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles('.d2l-switch-container')}
 			:host([disabled]) .d2l-switch-container {
 				cursor: default;
 				opacity: 0.5;

package/components/tabs/demo/tab-custom.js

@@ -1,5 +1,5 @@
-import { css, html, LitElement, unsafeCSS } from 'lit';
-import { getFocusPseudoClass } from '../../../helpers/focus.js';
+import { css, html, LitElement } from 'lit';
+import { getFocusRingStyles } from '../../../helpers/focus.js';
 import { TabMixin } from '../tab-mixin.js';
 
 class TabCustom extends TabMixin(LitElement) {
@@ -7,6 +7,7 @@ class TabCustom extends TabMixin(LitElement) {
 	static get styles() {
 		const styles = [ css`
 			.d2l-tab-custom-content {
+				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
 				overflow: hidden;
 				padding: 0.1rem;
@@ -15,11 +16,10 @@ class TabCustom extends TabMixin(LitElement) {
 			:host(:first-child) .d2l-tab-custom-content {
 				margin-inline-start: 0;
 			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-custom-content {
-				border-radius: 0.3rem;
-				color: var(--d2l-color-celestine);
-				outline: 2px solid var(--d2l-color-celestine);
-			}
+			${getFocusRingStyles(
+				pseudoClass => `:host(:${pseudoClass}) .d2l-tab-custom-content`,
+				{ extraStyles: 'border-radius: 0.3rem; color: var(--d2l-color-celestine);' }
+			)}
 		`];
 
 		super.styles && styles.unshift(super.styles);

package/components/tabs/tab.js

@@ -1,8 +1,13 @@
 import { css, html, LitElement, unsafeCSS } from 'lit';
+import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { TabMixin } from './tab-mixin.js';
 
+const focusRingStyles = getFocusRingStyles(
+	pseudoClass => `:host(:${pseudoClass}) .d2l-tab-text-inner-content`,
+	{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
+);
+
 /**
  * @attr {string} id - REQUIRED: Unique identifier for the tab
  * @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
@@ -24,14 +29,11 @@ class Tab extends TabMixin(LitElement) {
 	static get styles() {
 		const styles = [ css`
 			.d2l-tab-text-inner-content {
+				--d2l-focus-ring-offset: 0;
 				display: flex;
 				padding: 0.1rem;
 			}
-			:host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text-inner-content {
-				border-radius: 0.3rem;
-				color: var(--d2l-color-celestine);
-				outline: 2px solid var(--d2l-color-celestine);
-			}
+			${focusRingStyles}
 			:host(:${unsafeCSS(getFocusPseudoClass())}) ::slotted(d2l-icon) {
 				color: var(--d2l-color-celestine);
 			}

package/components/tooltip/tooltip-help.js

@@ -1,10 +1,10 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
@@ -48,6 +48,7 @@ class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))
 				display: none;
 			}
 			#d2l-tooltip-help-text {
+				--d2l-focus-ring-offset: 0.05rem;
 				align-items: baseline;
 				background: none;
 				border: none;
@@ -66,15 +67,7 @@ class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))
 				align-self: center;
 			}
 
-			#d2l-tooltip-help-text:focus {
-				outline-style: none;
-			}
-			#d2l-tooltip-help-text:${unsafeCSS(getFocusPseudoClass())} {
-				border-radius: 0.05rem;
-				outline: 2px solid var(--d2l-color-celestine);
-				outline-offset: 0.05rem;
-				text-underline-offset: 0.1rem;
-			}
+			${getFocusRingStyles('#d2l-tooltip-help-text', { extraStyles: css`border-radius: 0.05rem; text-underline-offset: 0.1rem;` })}
 			:host([inherit-font-style]) #d2l-tooltip-help-text {
 				color: inherit;
 				font-size: inherit;

package/helpers/focus.js

@@ -1,3 +1,4 @@
+import { css, unsafeCSS } from 'lit';
 import { getComposedChildren, getComposedParent, getNextAncestorSibling, getPreviousAncestorSibling, isVisible } from './dom.js';
 
 const focusableElements = {
@@ -62,6 +63,20 @@ export function getFocusableDescendants(node, options) {
 export function getFocusPseudoClass() {
 	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
 }
+export function getFocusRingStyles(selector, { applyOnHover = false, extraStyles = null } = {}) {
+	const selectorDelegate = typeof selector === 'string' ? pseudoClass => `${selector}:${pseudoClass}` : selector;
+	const cssSelector = unsafeCSS(`${selectorDelegate(getFocusPseudoClass())}${applyOnHover ? `, ${selectorDelegate('hover')}` : ''}`);
+	return css`${cssSelector} {
+		${extraStyles ?? css``}
+		outline: 2px solid var(--d2l-focus-ring-color, var(--d2l-color-celestine));
+		outline-offset: var(--d2l-focus-ring-offset, 2px);
+	}
+	@media (prefers-contrast: more) {
+		${cssSelector} {
+			outline-color: var(--d2l-focus-ring-color, Highlight);
+		}
+	}`;
+}
 
 export function getLastFocusableDescendant(node, includeHidden) {
 	const composedChildren = getComposedChildren(node);

package/mixins/interactive/interactive-mixin.js

@@ -1,8 +1,8 @@
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { getFocusRingStyles, getNextFocusable } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getNextFocusable } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../../components/offscreen/offscreen.js';
@@ -26,13 +26,10 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	static get styles() {
-		return [offscreenStyles, css`
-			.interactive-focusing-toggle {
-				border-radius: 6px;
-				outline: 2px solid var(--d2l-color-celestine);
-				outline-offset: 2px;
-			}
-		`];
+		return [offscreenStyles, getFocusRingStyles(
+			() => '.interactive-focusing-toggle',
+			{ extraStyles: css`border-radius: 6px;` }
+		)];
 	}
 
 	constructor() {

package/package.json

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