Discussion on: React - create simple animated progress bar

[Andrew Bone]

This is very nice, something cool you could add is the progressbar role from ARIA.

Something like this.

const ProgressBar = ({progress}) => {
  const state = `${progress}%`;
    return (
      <div role="progressbar" 
        aria-valuenow={progress}
        aria-valuemin="0"
        aria-valuemax="100"
        style={containerStyle}
      >
        <div style={{...contentStyle, width: state}}>
          {progress > 5 ? state : ''}
        </div>
      </div>
    );
};

This little change means screen readers now know what's going on within the component.

[Dirask-React]

Will do! Thanks for the tips. 😊🔥