@brightspace-ui/core 2.119.0 → 2.120.0

package/components/list/README.md

@@ -135,6 +135,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
 |---|---|---|
 | `drag-multiple` | Boolean | Whether the user can drag multiple items |
 | `grid` | Boolean | Enables keyboard grid for supported list items. See [Accessibility](#accessibility). |
+| `label` | String | Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists. |
 | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the list-items will render with radios instead of checkboxes, and the list component will maintain a single selected item. |
 | `separators` | String | Display separators (`all` (default), `between`, `none`) |
 | `extend-separators` | Boolean | Whether to extend the separators beyond the content's edge |

package/components/list/list.js

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
 import { SubscriberRegistryController } from '../../controllers/subscriber/subscriberControllers.js';
 
@@ -36,6 +37,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			 * @type {boolean}
 			 */
 			grid: { type: Boolean },
+			/**
+			 * Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.
+			 * @type {string}
+ 			 */
+			label: { type: String },
 			/**
 			 * Display separators. Valid values are "all" (default), "between", "none"
 			 * @type {'all'|'between'|'none'}
@@ -64,6 +70,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this.dragMultiple = false;
 		this.extendSeparators = false;
 		this.grid = false;
+		this.label = undefined;
 		this._listItemChanges = [];
 		this._childHasExpandCollapseToggle = false;
 
@@ -117,10 +124,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 
 	render() {
 		const role = !this.grid ? 'list' : 'application';
+		const ariaLabel = this.slot !== 'nested' ? this.label : undefined;
 		return html`
 			<slot name="controls"></slot>
 			<slot name="header"></slot>
-			<div role="${role}">
+			<div role="${role}" aria-label="${ifDefined(ariaLabel)}">
 				<slot @keydown="${this._handleKeyDown}" @slotchange="${this._handleSlotChange}"></slot>
 			</div>
 			${this._renderPagerContainer()}

package/components/overflow-group/overflow-group-mixin.js

@@ -90,10 +90,11 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 
 		this._handleItemMutation = this._handleItemMutation.bind(this);
 		this._handleResize = this._handleResize.bind(this);
+		this._itemObserver = new MutationObserver(this._handleItemMutation);
 		this._resizeObserver = new ResizeObserver((entries) => requestAnimationFrame(() => this._handleResize(entries)));
 
 		this._hasResized = false;
-		this._isObserving = false;
+		this._isObservingResize = false;
 		this._itemHeight = 0;
 		this._mini = this.openerType === OPENER_TYPE.ICON;
 		this._overflowContainerHidden = false;
@@ -109,8 +110,8 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		if (this._isObserving) {
-			this._isObserving = false;
+		if (this._isObservingResize) {
+			this._isObservingResize = false;
 			this._resizeObserver.disconnect();
 		}
 	}
@@ -147,8 +148,8 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 	update(changedProperties) {
 		super.update(changedProperties);
 
-		if (!this._isObserving) {
-			this._isObserving = true;
+		if (!this._isObservingResize) {
+			this._isObservingResize = true;
 			this._resizeObserver.observe(this.shadowRoot.querySelector('.d2l-overflow-group-container'));
 		}
 
@@ -370,8 +371,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 			await this._getItems();
 
 			this._slotItems.forEach(item => {
-				const observer = new MutationObserver(this._handleItemMutation);
-				observer.observe(item, {
+				this._itemObserver.observe(item, {
 					attributes: true, /* required for legacy-Edge, otherwise attributeFilter throws a syntax error */
 					attributeFilter: ['disabled', 'text', 'selected'],
 					childList: false,
@@ -387,4 +387,5 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 			this.requestUpdate();
 		});
 	}
+
 };

package/custom-elements.json

@@ -8899,6 +8899,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "label",
+          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "item-count",
           "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
@@ -8945,6 +8951,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",

package/package.json

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