diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d96cd98..d79803a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ### Improvements - Navbar link text is no longer uppercase. +- Visual alignment of Badge component is improved, and its markup guidance has been simplified with improved accessibility semantics. ## 6.1.0 diff --git a/docs/_components/badges.md b/docs/_components/badges.md index d56ad8ee..6bb9de5a 100644 --- a/docs/_components/badges.md +++ b/docs/_components/badges.md @@ -14,8 +14,8 @@ The unphishable badge is used to indicate that an account is only using security {% capture example %} <div class="lg-verification-badge"> - <img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" role="img" width="16" height="16" class="text-middle" alt="unphishable icon" id="unphishable_badge" /> - <span>Unphishable</span> + <img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" role="img" width="16" height="16" alt="" /> + Unphishable </div> {% endcapture %} {% include helpers/code-example.html code=example %} @@ -26,8 +26,8 @@ A verfied account badge is used to indicate that an account has completed the id {% capture example %} <div class="lg-verification-badge"> - <img src="{{ site.baseurl }}/assets/img/alerts/success-badge.svg" role="img" width="16" height="16" class="text-middle" alt="verification icon" id="verified_account_badge" /> - <span>Verified Account</span> + <img src="{{ site.baseurl }}/assets/img/alerts/success-badge.svg" role="img" width="16" height="16" alt="" /> + Verified Account </div> {% endcapture %} {% include helpers/code-example.html code=example %} diff --git a/src/scss/components/_verification-badge.scss b/src/scss/components/_verification-badge.scss index c95542c8..313e6d5c 100644 --- a/src/scss/components/_verification-badge.scss +++ b/src/scss/components/_verification-badge.scss @@ -3,23 +3,12 @@ background-color: map-get($site-palette, 'site-white'); border: units(1px) solid map-get($site-palette, 'site-green'); box-sizing: border-box; - display: inline-block; + display: inline-flex; + align-items: center; padding: units(1) units(2); white-space: nowrap; img { margin-right: units(1); } - - span { - vertical-align: text-top; - } -} - -@media #{$theme-site-margins-breakpoint} { - .lg-verification-badge { - margin: units(-1) 0 0; - position: static; - text-align: right; - } }