@brightspace-ui/core 3.64.3 → 3.66.0

package/components/button/button-toggle.js

@@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit';
 
 /**
  * A button container component for button toggles.
+ * @fires click - Internal event
  */
 class ButtonToggle extends LitElement {
 
@@ -78,17 +79,28 @@ class ButtonToggle extends LitElement {
 		elem.focus();
 	}
 
+	_clickCancelled(e) {
+		e.stopPropagation();
+		const customClick = new CustomEvent('click', {
+			cancelable: true
+		});
+		e.target.dispatchEvent(customClick);
+		return customClick.defaultPrevented;
+	}
+
 	async _handleClick(pressed) {
 		this.pressed = pressed;
 		await this.updateComplete;
 		this.focus();
 	}
 
-	_handleNotPressedClick() {
+	_handleNotPressedClick(e) {
+		if (this._clickCancelled(e)) return;
 		this._handleClick(true);
 	}
 
-	_handlePressedClick() {
+	_handlePressedClick(e) {
+		if (this._clickCancelled(e)) return;
 		this._handleClick(false);
 	}
 

package/components/button/demo/button-toggle.html

@@ -54,6 +54,30 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Toggle Button (consumer manages state)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle id="toggle-button-icon-consumer-manage-state">
+						<d2l-button-icon slot="not-pressed" icon="tier1:pin-hollow" text="Unpinned, click to pin." id="button-icon-not-pressed"></d2l-button-icon>
+						<d2l-button-icon slot="pressed" icon="tier1:pin-filled" text="Pinned, click to unpin." id="button-icon-pressed"></d2l-button-icon>
+					</d2l-button-toggle>
+					<script>
+						const buttonToggle = document.querySelector('#toggle-button-icon-consumer-manage-state');
+						buttonToggle.addEventListener('d2l-button-toggle-change', e => console.log(e));
+
+						document.querySelector('#button-icon-not-pressed').addEventListener('click', (e) => {
+							e.preventDefault();
+							buttonToggle.pressed = true;
+						});
+						document.querySelector('#button-icon-pressed').addEventListener('click', (e) => {
+							e.preventDefault();
+							buttonToggle.pressed = false;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

package/components/link/README.md

@@ -47,8 +47,8 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
 
 | Property | Type | Description |
 |--|--|--|
+| `aria-label` | String | Label to provide more context for screen reader users when the link text is not enough |
 | `href` | String, required | URL or URL fragment of the link |
-| `aria-label` | String | Sets an accessible label |
 | `download` | Boolean | Download a URL instead of navigating to it |
 | `main` | Boolean | Whether to apply the "main" link style |
 | `lines` | Number | The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified. |
@@ -56,14 +56,6 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
 | `target` | String | Where to display the linked URL |
 <!-- docs: end hidden content -->
 
-### Accessibility Properties
-
-To make your usage of `d2l-link` accessible, use the following property when applicable:
-
-| Attribute | Description |
-|--|--|
-| `aria-label` | Use when text in link does not provide enough context. |
-
 ## Applying link styles to native anchor elements
 
 Alternately, you can apply link styles to a native `<a>` element by importing the styles and placing the `d2l-link` CSS class on the element.
@@ -91,3 +83,8 @@ Alternately, you can apply link styles to a native `<a>` element by importing th
 ```
 
 Add the `d2l-link-main` or `d2l-link-small` CSS classes to the `<a>` element to apply those styles.
+
+## Accessibility
+ - The `d2l-link` component follows the W3C's best practices for the [Link Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/)
+ - When `target` is set to `_blank`, the `d2l-link` component follows [WCAG technique G201](https://www.w3.org/TR/WCAG20-TECHS/G201.html), and gives users an advanced warning that interacting with the link will open it in a new window
+    - While this is simply read out to screen reader users, it is also visually represented by the `new-window` icon

package/components/link/link.js

@@ -58,7 +58,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 	static get properties() {
 		return {
 			/**
-			 * Sets an accessible label
+			 * ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough
 			 * @type {string}
 			 */
 			ariaLabel: { type: String, attribute: 'aria-label' },

package/custom-elements.json

@@ -739,6 +739,10 @@
         }
       ],
       "events": [
+        {
+          "name": "click",
+          "description": "Internal event"
+        },
         {
           "name": "d2l-button-toggle-change",
           "description": "Dispatched when the pressed state changes"
@@ -7806,7 +7810,7 @@
       "attributes": [
         {
           "name": "aria-label",
-          "description": "Sets an accessible label",
+          "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
           "type": "string"
         },
         {
@@ -7848,7 +7852,7 @@
         {
           "name": "ariaLabel",
           "attribute": "aria-label",
-          "description": "Sets an accessible label",
+          "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
           "type": "string"
         },
         {

package/package.json

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