A11y: Enhance navbar docs (#1065)

This commit is contained in:
Muhannad Abdelrazek 2017-09-09 13:33:05 +03:00 committed by Jeremy Thomas
parent 79dedea734
commit 37bb5db8b7

View File

@ -66,7 +66,7 @@ variables:
{% endcapture %}
{% capture navbar_brand_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<!-- navbar items, navbar burger ... -->
</div>
@ -74,31 +74,31 @@ variables:
{% endcapture %}
{% capture navbar_burger_example %}
<div class="navbar-burger">
<button class="button navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</button>
{% endcapture %}
{% capture navbar_brand_items_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
</a>
<div class="navbar-burger">
<button class="button navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</nav>
{% endcapture %}
{% capture navbar_menu_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<!-- navbar items, nav burger ... -->
</div>
@ -138,7 +138,7 @@ variables:
{% capture navbar_item_brand_example %}
<a class="navbar-item">
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28" alt="Bulma">
</a>
{% endcapture %}
@ -168,7 +168,7 @@ variables:
<p class="control">
<a class="button">
<span class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</span>
<span>Tweet</span>
</a>
@ -176,7 +176,7 @@ variables:
<p class="control">
<a class="button is-primary">
<span class="icon">
<i class="fa fa-download"></i>
<i class="fa fa-download" aria-hidden="true"></i>
</span>
<span>Download</span>
</a>
@ -190,7 +190,7 @@ variables:
{% endcapture %}
{% capture navbar_dropdown_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown">
<a class="navbar-link">
Docs
@ -222,7 +222,7 @@ variables:
{% endcapture %}
{% capture navbar_dropdown_hover_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Docs
@ -254,7 +254,7 @@ variables:
{% endcapture %}
{% capture navbar_dropdown_active_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item has-dropdown is-active">
<a class="navbar-link">
Docs
@ -286,7 +286,7 @@ variables:
{% endcapture %}
{% capture navbar_dropdown_right_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-active">
@ -351,7 +351,7 @@ variables:
{% endcapture %}
{% capture navbar_dropdown_default_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
</a>
@ -392,7 +392,7 @@ variables:
{% endcapture %}
{% capture navbar_dropdown_boxed_example %}
<nav class="navbar is-transparent">
<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
</a>
@ -433,7 +433,7 @@ variables:
{% endcapture %}
{% capture navbar_dropdown_item_active_example %}
<nav class="navbar">
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
</a>
@ -478,11 +478,11 @@ variables:
{% endcapture %}
{% capture navbar_js_html %}
<div class="navbar-burger" data-target="navMenu">
<button class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</button>
<div class="navbar-menu" id="navMenu">
<!-- navbar-start, navbar-end... -->