yaooqinn opened a new pull request, #54564:
URL: https://github.com/apache/spark/pull/54564
### What changes were proposed in this pull request?
Replace the custom progress bar implementation with Bootstrap 5's
`progress-stacked` component for proper accessibility and modern CSS.
**Changes:**
- **CSS** (`webui.css`): Remove 21 lines of IE9 vendor-prefixed gradients
(`-moz-`, `-webkit-`, `-o-`, `filter:progid`), legacy `box-shadow` border, and
`background-repeat`. Replace with clean `background: linear-gradient()` rules
targeting `.progress-stacked` selector.
- **Scala** (`UIUtils.scala`): Use BS5 `progress-stacked` wrapper with
proper ARIA attributes (`role="progressbar"`, `aria-valuenow/min/max`). Replace
inline styles with BS5 utility classes (`position-absolute`, `d-flex`,
`align-items-center`, etc.). Extract label text to a `progressLabel` variable
for clarity.
- **Tests**: Update `UIUtilsSuite` assertions for new BS5 markup structure.
Update `UISeleniumSuite` CSS selector from `.progress` to `.progress-stacked`.
**Before → After (HTML output):**
```html
<div class="progress">
<span style="display:flex;align-items:center;...">3/4</span>
<div class="progress-bar progress-completed" style="width:75%"></div>
<div class="progress-bar progress-started" style="width:25%"></div>
</div>
<div class="progress-stacked" title="3/4 (2 running)">
<span class="position-absolute w-100 h-100 d-flex align-items-center
justify-content-center">3/4</span>
<div class="progress" role="progressbar" aria-label="Completed"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%">
<div class="progress-bar progress-completed"></div>
</div>
<div class="progress" role="progressbar" aria-label="Running"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%">
<div class="progress-bar progress-started"></div>
</div>
</div>
```
### Why are the changes needed?
1. **Accessibility**: Progress bars lacked ARIA attributes, making them
invisible to screen readers
2. **Dead code**: IE9 vendor prefixes (`-moz-`, `-webkit-`, `-o-`,
`filter:progid`) are no longer needed
3. **BS5 alignment**: Use the standard BS5 Progress component API instead of
custom markup
4. **Maintainability**: Inline styles replaced with BS5 utility classes
### Does this PR introduce _any_ user-facing change?
Yes — progress bars now have proper ARIA attributes for accessibility.
Visual appearance is unchanged.
### How was this patch tested?
- `UIUtilsSuite` — progress bar markup assertions updated and passing
- `UISeleniumSuite` — CSS selector updated for new structure
- Scalastyle checks passing
### Was this patch authored or co-authored using generative AI tooling?
Yes, GitHub Copilot CLI was used.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
