feat: add aria-describedby modifier for tooltips (#842)

* feat: add aria-describedby modifier for tooltips * add test

Author: jquense

src/usePopper.ts

@@ -59,6 +59,38 @@ export interface UsePopperState {
  state?: State;
 }
 
+const ariaDescribedByModifier: Modifier<'ariaDescribedBy', undefined> = {
+ name: 'ariaDescribedBy',
+ enabled: true,
+ phase: 'afterWrite',
+ effect: ({ state }) => {
+ return () => {
+ const { reference, popper } = state.elements;
+ if ('removeAttribute' in reference) {
+ const ids = (reference.getAttribute('aria-describedby') || '')
+ .split(',')
+ .filter((id) => id.trim() !== popper.id);
+
+ if (!ids.length) reference.removeAttribute('aria-describedby');
+ else reference.setAttribute('aria-describedby', ids.join(','));
+ }
+ };
+ },
+ fn: ({ state }) => {
+ const { popper, reference } = state.elements;
+
+ const role = popper.getAttribute('role')?.toLowerCase();
+
+ if (popper.id && role === 'tooltip' && 'setAttribute' in reference) {
+ const ids = reference.getAttribute('aria-describedby');
+ reference.setAttribute(
+ 'aria-describedby',
+ ids ? `${ids},${popper.id}` : popper.id,
+ );
+ }
+ },
+};
+
 const EMPTY_MODIFIERS = [] as any;
 /**
  * Position an element relative some reference element using Popper.js
@@ -159,7 +191,7 @@ function usePopper(
  ...config,
  placement,
  strategy,
- modifiers: [...modifiers, updateModifier],
+ modifiers: [...modifiers, ariaDescribedByModifier, updateModifier],
  });
 
  return () => {

test/usePopperSpec.js

@@ -3,15 +3,16 @@ import React from 'react';
 import usePopper from '../src/usePopper';
 
 describe('usePopper', () => {
- function renderHook(fn) {
+ function renderHook(fn, initialProps) {
  let result = { current: null };
 
- function Wrapper() {
- result.current = fn();
+ function Wrapper(props) {
+ result.current = fn(props);
  return null;
  }
 
- result.mount = mount(<Wrapper />);
+ result.mount = mount(<Wrapper {...initialProps} />);
+ result.update = (props) => result.mount.setProps(props);
 
  return result;
  }
@@ -46,4 +47,65 @@ describe('usePopper', () => {
  done();
  });
  });
+
+ it('should add aria-describedBy for tooltips', (done) => {
+ elements.popper.setAttribute('role', 'tooltip');
+ elements.popper.setAttribute('id', 'example123');
+
+ const result = renderHook(() =>
+ usePopper(elements.reference, elements.popper),
+ );
+
+ setTimeout(() => {
+ expect(
+ document.querySelector('[aria-describedby="example123"]'),
+ ).to.equal(elements.reference);
+
+ result.mount.unmount();
+
+ expect(
+ document.querySelector('[aria-describedby="example123"]'),
+ ).to.equal(null);
+
+ done();
+ });
+ });
+
+ it('should add to existing describedBy', (done) => {
+ elements.popper.setAttribute('role', 'tooltip');
+ elements.popper.setAttribute('id', 'example123');
+ elements.reference.setAttribute('aria-describedby', 'foo, bar , baz ');
+
+ const result = renderHook(() =>
+ usePopper(elements.reference, elements.popper),
+ );
+
+ setTimeout(() => {
+ expect(
+ document.querySelector(
+ '[aria-describedby="foo, bar , baz ,example123"]',
+ ),
+ ).to.equal(elements.reference);
+
+ result.mount.unmount();
+
+ expect(
+ document.querySelector('[aria-describedby="foo, bar , baz "]'),
+ ).to.equal(elements.reference);
+
+ done();
+ });
+ });
+
+ it('should not aria-describedBy any other role', (done) => {
+ renderHook(() => usePopper(elements.reference, elements.popper));
+
+ setTimeout(() => {
+ expect(
+ document.querySelector('[aria-describedby="example123"]'),
+ ).to.equal(null);
+
+ done();
+ });
+ });
 });