diff --git a/src/usePopper.ts b/src/usePopper.ts index 05634231..45f1eb5f 100644 --- 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 index 5dae5933..2415c9a5 100644 --- 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(); + }); + }); });