@brightspace-ui/core 2.119.1 → 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/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.1",
+  "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",