Skip to content

Commit

Permalink
fix(social buttons): use visually hidden text instead of aria-label, …
Browse files Browse the repository at this point in the history 
…in case of disabled CSS
  • Loading branch information
@ffoodd
ffoodd committed Oct 14, 2019
1 parent e1e5322 commit 987b244
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 28 deletions.
28 changes: 14 additions & 14 deletions site/_includes/boostwatch/buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,24 +81,24 @@ <h3 id="disabled-black-bg">Disabled</h3>
<div class="mt-3">
<h3>Social buttons</h3>
<p class="p-3">
<a class="btn btn-social btn-facebook" href="#" aria-label="Facebook"></a>
<a class="btn btn-social btn-twitter" href="#" aria-label="Twitter"></a>
<a class="btn btn-social btn-linkedin" href="#" aria-label="Linkedin"></a>
<a class="btn btn-social btn-instagram" href="#" aria-label="Instagram"></a>
<a class="btn btn-social btn-whatsapp" href="#" aria-label="Whatsapp"></a>
<a class="btn btn-social btn-youtube" href="#" aria-label="YouTube"></a>
<a class="btn btn-social btn-mail" href="#" aria-label="Mail"></a>
<a class="btn btn-social btn-facebook" href="#"><span class="sr-only">Facebook</span></a>
<a class="btn btn-social btn-twitter" href="#"><span class="sr-only">Twitter</span></a>
<a class="btn btn-social btn-linkedin" href="#"><span class="sr-only">Linkedin</span></a>
<a class="btn btn-social btn-instagram" href="#"><span class="sr-only">Instagram</span></a>
<a class="btn btn-social btn-whatsapp" href="#"><span class="sr-only">Whatsapp</span></a>
<a class="btn btn-social btn-youtube" href="#"><span class="sr-only">YouTube</span></a>
<a class="btn btn-social btn-mail" href="#"><span class="sr-only">Mail</span></a>
</p>
<div>
<h3>Dark Background</h3>
<p class="bg-dark p-3">
<a class="btn btn-inverse btn-social btn-facebook" href="#" aria-label="Facebook"></a>
<a class="btn btn-inverse btn-social btn-twitter" href="#" aria-label="Twitter"></a>
<a class="btn btn-inverse btn-social btn-linkedin" href="#" aria-label="Linkedin"></a>
<a class="btn btn-inverse btn-social btn-instagram" href="#" aria-label="Instagram"></a>
<a class="btn btn-inverse btn-social btn-whatsapp" href="#" aria-label="Whatsapp"></a>
<a class="btn btn-inverse btn-social btn-youtube" href="#" aria-label="YouTube"></a>
<a class="btn btn-inverse btn-social btn-mail" href="#" aria-label="Mail"></a>
<a class="btn btn-inverse btn-social btn-facebook" href="#"><span class="sr-only">Facebook</span></a>
<a class="btn btn-inverse btn-social btn-twitter" href="#"><span class="sr-only">Twitter</span></a>
<a class="btn btn-inverse btn-social btn-linkedin" href="#"><span class="sr-only">Linkedin</span></a>
<a class="btn btn-inverse btn-social btn-instagram" href="#"><span class="sr-only">Instagram</span></a>
<a class="btn btn-inverse btn-social btn-whatsapp" href="#"><span class="sr-only">Whatsapp</span></a>
<a class="btn btn-inverse btn-social btn-youtube" href="#"><span class="sr-only">YouTube</span></a>
<a class="btn btn-inverse btn-social btn-mail" href="#"><span class="sr-only">Mail</span></a>
</p>
</div>
</div>
Expand Down
28 changes: 14 additions & 14 deletions site/docs/4.3/components/buttons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,13 @@ Here are available social media buttons:

{% capture example %}
<div class="p-3">
<a class="btn btn-social btn-facebook" href="#" aria-label="Facebook"></a>
<a class="btn btn-social btn-twitter" href="#" aria-label="Twitter"></a>
<a class="btn btn-social btn-linkedin" href="#" aria-label="Linkedin"></a>
<a class="btn btn-social btn-instagram" href="#" aria-label="Instagram"></a>
<a class="btn btn-social btn-whatsapp" href="#" aria-label="Whatsapp"></a>
<a class="btn btn-social btn-youtube" href="#" aria-label="YouTube"></a>
<a class="btn btn-social btn-mail" href="#" aria-label="Mail"></a>
<a class="btn btn-social btn-facebook" href="#"><span class="sr-only">Facebook</span></a>
<a class="btn btn-social btn-twitter" href="#"><span class="sr-only">Twitter</span></a>
<a class="btn btn-social btn-linkedin" href="#"><span class="sr-only">Linkedin</span></a>
<a class="btn btn-social btn-instagram" href="#"><span class="sr-only">Instagram</span></a>
<a class="btn btn-social btn-whatsapp" href="#"><span class="sr-only">Whatsapp</span></a>
<a class="btn btn-social btn-youtube" href="#"><span class="sr-only">YouTube</span></a>
<a class="btn btn-social btn-mail" href="#"><span class="sr-only">Mail</span></a>
</div>
{% endcapture %}
{% include example.html content=example %}
Expand All @@ -90,13 +90,13 @@ Here are available social media buttons:

{% capture example %}
<div class="bg-dark p-3">
<a class="btn btn-inverse btn-social btn-facebook" href="#" aria-label="Facebook"></a>
<a class="btn btn-inverse btn-social btn-twitter" href="#" aria-label="Twitter"></a>
<a class="btn btn-inverse btn-social btn-linkedin" href="#" aria-label="Linkedin"></a>
<a class="btn btn-inverse btn-social btn-instagram" href="#" aria-label="Instagram"></a>
<a class="btn btn-inverse btn-social btn-whatsapp" href="#" aria-label="Whatsapp"></a>
<a class="btn btn-inverse btn-social btn-youtube" href="#" aria-label="YouTube"></a>
<a class="btn btn-inverse btn-social btn-mail" href="#" aria-label="Mail"></a>
<a class="btn btn-inverse btn-social btn-facebook" href="#"><span class="sr-only">Facebook</span></a>
<a class="btn btn-inverse btn-social btn-twitter" href="#"><span class="sr-only">Twitter</span></a>
<a class="btn btn-inverse btn-social btn-linkedin" href="#"><span class="sr-only">Linkedin</span></a>
<a class="btn btn-inverse btn-social btn-instagram" href="#"><span class="sr-only">Instagram</span></a>
<a class="btn btn-inverse btn-social btn-whatsapp" href="#"><span class="sr-only">Whatsapp</span></a>
<a class="btn btn-inverse btn-social btn-youtube" href="#"><span class="sr-only">YouTube</span></a>
<a class="btn btn-inverse btn-social btn-mail" href="#"><span class="sr-only">Mail</span></a>
</div>
{% endcapture %}
{% include example.html content=example %}
Expand Down

0 comments on commit 987b244

Please sign in to comment.