@brightspace-ui/core 1.176.4 → 1.178.0

package/components/count-badge/README.md

@@ -24,6 +24,21 @@ The `d2l-count-badge` element is a web component to display a number count, eith
 | `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
 | `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
 | `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
+| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
+| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
+| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
+| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
+
+### Accessibility Properties
+
+To make your `d2l-count-badge` accessible, use the following properties when applicable:
+
+| Attribute | Description |
+|--|--|
+| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
+| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
+| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
+| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
 
 ## Future Enhancements
 

package/components/count-badge/count-badge.js

@@ -1,18 +1,53 @@
 import '../colors/colors.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 class CountBadge extends RtlMixin(LitElement) {
 
 	static get properties() {
 		return {
+			/**
+			 * Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.
+			 * @type {boolean}
+			 */
+			announceChanges: {
+				type: Boolean,
+				attribute: 'announce-changes'
+			},
+			/**
+			 * Optionally add a tooltip on the badge. Defaults to false.
+			 * @type {boolean}
+			 */
+			hasTooltip: {
+				type: Boolean,
+				attribute: 'has-tooltip'
+			},
+			/**
+			 * Optionally choose to not render the count badge when the number is zero. Defaults to false.
+			 * @type {boolean}
+			 */
+			hideZero: {
+				type: Boolean,
+				attribute: 'hide-zero'
+			},
+			/**
+			 * Optionally specify a digit limit, after which numbers are truncated. Defaults to two for "notification" type and no limit for "count" type.
+			 * @type {number}
+			 */
+			maxDigits: {
+				type: Number,
+				attribute: 'max-digits'
+			},
 			/**
 			 * The number to be displayed on the badge. Must be a positive integer.
 			 * @type {number}
 			 */
 			number: {
 				type: Number,
-				reflect: true,
 				attribute: 'number'
 			},
 			/**
@@ -25,37 +60,34 @@ class CountBadge extends RtlMixin(LitElement) {
 				attribute: 'size'
 			},
 			/**
-			 * The type of the badge. Defaults to "count".
-			 * @type {'count'|'notification'}
+			 * Optionally choose to add a tab stop to the badge. Defaults to false.
+			 * @type {boolean}
 			 */
-			type: {
-				type: String,
-				reflect: true,
-				attribute: 'type'
+			tabStop: {
+				type: Boolean,
+				attribute: 'tab-stop'
 			},
 			/**
-			 * Optionally specify a digit limit, after which numbers are truncated. Defaults to two for "notification" type and no limit for "count" type.
-			 * @type {number}
+			 * * Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.
+			 * @type {string}
 			 */
-			maxDigits: {
-				type: Number,
-				reflect: true,
-				attribute: 'max-digits'
+			text: {
+				type: String
 			},
 			/**
-			 * Optionally choose to not render the count badge when the number is zero. Defaults to false.
-			 * @type {boolean}
+			 * The type of the badge. Defaults to "count".
+			 * @type {'count'|'notification'}
 			 */
-			hideZero: {
-				type: Boolean,
+			type: {
+				type: String,
 				reflect: true,
-				attribute: 'hide-zero'
-			},
+				attribute: 'type'
+			}
 		};
 	}
 
 	static get styles() {
-		return [ css`
+		return [offscreenStyles, css`
 		:host([hidden]) {
 			display: none;
 		}
@@ -112,9 +144,16 @@ class CountBadge extends RtlMixin(LitElement) {
 
 	constructor() {
 		super();
-		this.type = 'count';
-		this.size = 'small';
+		this.announceChanges = false;
+		this.hasTooltip = false;
 		this.hideZero = false;
+		this.size = 'small';
+		this.tabStop = false;
+		this.text = '';
+		this.type = 'count';
+
+		this._badgeId = getUniqueId();
+		this._textId = getUniqueId();
 	}
 
 	connectedCallback() {
@@ -134,7 +173,17 @@ class CountBadge extends RtlMixin(LitElement) {
 			numberString = `${'9'.repeat(this.maxDigits)}+`;
 		}
 		return html`
-        	<div class="d2l-count-badge-number">${numberString}</div>`;
+        	<div
+			class="d2l-count-badge-number" 
+			id="${this._badgeId}"
+			tabindex="${ifDefined(this.tabStop || this.hasTooltip ? '0' : undefined)}" 
+			aria-labelledby="${ifDefined(this.hasTooltip ? undefined : this._textId)}">
+					<div aria-hidden="true">${numberString}</div>
+					${this.hasTooltip ?
+		html`<d2l-tooltip id="${this._textId}" for="${this._badgeId}" aria-live="${this.announceChanges ? 'polite' : 'off'}">${this.text}</d2l-tooltip>`
+		: html`<span id="${this._textId}" class="d2l-offscreen" aria-live="${this.announceChanges ? 'polite' : 'off'}">"${this.text}"</span>`}
+			</div>
+			`;
 	}
 }
 

package/components/count-badge/demo/count-badge.html

@@ -9,6 +9,7 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../count-badge.js';
+			import '../../button/button.js';
         </script>
 	</head>
 	<body unresolved>
@@ -17,22 +18,43 @@
 			<h2>Small Notification Badge</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-count-badge size="small" type="notification" number="1"></d2l-count-badge>
-					<d2l-count-badge size="small" type="notification" number="10"></d2l-count-badge>
-					<d2l-count-badge size="small" type="notification" number="100"></d2l-count-badge>
+					<d2l-count-badge size="small" tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
+					<d2l-count-badge size="small"  text="10 new notifications."  type="notification" number="10"></d2l-count-badge>
+					<d2l-count-badge size="small"  text="100 new notifications." type="notification" number="100"></d2l-count-badge>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Small Notification Badge with live region</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-count-badge id="badge-announce-changes"size="small" announce-changes tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
+					<d2l-button id="increment-count">Increment Count</d2l-button>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Large Count Badge</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-count-badge size="large" type="count" number="1"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="10"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="100"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="777777"></d2l-count-badge>
-					<d2l-count-badge size="large" type="count" number="777777" max-digits="5"></d2l-count-badge>
+					<d2l-count-badge size="large" text="1 new notification." type="count" number="1"></d2l-count-badge>
+					<d2l-count-badge size="large" text="10 new notifications." type="count" number="10"></d2l-count-badge>
+					<d2l-count-badge size="large" text="100 new notifications." type="count" number="100"></d2l-count-badge>
+					<d2l-count-badge size="large" text="777777 new notifications." type="count" number="777777"></d2l-count-badge>
+					<d2l-count-badge size="large" text="777777 new notifications."type="count" number="777777" max-digits="5"></d2l-count-badge>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Small Notification Badge with Tooltip</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-count-badge size="small" has-tooltip text=" 3 new notification." type="notification" number="1"></d2l-count-badge>
 				</template>
 			</d2l-demo-snippet>
 		</d2l-demo-page>
+		<script type="module">
+			document.getElementById('increment-count').addEventListener('click', () => {
+				document.getElementById('badge-announce-changes').number += 1;
+				document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
+			});
+		</script>
 	</body>
 </html>

package/components/dialog/README.md

@@ -1,24 +1,98 @@
 # Dialogs
 
-## d2l-dialog
+Dialogs interrupt the user to complete a set of tasks, confirm an action, or offer important options.
+
+<!-- docs: demo autoSize:false size:large -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
+  import '@brightspace-ui/core/components/dialog/dialog.js';
+
+  window.addEventListener('load', function () {
+    setTimeout(function() {
+      var dialog = document.querySelector('#dialog');
+      dialog.opened = true;
+    }, 100);
+  });
+</script>
+
+<d2l-dialog id="dialog" title-text="Dialog Title">
+  <div>Some dialog content</div>
+  <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
+  <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+</d2l-dialog>
+```
+
+## General Dialog [d2l-dialog]
 
 The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary content, and a `footer` slot for workflow buttons. Apply the `data-dialog-action` attribute to workflow buttons to automatically close the dialog with the action value.
 
+### Best Practices
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Keep dialogs small and easy to understand
+* Limit workflow buttons to 2
+* Label primary actions with clear and predictable language. Use verbs like, “Add” or “Save” that indicate the outcome of a dialog rather than, “OK” or “Close”
+* Keep dialog titles concise
+* Maintain a language relationship between the action that triggered the dialog, dialog title, and dialog primary button.
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t use a dialog when you could reasonably use an alternative that preserves user context, like expanding options inline
+* Don’t use a dialog to show error, success, or warning messages. Use an inline or toast alert instead.
+* Avoid creating large, complex dialogs
+* Avoid invoking a dialog from another dialog (nested dialogs)
+* Avoid a title length that could easily wrap to two lines
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
+<!-- docs: start hidden content -->
 ![Dialog](./screenshots/dialog.png?raw=true)
+<!-- docs: end hidden content -->
 
+<!-- docs: demo live name:d2l-dialog autoSize:false display:block size:large -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog.js';
 </script>
+<script>
+  document.querySelector('#open').addEventListener('click', () => {
+    document.querySelector('#dialog').opened = true;
+  });
+</script>
 
 <d2l-button id="open">Show Dialog</d2l-button>
 
-<d2l-dialog title-text="Dialog Title">
+<d2l-dialog id="dialog" title-text="Dialog Title">
   <div>Some dialog content</div>
   <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
   <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 </d2l-dialog>
 ```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `title-text` | String, required | Text displayed in the header of the dialog |
+| `async` | Boolean | Whether to render a loading-spinner and wait for state changes via [AsyncContainerMixin](../../mixins/async-container) |
+| `opened` | Boolean | Whether or not the dialog is open |
+| `width` | Number, default: `600` | The preferred width (unit-less) for the dialog |
+
+### Events
+
+- `d2l-dialog-open`: dispatched when the dialog is opened
+- `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
+<!-- docs: end hidden content -->
+
+### Methods
+
+- `resize`: resizes the dialog based on specified `width` and measured content height
+
+### Usage
+
 Open the dialog declaratively using a boolean attribute `opened`:
 
 ```html
@@ -59,43 +133,67 @@ document.querySelector('d2l-dialog').addEventListener('d2l-dialog-close', (e) =>
 });
 ```
 
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `title-text` | String, required | Text displayed in the header of the dialog |
-| `async` | Boolean | Whether to render a loading-spinner and wait for state changes via [AsyncContainerMixin](../../mixins/async-container) |
-| `opened` | Boolean | Whether or not the dialog is open |
-| `width` | Number, default: `600` | The preferred width (unit-less) for the dialog |
-
-**Methods:**
-
-- `resize`: resizes the dialog based on specified `width` and measured content height
-
-**Events:**
-
-- `d2l-dialog-open`: dispatched when the dialog is opened
-- `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
-
-## d2l-dialog-confirm
+## Confirmation Dialog [d2l-dialog-confirm]
 
 The `d2l-dialog-confirm` element is a simple confirmation dialog for prompting the user. It provides properties for specifying the required `text` and optional `title-text`, and a `footer` slot for workflow buttons. Apply the `data-dialog-action` attribute to workflow buttons to automatically close the confirm dialog with the action value.
 
+### Best Practices
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Label the primary button with a verb that indicates the outcome of the action. Use “Delete” over “Yes” or “No”
+* Keep the confirmation statement or question concise. Starting with, “Are you sure you want to…” is wordy.
+* Use “Cancel” for the secondary button
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t present users with unclear choices
+* Don’t label the primary button with a potentially ambiguous word like, “OK”
+* Don’t use a confirmation dialog if the action is not critical in nature (avoid interrupting the user)
+* Don’t use a confirmation dialog if you can introduce an undo option instead
+* Don’t use a confirmation dialog to show error, success, or warning messages. Use an inline or toast alert instead
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
+<!-- docs: start hidden content -->
 ![Confirmation Dialog](./screenshots/dialog-confirm.png?raw=true)
+<!-- docs: end hidden content -->
 
+<!-- docs: demo live name:d2l-dialog-confirm autoSize:false display:block size:large -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog-confirm.js';
+
+  document.querySelector('#open-confirm').addEventListener('click', () => {
+    document.querySelector('#dialog-confirm').opened = true;
+  });
 </script>
 
-<d2l-button id="open">Show Confirm</d2l-button>
+<d2l-button id="open-confirm">Show Confirm</d2l-button>
 
-<d2l-dialog-confirm title-text="Confirm Title" text="Are you sure?">
+<d2l-dialog-confirm id="dialog-confirm" title-text="Confirm Title" text="Are you sure?">
   <d2l-button slot="footer" primary data-dialog-action="yes">Yes</d2l-button>
   <d2l-button slot="footer" data-dialog-action>No</d2l-button>
 </d2l-dialog-confirm>
 ```
 
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | The required text content for the confirmation dialog |
+| `opened` | Boolean | Whether or not the dialog is open |
+| `title-text` | String | The optional title for the confirmation dialog |
+
+### Events
+
+- `d2l-dialog-open`: dispatched when the dialog is opened
+- `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
+<!-- docs: end hidden content -->
+
+### Usage
+
 Open the confirm dialog as described for generic dialogs, either by setting the `opened` property/attribute, or by calling the `open` method to get a promise for the result.
 
 ```javascript
@@ -108,39 +206,51 @@ document.querySelector('#open').addEventListener('click', () => {
 });
 ```
 
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `text` | String, required | The required text content for the confirmation dialog |
-| `opened` | Boolean | Whether or not the dialog is open |
-| `title-text` | String | The optional title for the confirmation dialog |
-
-**Events:**
-
-- `d2l-dialog-open`: dispatched when the dialog is opened
-- `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
-
-## d2l-dialog-fullscreen
+## Fullscreen Dialog [d2l-dialog-fullscreen]
 
 The `d2l-dialog-fullscreen` element is a fullscreen variant of the generic `d2l-dialog`. It provides a slot for arbitrary content, and a `footer` slot for workflow buttons. Apply the `data-dialog-action` attribute to workflow buttons to automatically close the dialog with the action value.
 
+<!-- docs: start hidden content -->
 ![Fullscreen Dialog](./screenshots/dialog-fullscreen.png?raw=true)
+<!-- docs: end hidden content -->
 
+<!-- docs: demo live name:d2l-dialog-fullscreen autoSize:false display:block size:large -->
 ```html
 <script type="module">
+  import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog-fullscreen.js';
+
+  document.querySelector('#open-fullscreen').addEventListener('click', () => {
+    document.querySelector('#dialog-fullscreen').opened = true;
+  });
 </script>
 
-<d2l-button id="open">Show Dialog</d2l-button>
+<d2l-button id="open-fullscreen">Show Dialog</d2l-button>
 
-<d2l-dialog-fullscreen title-text="Fullscreen Dialog Title">
+<d2l-dialog-fullscreen id="dialog-fullscreen" title-text="Fullscreen Dialog Title">
   <div>Some dialog content</div>
   <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
   <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 </d2l-dialog-fullscreen>
 ```
 
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `title-text` | String, required | Text displayed in the header of the dialog |
+| `async` | Boolean | Whether to render a loading-spinner and wait for state changes via [AsyncContainerMixin](../../mixins/async-container) |
+| `opened` | Boolean | Whether or not the dialog is open |
+
+### Events
+
+- `d2l-dialog-open`: dispatched when the dialog is opened
+- `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
+<!-- docs: end hidden content -->
+
+### Usage
+
 Open the fullscreen dialog as described for generic dialogs, either by setting the `opened` property/attribute, or by calling the `open` method to get a promise for the result.
 
 ```javascript
@@ -153,21 +263,10 @@ document.querySelector('#open').addEventListener('click', () => {
 });
 ```
 
-**Properties:**
-
-| Property | Type | Description |
-|--|--|--|
-| `title-text` | String, required | Text displayed in the header of the dialog |
-| `async` | Boolean | Whether to render a loading-spinner and wait for state changes via [AsyncContainerMixin](../../mixins/async-container) |
-| `opened` | Boolean | Whether or not the dialog is open |
-
-**Events:**
-
-- `d2l-dialog-open`: dispatched when the dialog is opened
-- `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
-
+<!-- docs: start hidden content -->
 ## Future Enhancements
 
 * scroll API for the dialog content (see [#341](https://github.com/BrightspaceUI/core/issues/341))
 
 Looking for an enhancement not listed here? Create a GitHub issue!
+<!-- docs: end hidden content -->

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

@@ -323,7 +323,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			this.opened = false;
 		};
 
-		if (!reduceMotion && this.mediaQueryList.matches && this.mobileTray && isVisible(this)) {
+		if (!reduceMotion && this._useMobileStyling && this.mobileTray && isVisible(this)) {
 			this.shadowRoot.querySelector('.d2l-dropdown-content-width')
 				.addEventListener('animationend', hide, { once: true });
 			this._closing = true;
@@ -352,14 +352,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.__applyFocus = applyFocus !== undefined ? applyFocus : true;
 		this.opened = true;
 		await this.updateComplete;
-		this._showBackdrop = this.mediaQueryList.matches && this.mobileTray;
+		this._showBackdrop = this._useMobileStyling && this.mobileTray;
 	}
 
 	async resize() {
 		if (!this.opened) {
 			return;
 		}
-		this._showBackdrop = this.mediaQueryList.matches && this.mobileTray;
+		this._showBackdrop = this._useMobileStyling && this.mobileTray;
 		await this.__position();
 	}
 
@@ -504,7 +504,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			}
 
 			await this.__position();
-			this._showBackdrop = this.mediaQueryList.matches && this.mobileTray;
+			this._showBackdrop = this._useMobileStyling && this.mobileTray;
 
 			if (!this.noAutoFocus && this.__applyFocus) {
 				const focusable = getFirstFocusableDescendant(this);
@@ -530,7 +530,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 		if (newValue) {
 
-			if (ifrauBackdropService && this.mobileTray && this.mediaQueryList.matches) {
+			if (ifrauBackdropService && this.mobileTray && this._useMobileStyling) {
 				this._ifrauContextInfo = await ifrauBackdropService.showBackdrop();
 			}
 
@@ -542,7 +542,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				clearDismissible(this.__dismissibleId);
 				this.__dismissibleId = null;
 			}
-			if (ifrauBackdropService && this.mobileTray && this.mediaQueryList.matches) {
+			if (ifrauBackdropService && this.mobileTray && this._useMobileStyling) {
 				ifrauBackdropService.hideBackdrop();
 				this._ifrauContextInfo = null;
 			}
@@ -771,8 +771,10 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter'));
 	}
 
-	_handleMobileResize() {
+	async _handleMobileResize() {
 		this._useMobileStyling =  this.mediaQueryList.matches;
+		this._showBackdrop = this._useMobileStyling && this.mobileTray;
+		if (this.opened) await this.__position();
 	}
 
 	_renderContent() {
@@ -787,9 +789,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			}
 		}
 
-		const specialMobileStyle = this.mediaQueryList.matches && this.mobileTray;
-		const mobileTrayRightLeft = this.mediaQueryList.matches && (this.mobileTray === 'right' || this.mobileTray === 'left');
-		const mobileTrayBottom = this.mediaQueryList.matches && (this.mobileTray === 'bottom');
+		const specialMobileStyle = this._useMobileStyling && this.mobileTray;
+		const mobileTrayRightLeft = this._useMobileStyling && (this.mobileTray === 'right' || this.mobileTray === 'left');
+		const mobileTrayBottom = this._useMobileStyling && (this.mobileTray === 'bottom');
 
 		let maxWidthOverride = this.maxWidth;
 		if (mobileTrayRightLeft) {

package/components/filter/README.md

@@ -26,7 +26,7 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener for the filter |
 
 **Events:**
-* `d2l-filter-change`: dispatched when any filter value has changed (may contain info about multiple changes)
+* `d2l-filter-change`: dispatched when any filter value has changed (may contain info about multiple dimensions and multiple changes in each)
 * `d2l-filter-dimension-first-open`: dispatched when a dimension is opened for the first time (if there is only one dimension, this will be dispatched when the dropdown is first opened)
 * `d2l-filter-dimension-search`: dispatched when a dimension that supports searching and has the "manual" search-type is searched
 

package/components/filter/demo/filter-search-demo.js

@@ -50,16 +50,19 @@ class FilterSearchDemo extends LitElement {
 	}
 
 	_handleFilterChange(e) {
-		(e.detail.changes.length === 1) ?
-			console.log(`Filter selection changed for dimension "${e.detail.changes[0].dimension}":`, e.detail.changes[0].value) : // eslint-disable-line no-console
-			console.log('Batch filter selection changed:', e.detail.changes); // eslint-disable-line no-console
+		(e.detail.dimensions.length === 1) ?
+			console.log(`Filter selection changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes) : // eslint-disable-line no-console
+			console.log('Batch filter selection changed:', e.detail.dimensions); // eslint-disable-line no-console
 
-		e.detail.changes.forEach(change => {
-			if (change.dimension === 'event') {
-				this._fullData.find(value => value.key === change.value.key).selected = change.value.selected;
-			} else if (change.dimension === 'event-single') {
-				this._fullDataSingle.find(value => value.key === change.value.key).selected = change.value.selected;
-			}
+		e.detail.dimensions.forEach(dimension => {
+			if (!dimension.dimensionKey.includes('event')) return;
+			dimension.changes.forEach(change => {
+				if (dimension.dimensionKey === 'event') {
+					this._fullData.find(value => value.key === change.valueKey).selected = change.selected;
+				} else if (change.dimension === 'event-single') {
+					this._fullDataSingle.find(value => value.key === change.valueKey).selected = change.selected;
+				}
+			});
 		});
 	}
 

package/components/filter/demo/filter.html

@@ -112,9 +112,9 @@
 
 	<script type="module">
 		document.addEventListener('d2l-filter-change', e => {
-			(e.detail.changes.length === 1) ?
-				console.log(`Filter selection changed for dimension "${e.detail.changes[0].dimension}":`, e.detail.changes[0].value) : // eslint-disable-line no-console
-				console.log('Batch filter selection changed:', e.detail.changes); // eslint-disable-line no-console
+			(e.detail.dimensions.length === 1) ?
+				console.log(`Filter selection changed for dimension "${e.detail.dimensions[0].dimensionKey}":`, e.detail.dimensions[0].changes) : // eslint-disable-line no-console
+				console.log('Batch filter selection changed:', e.detail.dimensions); // eslint-disable-line no-console
 		});
 
 		document.addEventListener('d2l-filter-dimension-first-open', e => {

package/components/filter/filter.js

@@ -213,11 +213,12 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}
 		return this._dimensions.map((dimension) => {
 			const builtDimension = this._buildDimension(dimension);
-			const dimensionDescription = `${dimension.text}. ${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
-			return html`<d2l-menu-item text="${dimension.text}" description="${dimensionDescription}">
+			const countBadgeId = `filters-applied-count-${dimension.key}`;
+			const filtersAppliedText = `${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
+			return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}." aria-describedby="${countBadgeId}">
 				${builtDimension}
 				<div slot="supporting">
-					<d2l-count-badge number="${dimension.appliedCount}" max-digits="2" hide-zero></d2l-count-badge>
+					<d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
 				</div>
 			</d2l-menu-item>`;
 		});
@@ -332,22 +333,31 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		`;
 	}
 
-	_dispatchChangeEvent(eventKey, eventDetail) {
-		this._changeEventsToDispatch.set(eventKey, eventDetail);
+	_dispatchChangeEvent(dimension, change) {
+		this._setDimensionChangeEvent(dimension, change);
 
 		if (!this._changeEventTimeout) {
 			this._changeEventTimeout = setTimeout(() => {
-				this.dispatchEvent(new CustomEvent('d2l-filter-change', {
-					bubbles: true,
-					composed: false,
-					detail: { changes: Array.from(this._changeEventsToDispatch.values()) }
-				}));
-				this._changeEventsToDispatch = new Map();
-				this._changeEventTimeout = null;
+				this._dispatchChangeEventNow();
 			}, 200);
 		}
 	}
 
+	_dispatchChangeEventNow() {
+		const dimensions = Array.from(this._changeEventsToDispatch.values());
+		dimensions.forEach(dimension => {
+			dimension.changes = Array.from(dimension.changes.values());
+		});
+
+		this.dispatchEvent(new CustomEvent('d2l-filter-change', {
+			bubbles: true,
+			composed: false,
+			detail: { dimensions: dimensions }
+		}));
+		this._changeEventsToDispatch = new Map();
+		this._changeEventTimeout = null;
+	}
+
 	_dispatchDimensionFirstOpenEvent(key) {
 		if (!this._openedDimensions.includes(key)) {
 			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', { bubbles: true, composed: false, detail: { key: key } }));
@@ -384,7 +394,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			this._totalAppliedCount--;
 		}
 
-		this._dispatchChangeEvent(`${dimensionKey}-${valueKey}`, { dimension: dimensionKey, value: { key: valueKey, selected: selected } });
+		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
 	}
 
 	_handleDimensionDataChange(e) {
@@ -537,6 +547,19 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this.requestUpdate();
 	}
 
+	_setDimensionChangeEvent(dimension, change) {
+		if (!this._changeEventsToDispatch.has(dimension.key)) {
+			this._changeEventsToDispatch.set(dimension.key, { dimensionKey: dimension.key, changes: new Map() });
+		}
+		const dimensionChanges = this._changeEventsToDispatch.get(dimension.key);
+
+		switch (dimension.type) {
+			case 'd2l-filter-dimension-set':
+				dimensionChanges.changes.set(change.valueKey, change);
+				break;
+		}
+	}
+
 	_setFilterCounts(dimensionToRecount) {
 		this._totalAppliedCount = 0;
 

package/custom-elements.json

@@ -1008,21 +1008,33 @@
       "name": "d2l-count-badge",
       "path": "./components/count-badge/count-badge.js",
       "attributes": [
+        {
+          "name": "max-digits",
+          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "type": "number"
+        },
         {
           "name": "number",
           "description": "The number to be displayed on the badge. Must be a positive integer.",
           "type": "number"
         },
         {
-          "name": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
-          "type": "number"
+          "name": "announce-changes",
+          "description": "Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "type",
-          "description": "The type of the badge. Defaults to \"count\".",
-          "type": "'count'|'notification'",
-          "default": "\"count\""
+          "name": "has-tooltip",
+          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hide-zero",
+          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "size",
@@ -1031,13 +1043,31 @@
           "default": "\"small\""
         },
         {
-          "name": "hide-zero",
-          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "name": "tab-stop",
+          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "type",
+          "description": "The type of the badge. Defaults to \"count\".",
+          "type": "'count'|'notification'",
+          "default": "\"count\""
         }
       ],
       "properties": [
+        {
+          "name": "maxDigits",
+          "attribute": "max-digits",
+          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
+          "type": "number"
+        },
         {
           "name": "number",
           "attribute": "number",
@@ -1045,17 +1075,25 @@
           "type": "number"
         },
         {
-          "name": "maxDigits",
-          "attribute": "max-digits",
-          "description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
-          "type": "number"
+          "name": "announceChanges",
+          "attribute": "announce-changes",
+          "description": "Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "type",
-          "attribute": "type",
-          "description": "The type of the badge. Defaults to \"count\".",
-          "type": "'count'|'notification'",
-          "default": "\"count\""
+          "name": "hasTooltip",
+          "attribute": "has-tooltip",
+          "description": "Optionally add a tooltip on the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hideZero",
+          "attribute": "hide-zero",
+          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "size",
@@ -1065,11 +1103,25 @@
           "default": "\"small\""
         },
         {
-          "name": "hideZero",
-          "attribute": "hide-zero",
-          "description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
+          "name": "tabStop",
+          "attribute": "tab-stop",
+          "description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "description": "The type of the badge. Defaults to \"count\".",
+          "type": "'count'|'notification'",
+          "default": "\"count\""
         }
       ]
     },

package/package.json

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