@brightspace-ui/core 1.237.3 → 1.238.0

package/components/tooltip/demo/tooltip.html

@@ -52,7 +52,7 @@
 		<h2>Tooltip (error)</h2>
 		<d2l-demo-snippet>
 			<template>
-				<d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true"></d2l-input-text>
+				<d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true" label="label"></d2l-input-text>
 				<d2l-tooltip for="tooltip-error" state="error" align="start" offset="10">
 					Your error message will display here
 				</d2l-tooltip>

package/components/tooltip/tooltip.js

@@ -1,6 +1,6 @@
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
-import { cssEscape, getBoundingAncestor, getOffsetParent } from '../../helpers/dom.js';
+import { cssEscape, elemIdListAdd, getBoundingAncestor, getOffsetParent } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { bodySmallStyles } from '../typography/styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -844,9 +844,9 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.id = this.id || getUniqueId();
 			this.setAttribute('role', 'tooltip');
 			if (this.forType === 'label') {
-				this._target.setAttribute('aria-labelledby', this.id);
+				elemIdListAdd(this._target, 'aria-labelledby', this.id);
 			} else if (!this.announced || isInteractive) {
-				this._target.setAttribute('aria-describedby', this.id);
+				elemIdListAdd(this._target, 'aria-describedby', this.id);
 			}
 			if (logAccessibilityWarning && !isInteractive && !this.announced) {
 				console.warn(

package/helpers/README.md

@@ -76,6 +76,12 @@ DOM helper functions to make your life easier.
 ```js
 import { ... } from '@brightspace-ui/core/helpers/dom.js';
 
+// adds a value to an id-list attribute (e.g. aria-labelledby)
+elemIdListAdd(node, attrName, value);
+
+// removes a value from an id-list attribute (e.g. aria-labelledby)
+elemIdListRemoves(node, attrName, value);
+
 // returns null or the closest ancestor that fulfills the specified predicate fxn
 findComposedAncestor(node, predicate);
 

package/helpers/dom.js

@@ -7,6 +7,53 @@ export function cssEscape(val) {
 	return val;
 }
 
+export function elemIdListAdd(elem, attrName, value) {
+
+	if (elem === undefined || elem === null || !elem.getAttribute || !elem.setAttribute) {
+		throw new TypeError('elemIdListAdd: "elem" must be a valid DOM Element');
+	}
+	if (typeof(attrName) !== 'string') {
+		throw new TypeError('elemIdListAdd: "attrName" must be a valid string');
+	}
+	if (typeof(value) !== 'string') {
+		throw new TypeError('elemIdListAdd: "value" must be a valid ID string');
+	}
+
+	const parts = elem.hasAttribute(attrName) ? elem.getAttribute(attrName).split(' ') : [];
+	if (parts.indexOf(value) > -1) return;
+
+	parts.push(value);
+	elem.setAttribute(attrName, parts.join(' '));
+
+}
+
+export function elemIdListRemove(elem, attrName, value) {
+
+	if (elem === undefined || elem === null || !elem.getAttribute || !elem.setAttribute) {
+		throw new TypeError('elemIdListRemove: "elem" must be a valid DOM Element');
+	}
+	if (typeof(attrName) !== 'string') {
+		throw new TypeError('elemIdListRemove: "attrName" must be a valid string');
+	}
+	if (typeof(value) !== 'string') {
+		throw new TypeError('elemIdListRemove: "value" must be a valid ID string');
+	}
+
+	const existingValue = elem.getAttribute(attrName) || '';
+
+	const parts = existingValue.split(' ');
+	const index = parts.indexOf(value);
+	if (index === -1) return;
+
+	if (parts.length === 1) {
+		elem.removeAttribute(attrName);
+	} else {
+		parts.splice(index, 1);
+		elem.setAttribute(attrName, parts.join(' '));
+	}
+
+}
+
 export function findComposedAncestor(node, predicate) {
 	while (node) {
 		if (predicate(node) === true) {

package/package.json

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