mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
A11y: Enhance navbar docs (#1065)
This commit is contained in:
parent
79dedea734
commit
37bb5db8b7
@ -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... -->
|
||||||
|
Loading…
Reference in New Issue
Block a user