DEV Community

Discussion on: React: How to create a custom progress bar component in 5 minutes

View post
Collapse
 
jastuccio profile image
jastuccio • • Edited

Nice progress bar. I am stuck passing props in a progress bar I am working on and may have found my solution in this example.

I think this one has some accessibility issues though. I'm a noob, but going to take a shot at the code based on step 3. This may not be right.

const ProgressBar = (props) => {
  const { bgcolor, completed } = props;

// styles...

  return (
    <div style={containerStyles}>
      <div style={fillerStyles}>
        <span
            style={labelStyles}>{`${completed}%`}
            role="progressbar"
            aria-valuenow=${completed}
            aria-valuemin="0"
            aria-valuemax="100"
       >
      </span>
      </div>
    </div>
  );
};

export default ProgressBar;
Enter fullscreen mode Exit fullscreen mode

MDN <progress> can be hard to style so we are using the progress role instead.

MDN - progressbar_role

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

Thank you for pointing this out! The component was written without accessibility at all. I should definitely correct this!

Collapse
 
jastuccio profile image
jastuccio •

You're welcome. I think most of us learned HTML and CSS without accessibility as part of the code. I know I did. Accessibility was required for the progress bar I was building or I probably would not have thought to include it 🤦‍♂️