@brightspace-ui/core 1.210.0 → 1.210.1

package/README.md

@@ -119,20 +119,23 @@ Note: The axe tests require `prefers-reduced-motion` emulation to be turned on i
 
 This repo uses the [@brightspace-ui/visual-diff utility](https://github.com/BrightspaceUI/visual-diff/) to compare current snapshots against a set of golden snapshots stored in source control.
 
-The golden snapshots in source control must be updated by Github Actions.  If your PR's code changes result in visual differences, a PR with the new goldens will be automatically opened for you against your branch.
+The golden snapshots in source control must be updated by the [visual-diff GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/visual-diff).  If a pull request results in visual differences, a draft pull request with the new goldens will automatically be opened against its branch.
 
-If you'd like to run the tests locally to help troubleshoot or develop new tests, you can use these commands:
+To run the tests locally to help troubleshoot or develop new tests, first install these dependencies:
 
 ```shell
-# Install dependencies locally
-npm install mocha puppeteer @brightspace-ui/visual-diff --no-save
+npm install @brightspace-ui/visual-diff@X mocha@Y puppeteer@Z  --no-save
+```
+
+Replace `X`, `Y` and `Z` with [the current versions](https://github.com/BrightspaceUI/actions/tree/main/visual-diff#current-dependency-versions) the action is using.
+
+Then run the tests:
 
+```shell
 # run visual-diff tests
 npx mocha './**/*.visual-diff.js' -t 10000
-
 # subset of visual-diff tests:
 npx mocha './**/*.visual-diff.js' -t 10000 -g some-pattern
-
 # update visual-diff goldens
 npx mocha './**/*.visual-diff.js' -t 10000 --golden
 ```

package/components/dropdown/dropdown-content-mixin.js

@@ -394,7 +394,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		if (this.opened) {
 			this.close();
 		} else {
-			this.open(applyFocus);
+			this.open(!this.noAutoFocus && applyFocus);
 		}
 	}
 
@@ -518,11 +518,10 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 			await this.__position();
 			this._showBackdrop = this._useMobileStyling && this.mobileTray;
-
 			if (!this.noAutoFocus && this.__applyFocus) {
 				const focusable = getFirstFocusableDescendant(this);
 				if (focusable) {
-					// bumping this to the next frame is required to prevent Legacy-Edge from crazily invoking click on the focused element
+					// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
 					requestAnimationFrame(() => focusable.focus());
 				} else {
 					content.setAttribute('tabindex', '-1');
@@ -1014,7 +1013,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			const content = this.__getContentContainer();
 			const focusable = getFirstFocusableDescendant(content);
 			if (focusable) {
-				// bumping this to the next frame is required to prevent Legacy-Edge from crazily invoking click on the focused element
+				// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
 				requestAnimationFrame(() => focusable.focus());
 			} else {
 				content.setAttribute('tabindex', '-1');

package/components/dropdown/dropdown-menu.js

@@ -112,9 +112,7 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 
 		menu.resize();
 
-		if (this.__applyFocus) {
-			menu.focus();
-		}
+		menu.focus();
 	}
 
 	_onSelect(e) {

package/components/dropdown/dropdown-opener-mixin.js

@@ -262,7 +262,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				this._isHovering = false;
 				this.openDropdown(false);
 			}
-		} else this.toggleOpen(false);
+		} else this.toggleOpen(true);
 	}
 
 	/* used by open-on-hover option */

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

@@ -1,4 +1,6 @@
-export const MenuItemMixin = superclass => class extends superclass {
+
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMixin(superclass) {
 
 	static get properties() {
 		return {

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

@@ -15,9 +15,10 @@ export const menuItemStyles = css`
 		outline: none;
 		width: 100%;
 	}
-	:host(:focus),
+
 	:host(:hover),
-	:host([first]:focus),
+	:host(.focus-visible),
+	:host(.focus-visible[first]),
 	:host([first]:hover) {
 		background-color: var(--d2l-menu-background-color-hover);
 		border-bottom: 1px solid var(--d2l-menu-border-color-hover);
@@ -26,7 +27,7 @@ export const menuItemStyles = css`
 		z-index: 2;
 	}
 
-	:host([disabled]), :host([disabled]:hover), :host([disabled]:focus) {
+	:host([disabled]), :host([disabled]:hover), :host([disabled].focus-visible) {
 		cursor: default;
 		opacity: 0.75;
 	}
@@ -39,7 +40,7 @@ export const menuItemStyles = css`
 		border-top-color: transparent;
 	}
 
-	:host([last]:focus),
+	:host([last].focus-visible),
 	:host([last]:hover) {
 		border-bottom-color: var(--d2l-menu-border-color-hover);
 	}

package/components/menu/menu.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';
 
@@ -20,7 +21,7 @@ const keyCodes = {
  * @slot - Menu items
  * @fires d2l-menu-resize - Dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
  */
-class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
+class Menu extends ThemeMixin(HierarchicalViewMixin(FocusVisiblePolyfillMixin(LitElement))) {
 
 	static get properties() {
 		return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.210.0",
+  "version": "1.210.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -57,9 +57,10 @@
     "eslint-plugin-lit": "^1",
     "eslint-plugin-sort-class-members": "^1",
     "lit-analyzer": "^1",
-    "node-sass": "^6",
+    "node-sass": "^7",
     "sinon": "^12",
-    "stylelint": "^14"
+    "stylelint": "^14",
+    "web-test-runner-performance": "^0.1.4"
   },
   "dependencies": {
     "@brightspace-ui/intl": "^3",

package/tools/perf-test-helper.js

@@ -1,45 +0,0 @@
-import chai from '@open-wc/testing/import-wrappers/chai.js';
-import { fixture } from '@open-wc/testing';
-
-const numComponents = 1000;
-
-export async function runTest(element) {
-	return new Promise((resolve) => {
-
-		let total = 0;
-		let count = 0;
-		window.d2lPerfTestInProgress = true;
-		document.body.addEventListener('d2l-component-perf', (e) => {
-			count++;
-			total += e.detail.value;
-			if (count === numComponents) {
-				const avg = Math.round(total / count);
-				delete window.d2lPerfTestInProgress;
-				resolve(avg);
-			}
-		});
-
-		for (let i = 0; i < numComponents; i++) {
-			fixture(element);
-		}
-
-	});
-}
-
-export const chaiPerf = (_chai, utils) => {
-
-	utils.addMethod(_chai.Assertion.prototype, 'performant', function perfTest(baseline) {
-		// eslint-disable-next-line no-invalid-this
-		const fixture = this._obj;
-		const result = runTest(fixture).then(results => {
-			new _chai.Assertion(results).to.be.below(baseline);
-		});
-		// eslint-disable-next-line no-invalid-this
-		this.then = result.then.bind(result);
-		// eslint-disable-next-line no-invalid-this
-		return this;
-	});
-
-};
-
-chai.use(chaiPerf);