@brightspace-ui/core 3.97.0 → 3.97.2

package/components/card/card.js

@@ -221,19 +221,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 			}
 			@media (prefers-reduced-motion: no-preference) {
 				:host {
-					transition: transform 300ms ease-out 50ms, box-shadow 0.2s;
-				}
-
-				:host(:hover),
-				:host([subtle]:hover),
-				:host([_active]:hover),
-				:host([subtle][_active]:hover) {
-					transform: translateY(-4px);
-				}
-
-				:host(:not([href])),
-				:host([subtle]:not([href])) {
-					transform: none;
+					transition: box-shadow 0.2s;
 				}
 			}
 		`];

package/components/empty-state/empty-state-action-button.js

@@ -1,6 +1,7 @@
 import '../button/button.js';
 import '../button/button-subtle.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
@@ -9,7 +10,7 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  * @fires d2l-empty-state-action - Dispatched when the action button is clicked
  * @fires d2l-empty-state-illustrated-check - Internal event
  */
-class EmptyStateActionButton extends PropertyRequiredMixin(LitElement) {
+class EmptyStateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -40,6 +41,10 @@ class EmptyStateActionButton extends PropertyRequiredMixin(LitElement) {
 		this._illustrated = false;
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-empty-state-action';
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		requestAnimationFrame(() => {

package/components/empty-state/empty-state-action-link.js

@@ -1,12 +1,13 @@
 import { html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { linkStyles } from '../link/link.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
 /**
  * `d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.
  */
-class EmptyStateActionLink extends PropertyRequiredMixin(LitElement) {
+class EmptyStateActionLink extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -27,6 +28,10 @@ class EmptyStateActionLink extends PropertyRequiredMixin(LitElement) {
 		return [bodyCompactStyles, linkStyles];
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-link';
+	}
+
 	render() {
 		const actionLink = this.text && this.href
 			? html`

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

@@ -2,9 +2,9 @@ import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-sty
 import { html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { EmptyStateMixin } from './empty-state-mixin.js';
 import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { runAsync } from '../../directives/run-async/run-async.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -17,7 +17,7 @@ const illustrationAspectRatio = 500 / 330;
  * @slot - Slot for empty state actions
  * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
  */
-class EmptyStateIllustrated extends LoadingCompleteMixin(PropertyRequiredMixin(LitElement)) {
+class EmptyStateIllustrated extends LoadingCompleteMixin(EmptyStateMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -74,7 +74,7 @@ class EmptyStateIllustrated extends LoadingCompleteMixin(PropertyRequiredMixin(L
 		return html`
 			${this.#renderIllustration()}
 			<p class="${classMap(titleClass)}">${this.titleText}</p>
-			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+			<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
 			<slot class="action-slot"></slot>
 		`;
 	}

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

@@ -0,0 +1,22 @@
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+export const EmptyStateMixin = superclass => class extends PropertyRequiredMixin(superclass) {
+
+	focus() {
+		if (!this.hasUpdated) {
+			return;
+		}
+		const action = this.shadowRoot?.querySelector('.action-slot').assignedElements().find(
+			el => el.tagName === 'D2L-EMPTY-STATE-ACTION-BUTTON' || el.tagName === 'D2L-EMPTY-STATE-ACTION-LINK'
+		);
+		if (action !== undefined) {
+			action.focus();
+			return;
+		}
+		const title = this.shadowRoot?.querySelector('.d2l-empty-state-description');
+		if (title !== null) {
+			title.focus();
+		}
+	}
+
+};

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

@@ -2,14 +2,13 @@ import '../button/button-subtle.js';
 import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
 import { html, LitElement } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+import { EmptyStateMixin } from './empty-state-mixin.js';
 
 /**
  * The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.
  * @slot - Slot for empty state actions
  */
-class EmptyStateSimple extends PropertyRequiredMixin(RtlMixin(LitElement)) {
+class EmptyStateSimple extends EmptyStateMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -28,7 +27,7 @@ class EmptyStateSimple extends PropertyRequiredMixin(RtlMixin(LitElement)) {
 	render() {
 		return html`
 			<div class="empty-state-container">
-				<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+				<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
 				<slot class="action-slot"></slot>
 			</div>
 		`;

package/components/empty-state/empty-state-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 emptyStateStyles = css`
 
@@ -20,6 +21,12 @@ export const emptyStateStyles = css`
 		display: inline;
 	}
 
+	.d2l-empty-state-description:${unsafeCSS(getFocusPseudoClass())} {
+		border-radius: 0.3rem;
+		outline: 2px solid var(--d2l-color-celestine);
+		outline-offset: 3px;
+	}
+
 `;
 
 export const emptyStateSimpleStyles = css`

package/package.json

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