feat(a11y): Multiple accessibility/quality fix

[nicolasambroise]

Hey !
On this pull request I do 5 modifications :

1. Few accessibility tools report the use of "background" attribut on the lottie-player tag as a main criteria failure.
   (RGAA Criteria 10.1)
   To fix it, I remove the "background" attribut and I create a CSS var instead. (If you would like to keep it as attribut, can you rename it as data-background or something similar)
2. I also have a warning with the use of "tabindex=0" attribut on button/input element because they are already focusable. So I remove them.
3. I rename the class .main to .animation-wrapper because I have some conflict on many website.
4. I add the "aria-pressed" attribut on toggle button (more info on aria-pressed)
5. The last one is more a code quality warning with the presence of inline style. So I move them to the CSS file.

Thanks

[samuelOsborne]

Hi @nicolasambroise seeing as this would be a breaking change (removing background attribute) we need to see how we want to accommodate these changes. Cheers!

[theashraf]

Hi @nicolasambroise, thanks for your PR
there are few things i just want to clarify;

Regarding the first point; as @samuelOsborne mentioned that removing the background attr would bring breaking changes, and at the current moment the background attribute is optional and maybe if you want to alter the background without using the background attr, you can embed the background with the styles passed in style attribute

 <lottie-player autoplay controls loop mode="normal" style="width: 320px; background: red;" ></lottie-player>

1. Few accessibility tools report the use of "background" attribut on the lottie-player tag as a main criteria failure.
   (RGAA Criteria 10.1)
   To fix it, I remove the "background" attribut and I create a CSS var instead. (If you would like to keep it as attribut, can you rename it as data-background or something similar)

Awesome!!

2. I also have a warning with the use of "tabindex=0" attribut on button/input element because they are already focusable. So I remove them.

Regarding point no. 3; i do believe that styles within shadow dom are scoped so there shouldn't be any conflicts.
Do you mind sharing an example in a codesandbox with the conflict ?

3. I rename the class .main to .animation-wrapper because I have some conflict on many website.

Regarding point no.4; Nice catch!! do you think we should also alter the aria-label value based on the current state of the player? so if the player state isPlayer , aria-label should be 'pause' and vice versa.

4. I add the "aria-pressed" attribut on toggle button (more info on aria-pressed)

[nicolasambroise]

If you can alter the aria-label value based on the current state of the player it will be really nice !

[yananym]

Hey folks, you ever were able to finalize and merge this PR?