@brightspace-ui/core 3.334.0 → 3.335.0

package/components/filter/filter.js

@@ -436,11 +436,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		}
 		return this._dimensions.map((dimension) => {
 			const builtDimension = this._buildDimension(dimension);
-			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}">
+			return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}. ${filtersAppliedText}">
 				<div slot="supporting">
-					<d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
+					<d2l-count-badge number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
 				</div>
 				${builtDimension}
 			</d2l-menu-item>`;

package/helpers/README.md

@@ -275,6 +275,20 @@ requestIdleCallback((deadline) => {
 }, { timeout: 1000 });
 ```
 
+## Trusted Types
+
+The Trusted Types module provides a polyfill for the browser's TrustedTypes API along with Trusted Type policies. These policies provide a `createHTML` method for creating TrustedHTML objects that can be passed to injection sinks like `innerHTML`.
+
+```js
+import { markdownHtmlPolicy, safeHtmlPolicy } from '@brightspace-ui/core/helpers/trusted-types.js';
+
+// filters HTML string and returns TrustedHTML
+const result = safeHtmlPolicy.createHTML(html);
+
+// filters HTML string for Markdown supported elements and returns TrustedHTML
+const result = markdownHtmlPolicy.createHTML(html);
+```
+
 ## UniqueId
 
 A simple helper that returns a unique id.

package/helpers/trusted-types.js

@@ -0,0 +1,21 @@
+import DOMPurify from 'dompurify';
+
+if (typeof globalThis.trustedTypes === 'undefined') {
+	globalThis.trustedTypes = { createPolicy: (name, rules) => rules };
+}
+
+export const safeHtmlPolicy = globalThis.trustedTypes.createPolicy('safe-html', {
+	createHTML: (input) => DOMPurify.sanitize(input, {
+		TRUSTED_TYPES_POLICY: null
+	})
+});
+
+export const markdownHtmlPolicy = globalThis.trustedTypes.createPolicy('markdown-html', {
+	createHTML: (input) => DOMPurify.sanitize(input, {
+		ALLOWED_TAGS: ['a', 'blockquote', 'br', 'code', 'em', 'li', 'ol', 'p', 'pre', 'strong', 'ul'],
+		ALLOWED_ATTR: ['class', 'href', 'start', 'title'],
+		ALLOW_ARIA_ATTR: false,
+		ALLOW_DATA_ATTR: false,
+		TRUSTED_TYPES_POLICY: null
+	})
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.334.0",
+  "version": "3.335.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -76,6 +76,7 @@
     "@brightspace-ui/intl": "^3",
     "@brightspace-ui/lms-context-provider": "^1",
     "@open-wc/dedupe-mixin": "^2",
+    "dompurify": "^3.4.17",
     "ifrau": "^0.42",
     "lit": "^3",
     "prismjs": "^1"