@brightspace-ui/core 2.29.3 → 2.29.6

package/components/dialog/dialog-mixin.js

@@ -177,13 +177,35 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		}
 	}
 
+	_findAutofocusElement(node) {
+		if (this._useNative) {
+			// Do not override native autofocus attribute implementation
+			return null;
+		}
+
+		const slot = node.querySelector('slot');
+		if (!slot) {
+			// We are in a confirm dialog, autofocus attribute will never be set
+			return null;
+		}
+
+		const content = slot.assignedElements({ flatten: true });
+
+		let autofocusElement = null;
+		for (const el of content) {
+			autofocusElement = el.hasAttribute('autofocus') ? el : el.querySelector('[autofocus]');
+			if (autofocusElement) break;
+		}
+		return autofocusElement;
+	}
+
 	_focusFirst() {
 		if (!this.shadowRoot) return;
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
 		if (content) {
-			const firstFocusable = getNextFocusable(content);
-			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), firstFocusable)) {
-				forceFocusVisible(firstFocusable);
+			const elementToFocus = this._findAutofocusElement(content) ?? getNextFocusable(content);
+			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), elementToFocus)) {
+				forceFocusVisible(elementToFocus, false);
 				return;
 			}
 		}

package/components/tooltip/README.md

@@ -7,20 +7,31 @@ Tooltips display additional information when users focus or hover on a point of
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
+  import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
 
   window.addEventListener('load', function () {
     setTimeout(function() {
-      var tooltip = document.querySelector('#tooltip');
+      const tooltip = document.querySelector('#tooltip');
+      const helpTooltip = document.querySelector('#help-tooltip');
+
       tooltip.showing = true;
+      helpTooltip.showing = true;
     }, 20);
   });
 </script>
+
 <d2l-button id="tooltip-button">Hover here</d2l-button>
 <d2l-tooltip id="tooltip" for="tooltip-button">
   Tooltip message example
 </d2l-tooltip>
+
+<d2l-tooltip-help id="help-tooltip" text="Hover here">
+  Tooltip message example
+</d2l-tooltip-help>
 ```
 
+Note: there is a [known defect](https://rally1.rallydev.com/#/?detail=/defect/641656338755&fdp=true) for tooltips, where they are sometimes rendered offset by some amount unexpectedly.
+
 ## Accessibility
 
 **Interactive Target Elements:**
@@ -69,7 +80,16 @@ The `d2l-tooltip` component is used to display additional information when users
   import '@brightspace-ui/core/components/inputs/input-text.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
-
+<!-- docs: start hidden content --> 
+<script>
+  window.addEventListener('load', function () {
+    setTimeout(function() {
+      const tooltip = document.querySelector('d2l-tooltip');
+      tooltip.showing = true;
+    }, 20);
+  });
+</script>
+<!-- docs: end hidden content -->
 <d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true" label="Text Input" label-hidden style="max-width:250px;"></d2l-input-text>
 <d2l-tooltip for="tooltip-error" state="error">
 	Your error message will display here
@@ -121,6 +141,16 @@ In the following example to constrain the tooltip to the dashed boundary we can
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
+<!-- docs: start hidden content --> 
+<script>
+  window.addEventListener('load', function () {
+    setTimeout(function() {
+      const tooltip = document.querySelector('d2l-tooltip');
+      tooltip.showing = true;
+    }, 20);
+  });
+</script>
+<!-- docs: end hidden content -->
 <style>
   .boundary {
     border: 1px dashed #cdd5dc;
@@ -163,15 +193,24 @@ The `d2l-tooltip-help` component is used to display additional information when
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:small -->
+<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
 </script>
-
-<p class="d2l-body-standard">
+<!-- docs: start hidden content --> 
+<script>
+  window.addEventListener('load', function () {
+    setTimeout(function() {
+      const tooltip = document.querySelector('d2l-tooltip-help');
+      tooltip.showing = true;
+    }, 20);
+  });
+</script>
+<!-- docs: end hidden content -->
+<p class="d2l-body-compact">
   This is some sample text.
-  <d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+  <d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
 </p>
 ```
 

package/components/tooltip/tooltip-help.js

@@ -25,6 +25,10 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			 * @type {'top'|'bottom'|'left'|'right'}
 			 */
 			position: { type: String },
+			/**
+			 * @ignore
+			 */
+			showing: { type: Boolean, reflect: true },
 			/**
 			 * REQUIRED: Text that will render as the Help Tooltip opener
 			 * @type {string}
@@ -44,8 +48,8 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			#d2l-tooltip-help-text {
 				background: none;
 				border: none;
+				cursor: text;
 				padding: 0;
-				text-decoration-color: var(--d2l-color-galena);
 				text-decoration-line: underline;
 				text-decoration-style: dashed;
 				text-decoration-thickness: 1px;
@@ -75,6 +79,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 		super();
 
 		this.inheritFontStyle = false;
+		this.showing = false;
 	}
 
 	static get focusElementSelector() {
@@ -97,7 +102,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			<button id="d2l-tooltip-help-text" class="${classMap(classes)}">
 				${this.text}
 			</button>
-			<d2l-tooltip for="d2l-tooltip-help-text" delay="0" offset="13" position="${ifDefined(this.position)}">
+			<d2l-tooltip for="d2l-tooltip-help-text" delay="0" offset="13" position="${ifDefined(this.position)}" ?showing="${this.showing}">
 				<slot></slot>
 			</d2l-tooltip>
 		`;

package/custom-elements.json

@@ -10049,6 +10049,11 @@
           "description": "Allows this component to inherit certain font properties",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "showing",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [