@brightspace-ui/core 2.82.0 → 2.82.1

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

@@ -1,9 +1,11 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } 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 { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
+
 import { requestInstance } from '../../mixins/provider-mixin.js';
 
 export const htmlBlockContentStyles = css`
@@ -99,7 +101,7 @@ export const htmlBlockContentStyles = css`
 		color: var(--d2l-color-celestine-minus-1, #004489);
 		text-decoration: underline;
 	}
-	a:focus {
+	a:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 3px;
 		outline: 2px solid var(--d2l-color-celestine, #006fbf);
 		outline-offset: 1px;

package/components/link/link.js

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const linkStyles = css`
@@ -19,7 +20,7 @@ export const linkStyles = css`
 		color: var(--d2l-color-celestine-minus-1);
 		text-decoration: underline;
 	}
-	.d2l-link:focus {
+	.d2l-link:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 3px;
 		outline: 2px solid var(--d2l-color-celestine);
 		outline-offset: 1px;

package/components/link/link.scss

@@ -14,12 +14,17 @@
 		color: $d2l-color-celestine-minus-1;
 		text-decoration: underline;
 	}
-	&:focus,
-	&.d2l-link-focus {
+	&:focus-visible {
 		outline: 2px solid $d2l-color-celestine;
 		outline-offset: 1px;
 		text-decoration: underline;
 	}
+	.d2l-focus-visible-not-supported &:focus {
+		outline: 2px solid $d2l-color-celestine;
+		outline-offset: 1px;
+		text-decoration: underline;
+	}
+
 	&[main] {
 		font-weight: 700;
 	}

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

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 export const menuItemStyles = css`
 	:host {
@@ -20,9 +21,8 @@ export const menuItemStyles = css`
 		color: var(--d2l-menu-foreground-color-hover);
 	}
 
-	/** separated from hover selectors because Safari <15.4 is having trouble parsing these */
-	:host(:focus-visible),
-	:host([first]:focus-visible) {
+	:host(:${unsafeCSS(getFocusPseudoClass())}),
+	:host([first]:${unsafeCSS(getFocusPseudoClass())}) {
 		border-radius: 6px;
 		border-top-color: transparent;
 		color: var(--d2l-menu-foreground-color-hover);
@@ -36,8 +36,7 @@ export const menuItemStyles = css`
 		opacity: 0.75;
 	}
 
-	/** separated because Safari <15.4 is having trouble parsing these */
-	:host([disabled]:focus-visible) {
+	:host([disabled]:${unsafeCSS(getFocusPseudoClass())}) {
 		cursor: default;
 		opacity: 0.75;
 	}

package/helpers/README.md

@@ -129,6 +129,9 @@ getComposedActiveElement()
 // gets the first focusable descendant given a node, including those within the shadow DOM
 getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly)
 
+// gets the focus pseudo-class to used in selectors (focus-visible if supported, or focus)
+getFocusPseudoClass()
+
 // gets the last focusable descendant given a node, including those within the shadow DOM
 getLastFocusableDescendant(node, includeHidden)
 
@@ -144,6 +147,9 @@ getPreviousFocusableAncestor(node, includeHidden, includeTabbablesOnly)
 // returns true/false whether the element is focusable
 isFocusable(node, includeHidden, includeTabbablesOnly, includeDisabled)
 
+// 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)

package/helpers/focus.js

@@ -52,6 +52,10 @@ export function getFirstFocusableDescendant(node, includeHidden, predicate, incl
 	return null;
 }
 
+export function getFocusPseudoClass() {
+	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
+}
+
 export function getLastFocusableDescendant(node, includeHidden) {
 	const composedChildren = getComposedChildren(node);
 
@@ -182,6 +186,25 @@ export function isFocusable(node, includeHidden, includeTabbablesOnly, includeDi
 
 }
 
+let _isFocusVisibleSupported;
+
+export function isFocusVisibleSupported() {
+	if (_isFocusVisibleSupported === undefined) {
+		const style = document.createElement('style');
+		try {
+			document.head.appendChild(style);
+			style.sheet.insertRule(':focus-visible { color: inherit; }');
+			_isFocusVisibleSupported = true;
+		} catch (error) {
+			_isFocusVisibleSupported = false;
+		} finally {
+			style.remove();
+		}
+	}
+
+	return _isFocusVisibleSupported;
+}
+
 export function tryApplyFocus(elem) {
 	if (isFocusable(elem)) {
 		forceFocusVisible(elem);

package/package.json

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