Badge: Improve visual appearance and accessibility, simplify markup (#…

…251)

**Why**:

- Improved vertical centering
- Removed unused ID attribute
- Removed unnecessary `<span>` child to simplify markup and improve performance in deeply-nested markup documents
- Set null icon alt to treat as decorative / redundant, based on adjacent text providing the same information.
- Remove broken responsive styling

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
 

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 %}

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;
-  }
 }