kittygiraudel / react-a11y-footnotes Goto Github PK

This component is missing types, which is making typescript apps complain. I was thinking about adding them to the DefinitelyTyped repo but maybe you want the types to be here?

First of all, thank you for making this! ❤️

The problems

1. The last FootnoteRef that uses jsx in the description (instead of a string) gets duplicated when clicking on "data-a11y-footnotes-ref" or "data-a11y-footnotes-back-link" (basically when Footnotes is triggered to re-render)

2. If you customize the Footnotes Wrapper, the component renders multiple times. Which either completely breaks the :target css selector or makes it behave inconsistently (tested in Chrome, Firefox, and Safari)

I tried looking through the code in this repo, and I imagine this has something to do with the SSR code (registering, cloning, etc.) but I don't know for sure. This is a little over my head right now, so I thought I'd reach out for help.

Steps to reproduce

Using Gatsby cli start a new project gatsby new

Install this package (react-a11y-footnotes), update the src/pages/index.js with basic implementation

<FootnotesProvider>
  <p>Just <FootnoteRef description="My footnote 1">testing footnotes</FootnoteRef></p>
  <p>...and <FootnoteRef description={<>My footnote 2</>}>testing more footnotes</FootnoteRef></p>
  {/* <p>some more <FootnoteRef description={<span>My footnote 3</span>}>footnotes</FootnoteRef></p> */}
  <Footnotes Wrapper={props => <div {...props} className="footnotes">{props.children} {console.warn('render footnotes')}</div>} />
</FootnotesProvider>

• Remove the Wrapper prop and see the :target css selector start working again.
• Uncomment the 3rd footnote and see that the duplication problem now happens on that instead of the 2nd footnote.

here i tried to recreate the problem i had↓
https://codesandbox.io/s/react-a11y-footnotes-forked-23d672?file=/src/App.js

is there a way to dynamically change the list of footnotes when the number of footnotes changes?

https://codesandbox.io/s/react-a11y-footnotes-forked-n6wiv6?file=/src/App.js

Here is an example of such an error.
if you click on toggle, the number of footnotes in the article changes, but the number of references in footnotes does not

http://html5doctor.com/small-hr-element/