Skip to content

CSS a11y button fixes breaking theming flexibility #5303

Description

@LotteHofstede

Bootstrap style overrides break theming

In _global-styles.scss, success and warning button colors are manually darkened to meet a11y requirements:

  • btn-success / btn-outline-success: darkened via darken($success, …)
  • btn-warning / btn-outline-warning: darkened via darken($warning, …)
  • Success button text color is hardcoded to #fff

File reference:
https://github.com/DSpace/dspace-angular/blob/main/src/styles/_global-styles.scss#L363


Why this is a problem

  • Breaks theming: custom $success / $warning colors are always overridden, even if already a11y compliant
  • Inconsistent across components: buttons use altered colors, while other components (badges, alerts, etc.) use base values
  • Bypasses Bootstrap color system: semantic colors should be defined once and reused, not modified per variant
  • Contrast handling becomes unreliable: hardcoded color: #fff bypasses Bootstrap’s contrast logic (color-contrast() in BS5)

Root cause

Introduced in:
#2587

Accessibility fixes were applied to specific Bootstrap button variants instead of adjusting semantic theme colors.


Proposed solution

  • Define accessible $success and $warning colors at theme level
  • Remove darken(...) overrides from button styles
  • Remove hardcoded color: #fff
  • Let Bootstrap handle contrast (color-contrast() in BS5, or $yiq-contrast in BS4 for backports)

Expected outcome

  • Consistent behavior across components
  • Predictable theming
  • Alignment with Bootstrap’s color system

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions