Created by: ffoodd
Fixes #34016 (closed)
Drafting this because it's valuable for Bootstrap's overall accessibility, just a I did with :focus-visible
polyfill. Would regret not trying :)
Inspired by Boosted, I still think this is highly valuable by getting decent contrasts for free using our utilities — and no more requiring eg. .text-dark
alongside .bg-info
.
Things to consider:
- Might be considered a BC, even if nothing will break: colors and background will change and while it's certainly for the best, it'll obviously get back to us as issues and discussions (RTL is recent, isn't it?).
- Always ignoring
!important
to ease overrides, in order to still use.text-*
and.bg-*
together. - Could lead to side-effect when eg. a component part uses a color and a
.bg-*
: since utilities are added last in our build,.bg-*
according color would override the component part's one if its selector is a class (or equivalent specificity).
I didn't met such cases while working with Boosted for years so I'm pretty confident, however Bootstrap is a bit more popular and used :D
To do
If this PR gets positive feedback, before merging we'll need to:
-
drop a few .text-*
or.bg-*
throughout our docs (and examples) -
updates utilities documentation -
mention this in the migration guide, somehow: it'll ease the migration from badge badge-info
from v4 tobadge bg-info
instead ofbadge bg-info text-dark
—and we'll probably find other cases.