Handle non-empty whitespace `textContent` in Tooltip trigger (#36588)

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 650bf2b09227b88c50c39616b067807ca7bcd285..f8d97f2408b5db8e81dcc86c3e81af8e59de0308 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -518,7 +518,7 @@ class Tooltip extends BaseComponent {
       return
     }
 
-    if (!this._element.getAttribute('aria-label') && !this._element.textContent) {
+    if (!this._element.getAttribute('aria-label') && !this._element.textContent.trim()) {
       this._element.setAttribute('aria-label', title)
     }
 

diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 1431d837dd9adf788baf72d30d4fba6c74cbeb2d..c8ab068187e91de64ae8bef3117eee90884a5ef5 100644 (file)
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -1358,6 +1358,25 @@ describe('Tooltip', () => {
       })
     })
 
+    it('should add the aria-label attribute when element text content is a whitespace string', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="A tooltip"><span>    </span></a>'
+
+        const tooltipEl = fixtureEl.querySelector('a')
+        const tooltip = new Tooltip(tooltipEl)
+
+        tooltipEl.addEventListener('shown.bs.tooltip', () => {
+          const tooltipShown = document.querySelector('.tooltip')
+
+          expect(tooltipShown).not.toBeNull()
+          expect(tooltipEl.getAttribute('aria-label')).toEqual('A tooltip')
+          resolve()
+        })
+
+        tooltip.show()
+      })
+    })
+
     it('should not add the aria-label attribute if the attribute already exists', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = '<a href="#" rel="tooltip" aria-label="Different label" title="Another tooltip"></a>'