fix(Popper): Prevent duplicate ids in aria-describedby (#883)

react-bootstrap · Oct 23, 2020 · 48bb128 · 48bb128
1 parent ec76a79
commit 48bb128
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/src/usePopper.ts b/src/usePopper.ts
@@ -83,6 +83,10 @@ const ariaDescribedByModifier: Modifier<'ariaDescribedBy', undefined> = {
 
     if (popper.id && role === 'tooltip' && 'setAttribute' in reference) {
       const ids = reference.getAttribute('aria-describedby');
+      if (ids && ids.split(',').indexOf(popper.id) !== -1) {
+        return;
+      }
+
       reference.setAttribute(
         'aria-describedby',
         ids ? `${ids},${popper.id}` : popper.id,

diff --git a/test/usePopperSpec.js b/test/usePopperSpec.js
@@ -108,4 +108,30 @@ describe('usePopper', () => {
       done();
     });
   });
+
+  it('should not add add duplicates to aria-describedby', (done) => {
+    elements.popper.setAttribute('role', 'tooltip');
+    elements.popper.setAttribute('id', 'example123');
+    elements.reference.setAttribute('aria-describedby', 'foo');
+
+    const result = renderHook(() =>
+      usePopper(elements.reference, elements.popper),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+
+    setTimeout(() => {
+      expect(
+        document.querySelector('[aria-describedby="foo,example123"]'),
+      ).to.equal(elements.reference);
+
+      result.mount.unmount();
+
+      expect(document.querySelector('[aria-describedby="foo"]')).to.equal(
+        elements.reference,
+      );
+
+      done();
+    });
+  });
 });