@brightspace-ui/core 3.137.2 → 3.137.4

package/components/button/button-mixin.js

@@ -121,6 +121,18 @@ export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 		this.removeEventListener('click', this._handleClick, true);
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		const button = this.shadowRoot.querySelector(this.constructor.focusElementSelector);
+		if (!button) return;
+		button.addEventListener('focus', () => {
+			if (this.shadowRoot.querySelector(':focus-visible')) {
+				/** @ignore */
+				this.dispatchEvent(new CustomEvent('focus-visible'));
+			}
+		});
+	}
+
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has('ariaExpanded') && this.ariaExpanded !== undefined) {

package/components/button/button-split.js

@@ -5,6 +5,7 @@ import '../dropdown/dropdown-menu.js';
 import '../icons/icon.js';
 import '../menu/menu.js';
 import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -46,7 +47,8 @@ class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(L
 			 * ACCESSIBILITY: REQUIRED: Accessible text for the main action button
 			 * @type {string}
 			 */
-			text: { type: String, reflect: true, required: true }
+			text: { type: String, reflect: true, required: true },
+			_focusVisibleElem: { state: true }
 		};
 	}
 
@@ -60,7 +62,7 @@ class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(L
 			}
 			.container {
 				display: flex;
-				gap: 6px;
+				gap: 2px;
 			}
 			.main-action {
 				--d2l-button-start-end-radius: 0;
@@ -78,6 +80,14 @@ class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(L
 			::slotted(:not(d2l-button-split-item)) {
 				display: none;
 			}
+			.main-action-focus-visible .d2l-dropdown-opener {
+				--d2l-button-padding-inline-start: calc(0.6rem - 4px);
+				margin-inline-start: 4px;
+			}
+			.menu-opener-focus-visible .main-action {
+				--d2l-button-padding-inline-end: calc(1.5rem - 4px);
+				margin-inline-end: 4px;
+			}
 		`;
 	}
 
@@ -85,6 +95,7 @@ class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(L
 		super();
 		this.disabled = false;
 		this.primary = false;
+		this._focusVisibleElem = null;
 	}
 
 	static get focusElementSelector() {
@@ -92,22 +103,32 @@ class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(L
 	}
 
 	render() {
+		const classes = {
+			'container': true,
+			'main-action-focus-visible': (this._focusVisibleElem === 'main-action'),
+			'menu-opener-focus-visible': (this._focusVisibleElem === 'menu-opener'),
+		};
+
 		return html`
-			<div class="container" @click="${this.#suppressClick}">
+			<div class="${classMap(classes)}" @click="${this.#suppressClick}">
 				<d2l-button
+					@blur="${this.#handleMainActionBlur}"
 					class="main-action"
 					@click="${this.#handleMainActionClick}"
 					description="${ifDefined(this.description)}"
 					?disabled="${this.disabled}"
 					disabled-tooltip="${ifDefined(this.disabledTooltip)}"
+					@focus-visible="${this.#handleMainActionFocusVisible}"
 					?primary="${this.primary}">
 					${this.text}
 				</d2l-button>
 				<d2l-dropdown>
 					<d2l-button
 						aria-label="${this.localize('components.button-split.otherOptions')}"
+						@blur="${this.#handleMenuOpenerBlur}"
 						class="d2l-dropdown-opener"
 						?disabled="${this.disabled}"
+						@focus-visible="${this.#handleMenuOpenerFocusVisible}"
 						?primary="${this.primary}">
 						<d2l-icon icon="tier1:chevron-down"></d2l-icon>
 					</d2l-button>
@@ -126,14 +147,30 @@ class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(L
 		this.dispatchEvent(new CustomEvent('click', { detail: { key } }));
 	}
 
+	#handleMainActionBlur() {
+		this._focusVisibleElem = null;
+	}
+
 	#handleMainActionClick() {
 		this.#dispatchClick(this.key);
 	}
 
+	#handleMainActionFocusVisible() {
+		this._focusVisibleElem = 'main-action';
+	}
+
 	#handleMenuItemSelect(e) {
 		this.#dispatchClick(e.target.key);
 	}
 
+	#handleMenuOpenerBlur() {
+		this._focusVisibleElem = null;
+	}
+
+	#handleMenuOpenerFocusVisible() {
+		this._focusVisibleElem = 'menu-opener';
+	}
+
 	#suppressClick(e) {
 		e.stopPropagation();
 	}

package/components/card/card.js

@@ -1,11 +1,9 @@
 import '../colors/colors.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 /**
@@ -16,7 +14,7 @@ import { styleMap } from 'lit/directives/style-map.js';
  * @slot footer - Slot for footer content, such secondary actions
  * @slot header - Slot for header content, such as course image (no actionable elements)
  */
-class Card extends FocusMixin(RtlMixin(LitElement)) {
+class Card extends LitElement {
 
 	static get properties() {
 		return {
@@ -142,22 +140,14 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 				padding-bottom: 1.2rem;
 			}
 			.d2l-card-actions {
+				inset-inline-end: 0.6rem;
 				position: absolute;
-				right: 0.6rem;
 				top: 0.6rem;
 				/* this must be higher than footer z-index so dropdowns will be on top */
 				z-index: 3;
 			}
-			:host([dir="rtl"]) .d2l-card-actions {
-				left: 0.6rem;
-				right: auto;
-			}
 			.d2l-card-actions ::slotted(*) {
-				margin-left: 0.3rem;
-			}
-			:host([dir="rtl"]) .d2l-card-actions ::slotted(*) {
-				margin-left: 0;
-				margin-right: 0.3rem;
+				margin-inline-start: 0.3rem;
 			}
 			.d2l-card-badge {
 				line-height: 0;
@@ -237,6 +227,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		this.subtle = false;
 		this._active = false;
 		this._dropdownActionOpen = false;
+		this._focusOnFirstRender = false;
 		this._footerHidden = true;
 		this._hover = false;
 		this._tooltipShowing = false;
@@ -244,16 +235,17 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		this._onFooterResize = this._onFooterResize.bind(this);
 	}
 
-	static get focusElementSelector() {
-		return 'a';
-	}
-
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		const badgeObserver = new ResizeObserver(this._onBadgeResize);
 		badgeObserver.observe(this.shadowRoot.querySelector('.d2l-card-badge'));
 		const footerObserver = new ResizeObserver(this._onFooterResize);
 		footerObserver.observe(this.shadowRoot.querySelector('.d2l-card-footer'));
+
+		if (this._focusOnFirstRender) {
+			this._focusOnFirstRender = false;
+			this.focus();
+		}
 	}
 
 	render() {
@@ -308,6 +300,17 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
 		`;
 	}
 
+	focus() {
+		if (!this.hasUpdated) {
+			this._focusOnFirstRender = true;
+			return;
+		}
+
+		const elem = this.shadowRoot.querySelector('a[href]');
+		if (elem) elem.focus();
+		else super.focus();
+	}
+
 	_onBadgeResize(entries) {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];

package/package.json

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