Merge pull request #116 from LottieFiles/develop

Aria labels for controls

Author: samuelOsborne

.changeset/red-clouds-help.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.4.9
+
+### Patch Changes
+
+- 730c3b2: add aria-label to Controls
+- 32e0728: fix double animation with react 18 strict mode
+- cd94951: chore: version bump
+
 ## 3.4.6
 
 ### Patch Changes

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@lottiefiles/react-lottie-player",
-  "version": "3.4.7",
+  "version": "3.4.9",
   "description": "Lottie web player wrapper for React",
   "main": "dist/lottie-react.js",
   "module": "dist/lottie-react.esm.js",

package.json

@@ -5,7 +5,7 @@ import './Styles.css';
 import * as React from 'react';
 
 import { ColorPicker } from './ColorPicker';
-import { PlayerState } from './Player';
+import { PlayerEvent, PlayerState } from './Player';
 import { Popover } from './Popover';
 import { Seeker } from './Seeker';
 
@@ -83,6 +83,7 @@ export class Controls extends React.Component<IControlProps, { mouseDown: boolea
         {showPlayButton && (
           <div
             role="button"
+            aria-label={playerState === PlayerState.Playing ? PlayerEvent.Pause : PlayerEvent.Play}
             tabIndex={0}
             onClick={() => {
               if (playerState === PlayerState.Playing) {
@@ -125,6 +126,7 @@ export class Controls extends React.Component<IControlProps, { mouseDown: boolea
           <div
             tabIndex={0}
             role="button"
+            aria-label={PlayerEvent.Stop}
             onClick={() => stop && stop()}
             onKeyDown={() => stop && stop()}
             className={playerState === PlayerState.Stopped ? 'lf-player-btn active' : 'lf-player-btn'}
@@ -184,6 +186,7 @@ export class Controls extends React.Component<IControlProps, { mouseDown: boolea
         {showRepeatButton && (
           <div
             role="button"
+            aria-label={PlayerEvent.Loop}
             tabIndex={0}
             onClick={() => {
               if (instance && setLoop) {

src/Controls.tsx

@@ -85,6 +85,7 @@ export class Seeker extends React.Component<ISeekerProps> {
           id="track"
           className="lf-progress"
           name="progress"
+          aria-label="progress"
           type="range"
           min="0"
           max="100"