chenqingspring / react-lottie

Render After Effects animations on React based on lottie-web
MIT License
1.66k stars 363 forks source link

TabIndex hardcoded to 0 #130

Open 1ak31sha opened 3 years ago

1ak31sha commented 3 years ago

hi, i was facing an issue using lottie when my animation was presentational only but it was becoming tabbable due to the hardcoded tabindex = 0 https://github.com/chenqingspring/react-lottie/blob/56f72845de2ed652f763b92978a06201d3333dd8/src/index.js#L167 i saw this existing issue https://github.com/chenqingspring/react-lottie/issues/67 which proposed spreading the props and wondering if that could be added or create a new prop/configuration for setting the tabindex.

currently my workaround is something like

    const removeTabIndexFromLottie = (id: string) => {
      const lottieDiv = document.querySelector<HTMLElement>(
        `.Toggle-focusableContainer div[title=${id}]`
      );
      if (lottieDiv) {
        lottieDiv.tabIndex = -1;
      }
    };

but we prefer not to have to do stuff like this, i think the above issue&solution is much cleaner

btw, my first time using react-lottie and i love it! <3

ghost commented 3 years ago

Hello. You can use this. https://www.npmjs.com/package/react-lottie-wrapper. Example: <Lottie tabIndex={-1} options={ defaultOptions } />

hugotox commented 1 year ago

This doesn't work. tabIndex is not a prop for Lottie components

Property 'tabIndex' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Lottie> & Readonly<LottieProps> & Readonly<{ children?: ReactNode; }>'.
101budspencer commented 5 months ago

Any solution?