A11y: Enhance components docs

This commit is contained in:
Muhannad Abdelrazek
2018-03-28 01:28:22 +02:00
committed by Jeremy Thomas
parent c998b00051
commit c225c47121
7 changed files with 138 additions and 103 deletions

View File

@@ -20,11 +20,11 @@ doc-subtab: navbar
{% endcapture %}
{% capture navbar_burger_example %}
<div class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
{% endcapture %}
{% capture navbar_brand_items_example %}
@@ -34,11 +34,11 @@ doc-subtab: navbar
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<div class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
{% endcapture %}
@@ -114,7 +114,7 @@ doc-subtab: navbar
<p class="control">
<a class="button">
<span class="icon">
<i class="fab fa-twitter" aria-hidden="true"></i>
<i class="fas fa-twitter" aria-hidden="true"></i>
</span>
<span>Tweet</span>
</a>
@@ -478,11 +478,11 @@ doc-subtab: navbar
{% endcapture %}
{% capture navbar_js_html %}
<div class="navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu" id="navMenu">
<!-- navbar-start, navbar-end... -->
@@ -641,12 +641,12 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="bd-example is-paddingless">
<div class="navbar-burger" style="display: flex;">
<span></span>
<span></span>
<span></span>
</div>
<div class="example is-paddingless">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
@@ -657,12 +657,12 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
<div class="bd-example is-paddingless">
<div class="navbar-burger is-active" style="display: flex;">
<span></span>
<span></span>
<span></span>
</div>
<div class="example is-paddingless">
<a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
{% include anchor.html name="Navbar menu" %}