agama-project / agama / 28354874181

83%

Build Type

push

github

Committed by web-flow

Commit Message

fix(web): polish keyboard focus ring and other UI rough edges (#3675)

## Summary

Follow-up polish addressing rough edges spotted after the recent
look-and-feel work. Each fix targets a specific accessibility or
consistency issue that affects usability and interaction methods.

- Make checkboxes and radios consistently sized across all forms
- Fix invisible loading spinners on disabled buttons
- Redesign button focus indicators to be fully visible and not clipped
- Improve skip-to-content link contrast in dark theme
- Fix form submission to scroll to alerts instead of page top

## Motivation

While implementing the dark theme and visual updates, several usability
issues emerged:

1. **Invisible feedback**: Loading spinners disappeared when buttons
were disabled, leaving users without visual confirmation that an action
was processing
2. **Inconsistent sizing**: Radio buttons appeared at different sizes
depending on which form they were in
3. **Clipped focus rings**: The outline-based focus indicator was
frequently cut off by container overflow, making keyboard navigation
harder to follow
4. **Low contrast**: The skip-to-content link (a critical accessibility
feature) was nearly unreadable in dark theme
5. **Hidden alerts**: Form validation messages appeared below the
viewport on pages with intro content, so users didn't see them.


## Related PRs

This builds on the look-and-feel work in:
- #3604 (dark theme foundation)
- #3607 (color tokens)
- #3613 (component updates)
- #3647 (PatternFly overrides)
- #3662 (theme refinements)


---

Assisted-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Coverage Stats

4876 of 6796 branches covered (71.75%)

Branch coverage included in aggregate %.

10 of 10 new or added lines in 1 file covered. (100.0%)

8 existing lines in 2 files now uncovered.

25421 of 29670 relevant lines covered (85.68%)

123.86 hits per line