@brightspace-ui/core 3.156.4 → 3.158.0

package/components/link/link-mixin.js

@@ -21,11 +21,6 @@ export const LinkMixin = superclass => class extends LocalizeCoreElement(supercl
 			 * @type {string}
 			 */
 			href: { type: String },
-			/**
-			 * Label for the link
-			 * @type {string}
-			 */
-			ariaLabel: { type: String, attribute: 'aria-label' },
 			/**
 			 * Where to display the linked URL
 			 * @type {string}
@@ -57,14 +52,19 @@ export const LinkMixin = superclass => class extends LocalizeCoreElement(supercl
 		`];
 	}
 
-	_render(inner, { rel = undefined, linkClasses = {}, tabindex = undefined } = {}) {
+	getNewWindowDescription(label) {
+		return label && this.target === '_blank' ? this.localize('components.link.open-in-new-window') : undefined;
+	}
+
+	_render(inner, { ariaLabel = undefined, rel = undefined, linkClasses = {}, tabindex = undefined } = {}) {
 		/*
 		* NOTICE:
 		* All html template whitespace within this component is critical to proper rendering and wrapping.
 		* Do not modify for readability!
 		*/
 		return html`<a
-			aria-label="${ifDefined(this.ariaLabel)}"
+			aria-label="${ifDefined(ariaLabel)}"
+			aria-description="${ifDefined(this.getNewWindowDescription(ariaLabel))}"
 			class="${classMap(linkClasses)}"
 			download="${ifDefined(this.download)}"
 			href="${ifDefined(this.href)}"

package/components/menu/demo/menu.html

@@ -4,6 +4,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import { mockFlag } from '../../../helpers/flags.js';
+			const urlParams = new URLSearchParams(window.location.search);
+			mockFlag('GAUD-8295-menu-item-link-new-window-icon', urlParams.get('link-new-window-icon') === 'true');
+			mockFlag('GAUD-8369-menu-item-link-click-changes', urlParams.get('link-click-changes') === 'true');
+		</script>
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import './custom-menu-item.js';
@@ -200,5 +206,12 @@
 				</template>
 			</d2l-demo-snippet>
 		</d2l-demo-page>
+
+		<script>
+			document.addEventListener('click', e => {
+				if (e.target.tagName !== 'D2L-MENU-ITEM-LINK') return;
+				console.log('Click event propagated up for router!', e.target);
+			});
+		</script>
 	</body>
 </html>

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

@@ -2,21 +2,24 @@ import { css, html, LitElement } from 'lit';
 import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LinkMixin } from '../link/link-mixin.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { MenuItemMixin } from './menu-item-mixin.js';
 import { menuItemStyles } from './menu-item-styles.js';
 
 const newWindowIconEnabled = getFlag('GAUD-8295-menu-item-link-new-window-icon', true);
 
+const menuItemClickChangesEnabled = getFlag('GAUD-8369-menu-item-link-click-changes', true);
+
 /**
  * A menu item component used for navigating.
  * @fires click - Dispatched when the link is clicked
  * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
-class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitElement)) : MenuItemMixin(LitElement)) {
+class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitElement)) : LocalizeCoreElement(MenuItemMixin(LitElement))) {
 
 	static get properties() {
-		if (newWindowIconEnabled) return {};
-		return {
+		// remove this block when cleaning up GAUD-8295-menu-item-link-new-window-icon
+		if (!newWindowIconEnabled) return {
 			/**
 			 * Prompts the user to save the linked URL instead of navigating to it.
 			 * Must be to a resource on the same origin.
@@ -33,7 +36,12 @@ class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitEl
 			 * Where to display the linked URL
 			 * @type {string}
 			 */
-			target: { type: String }
+			target: { type: String },
+			_ariaDescription: { type: String, attribute: 'aria-description', reflect: true },
+		};
+
+		return {
+			_ariaDescription: { type: String, attribute: 'aria-description', reflect: true },
 		};
 	}
 
@@ -90,9 +98,14 @@ class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitEl
 		];
 	}
 
+	constructor() {
+		super();
+		this._letClickPropagate = true;
+	}
+
 	firstUpdated() {
 		super.firstUpdated();
-		this.addEventListener('click', this._onClick);
+		if (!menuItemClickChangesEnabled) this.addEventListener('click', this._onClick); // remove when cleaning up GAUD-8369-menu-item-link-click-changes
 		this.addEventListener('keydown', this._onKeyDown);
 	}
 
@@ -113,10 +126,23 @@ class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitEl
 			${this._renderNewWindowIcon()}
 			<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
 		`;
-		return this._render(inner, { rel: this.target ? 'noreferrer noopener' : undefined, tabindex: -1 });
+		return this._render(inner, { ariaLabel: this._ariaLabel, rel: this.target ? 'noreferrer noopener' : undefined, tabindex: -1 });
 
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (newWindowIconEnabled && changedProperties.has('_ariaLabel') || changedProperties.has('target')) {
+			this._ariaDescription = this.getNewWindowDescription(this._ariaLabel);
+		}
+	}
+
+	// remove this function when cleaning up GAUD-8295-menu-item-link-new-window-icon
+	getNewWindowDescription(label) {
+		return label && this.target === '_blank' ? this.localize('components.link.open-in-new-window') : undefined;
+	}
+
+	// remove this function when cleaning up GAUD-8369-menu-item-link-click-changes
 	_getTarget() {
 		if (this.target && this.target !== '') {
 			return this.target;
@@ -129,19 +155,27 @@ class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitEl
 		return null;
 	}
 
+	// remove this function when cleaning up GAUD-8369-menu-item-link-click-changes
 	_onClick() {
 		if (this.shadowRoot) this.shadowRoot.querySelector('a').dispatchEvent(new CustomEvent('click'));
 	}
 
 	_onKeyDown(e) {
-		if (e.keyCode === this.__keyCodes.ENTER || e.keyCode === this.__keyCodes.SPACE) {
-			const target = this._getTarget();
-			if (target === '_parent') {
-				window.parent.location.assign(this.href);
-			} else if (target === '_top') {
-				window.top.location.assign(this.href);
-			} else {
-				window.location.assign(this.href);
+		if (menuItemClickChangesEnabled) {
+			if (e.keyCode === this.__keyCodes.ENTER || e.keyCode === this.__keyCodes.SPACE) {
+				this.shadowRoot.querySelector('a').click();
+			}
+		} else { // remove this block when cleaning up GAUD-8369-menu-item-link-click-changes
+			super._onKeyDown(e);
+			if (e.keyCode === this.__keyCodes.ENTER || e.keyCode === this.__keyCodes.SPACE) {
+				const target = this._getTarget();
+				if (target === '_parent') {
+					window.parent.location.assign(this.href);
+				} else if (target === '_top') {
+					window.top.location.assign(this.href);
+				} else {
+					window.location.assign(this.href);
+				}
 			}
 		}
 	}

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

@@ -1,6 +1,8 @@
+import { getFlag } from '../../helpers/flags.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
 const defaultLines = 2;
+const menuItemClickChangesEnabled = getFlag('GAUD-8369-menu-item-link-click-changes', true);
 
 export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(superclass) {
 
@@ -54,7 +56,8 @@ export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(s
 			 */
 			description: { type: String },
 			_ariaDisabled: { type: String, attribute: 'aria-disabled', reflect: true },
-			_ariaLabel: { type: String, attribute: 'aria-label', reflect: true }
+			_ariaLabel: { type: String, attribute: 'aria-label', reflect: true },
+			_letClickPropagate: { state: true }
 		};
 	}
 
@@ -74,6 +77,7 @@ export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(s
 		this.role = 'menuitem';
 		/** @ignore */
 		this.tabindex = -1;
+		this._letClickPropagate = false;
 	}
 
 	firstUpdated(changedProperties) {
@@ -82,7 +86,7 @@ export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(s
 		this.addEventListener('click', this.__onClick);
 		this.addEventListener('d2l-hierarchical-view-hide-complete', this.__onHideComplete);
 		this.addEventListener('dom-change', this.__onDomChange);
-		this.addEventListener('keydown', this.__onKeyDown);
+		this.addEventListener('keydown', this._onKeyDown);
 
 		this.__initializeItem();
 
@@ -152,7 +156,12 @@ export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(s
 	}
 
 	__onClick(e) {
-		e.stopPropagation();
+		if (menuItemClickChangesEnabled) {
+			if (!this._letClickPropagate) e.stopPropagation();
+		} else { // remove this block when cleaning up GAUD-8369-menu-item-link-click-changes
+			e.stopPropagation();
+		}
+
 		this.__action();
 	}
 
@@ -171,7 +180,12 @@ export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(s
 		this.setAttribute('tabindex', '0');
 	}
 
-	__onKeyDown(e) {
+	_onHidden() {
+		/** Dispatched when the visibility of the menu item changes */
+		this.dispatchEvent(new CustomEvent('d2l-menu-item-visibility-change', { bubbles: true, composed: true }));
+	}
+
+	_onKeyDown(e) {
 		if (e.target !== this) {
 			return;
 		}
@@ -188,9 +202,4 @@ export const MenuItemMixin = superclass => class extends PropertyRequiredMixin(s
 		}
 	}
 
-	_onHidden() {
-		/** Dispatched when the visibility of the menu item changes */
-		this.dispatchEvent(new CustomEvent('d2l-menu-item-visibility-change', { bubbles: true, composed: true }));
-	}
-
 };

package/custom-elements.json

@@ -10540,43 +10540,6 @@
       "name": "d2l-menu-item-link",
       "path": "./components/menu/menu-item-link.js",
       "description": "A menu item component used for navigating.",
-      "attributes": [
-        {
-          "name": "download",
-          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
-          "type": "string"
-        },
-        {
-          "name": "href",
-          "description": "REQUIRED: The url the menu item link navigates to",
-          "type": "string"
-        },
-        {
-          "name": "target",
-          "description": "Where to display the linked URL",
-          "type": "string"
-        }
-      ],
-      "properties": [
-        {
-          "name": "download",
-          "attribute": "download",
-          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
-          "type": "string"
-        },
-        {
-          "name": "href",
-          "attribute": "href",
-          "description": "REQUIRED: The url the menu item link navigates to",
-          "type": "string"
-        },
-        {
-          "name": "target",
-          "attribute": "target",
-          "description": "Where to display the linked URL",
-          "type": "string"
-        }
-      ],
       "events": [
         {
           "name": "click",

package/package.json

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