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