Issue Summary

The "4 commits behind main", and "3 commits behind main" progress bars are not programmatically defined.

Steps to Reproduce

1. Open the home page and activate the "Project" link in the header.
2. Select any project from the main content area.
3. Select any of the repositories
4. Activate the "Branches" link from the side navigation.
5. Navigate to the mentioned instances in the table and inspect their code.
6. Observe that the progress bars are not programmatically defined.

Screenshot

Actual Results

The "4 commits behind main", and "3 commits behind main" progress bars are not programmatically defined. This may disadvantage the users of a screen reader. That the progress bars are not programmatically defined may confuse or mislead them.

Expected Results

Make sure that the progress bars are programmatically defined. In this scenario, we would recommend you to create a native progress bar with <progress> elements. This is because, native progress bars have out-of-the-box accessibility and user agents provide a stylised widget for <progress> elements. You can do the following changes to achieve this: Code the mentioned progress bars using <progress > elements. Use the max attribute to indicate the maximum value and Value attribute to indicate the current value. Use the <label> element to provide the accessible name for the mentioned progress bar. Associate the label explicitly with the progress bar by providing an identical value that is unique from other IDs to the "for" and "id" attributes of the label and <progress> respectively. If this is not at all possible, you can create a custom progress bar with ARIA. You can refer the following points to achieve this: Use the role="progressbar" on the <div> element of the mentioned progress bar. Provide the aria-valuemin to indicate the minimum value, aria-valuemax to indicate the maximum value, aria-valuenow to indicate the current value, and aria-valuetext to make the progress bar value more understandable. Make sure that these attributes are defined on the <div> element where the role="progressbar" is defined. Provide an accessible name to the progress bars using the aria-label attribute. For more information please refer to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role 

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3.1
Chrome - Version 119.0.6045.123 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 17.3.1 (19617.2.4.11.12)
JAWS- Version 2023
NVDA- Version 2024.3
Voiceover - Version Latest