library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

A11y: Enhance components docs

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/documentation/components/breadcrumb.html
View File

@ -43,10 +43,38 @@ doc-subtab: breadcrumb
{% capture breadcrumb_icons_example %}
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#"><span class="icon is-small"><i class="fas fa-home"></i></span><span>Bulma</span></a></li>
<li><a href="#"><span class="icon is-small"><i class="fas fa-book"></i></span><span>Documentation</span></a></li>
<li><a href="#"><span class="icon is-small"><i class="fas fa-puzzle-piece"></i></span><span>Components</span></a></li>
<li class="is-active"><a href="#" aria-current="page"><span class="icon is-small"><i class="fas fa-thumbs-up" aria-hidden="true"></i></span><span>Breadcrumb</span></a></li>
<li>
<a href="#">
<span class="icon is-small">
<i class="fas fa-home" aria-hidden="true"></i>
</span>
<span>Bulma</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
<span>Documentation</span>
</a>
</li>
<li>
<a href="#">
<span class="icon is-small">
<i class="fas fa-puzzle-piece" aria-hidden="true"></i>
</span>
<span>Components</span>
</a>
</li>
<li class="is-active">
<a href="#">
<span class="icon is-small">
<i class="fas fa-thumbs-up" aria-hidden="true"></i>
</span>
<span>Breadcrumb</span>
</a>
</li>
</ul>
</nav>
{% endcapture %}

31
docs/documentation/components/modal.html
View File

@ -80,7 +80,7 @@ doc-subtab: modal
</li>
</ul>
<p>
<a class="button is-primary is-large modal-button" data-target="modal">Launch example modal</a>
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
</p>
</div>
@ -119,7 +119,7 @@ doc-subtab: modal
<div class="content">
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
<p>
<a class="button is-primary is-large modal-button" data-target="modal-ter">Launch modal card</a>
<button class="button is-primary is-large modal-button" data-target="modal-bis" aria-haspopup="true">Launch image modal</button>
</p>
</div>
@ -152,14 +152,15 @@ doc-subtab: modal
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
<a class="level-item" aria-label="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
<a class="level-item" aria-label="like">
<span class="icon is-small">
<i class="fas fa-heart" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
@ -167,17 +168,17 @@ doc-subtab: modal
</article>
</div>
</div>
<button class="modal-close is-large"></button>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<div id="modal-bis" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="{{site.url}}/images/placeholders/1280x960.png">
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
</p>
</div>
<button class="modal-close is-large"></button>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<div id="modal-ter" class="modal">
@ -185,7 +186,7 @@ doc-subtab: modal
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete"></button>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="content">
@ -226,8 +227,8 @@ doc-subtab: modal
</div>
</section>
<footer class="modal-card-foot">
<a class="button is-success">Save changes</a>
<a class="button">Cancel</a>
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>

20
docs/documentation/components/nav.html
View File

@ -53,20 +53,20 @@ doc-subtab: nav
{% capture nav_example %}
<nav class="nav">
<div class="nav-left">
<a class="nav-item">
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
<a class="nav-item" href="#">
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma">
</a>
</div>
<div class="nav-center">
<a class="nav-item">
<span class="icon">
<i class="fab fa-github"></i>
<i class="fas fa-github" aria-hidden="true"></i>
</span>
</a>
<a class="nav-item">
<span class="icon">
<i class="fab fa-twitter"></i>
<i class="fas fa-twitter" aria-hidden="true"></i>
</span>
</a>
</div>
@ -97,7 +97,7 @@ doc-subtab: nav
<p class="control">
<a class="button">
<span class="icon">
<i class="fab fa-twitter"></i>
<i class="fas fa-twitter" aria-hidden="true"></i>
</span>
<span>Tweet</span>
</a>
@ -105,7 +105,7 @@ doc-subtab: nav
<p class="control">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-download"></i>
<i class="fas fa-download" aria-hidden="true"></i>
</span>
<span>Download</span>
</a>
@ -145,9 +145,9 @@ doc-subtab: nav
<div class="container">
<div class="nav-left">
<a class="nav-item">
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma">
</a>
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
<a class="nav-item is-tab is-hidden-mobile is-active" aria-current="page">Home</a>
<a class="nav-item is-tab is-hidden-mobile">Features</a>
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
<a class="nav-item is-tab is-hidden-mobile">About</a>
@ -158,13 +158,13 @@ doc-subtab: nav
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
<a class="nav-item is-tab is-hidden-tablet is-active" aria-current="page">Home</a>
<a class="nav-item is-tab is-hidden-tablet">Features</a>
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
<a class="nav-item is-tab is-hidden-tablet">About</a>
<a class="nav-item is-tab">
<figure class="image is-16x16" style="margin-right: 8px;">
<img src="{{site.url}}/images/jgthms.png">
<img src="{{site.url}}/images/jgthms.png" alt="">
</figure>
Profile
</a>

56
docs/documentation/components/navbar.html
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" %}

14
docs/documentation/components/panel.html
View File

@ -14,7 +14,7 @@ doc-subtab: panel
<p class="control has-icons-left">
<input class="input is-small" type="text" placeholder="search">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
@ -27,37 +27,37 @@ doc-subtab: panel
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book"></i>
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"></i>
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"></i>
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"></i>
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch"></i>
<i class="fas fa-code-fork" aria-hidden="true"></i>
</span>
daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch"></i>
<i class="fas fa-code-fork" aria-hidden="true"></i>
</span>
mojs
</a>

62
docs/documentation/components/tabs.html
View File

@ -43,25 +43,25 @@ doc-subtab: tabs
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
@ -107,25 +107,25 @@ doc-subtab: tabs
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
@ -138,25 +138,25 @@ doc-subtab: tabs
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
@ -200,20 +200,20 @@ doc-subtab: tabs
<ul>
<li>
<a>
<span class="icon"><i class="fas fa-angle-left"></i></span>
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-angle-up"></i></span>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fas fa-angle-right"></i></span>
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
@ -225,25 +225,25 @@ doc-subtab: tabs
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
@ -256,25 +256,25 @@ doc-subtab: tabs
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
@ -287,25 +287,25 @@ doc-subtab: tabs
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
@ -318,25 +318,25 @@ doc-subtab: tabs
<ul>
<li class="is-active">
<a>
<span class="icon"><i class="fas fa-image"></i></span>
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-music"></i></span>
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-film"></i></span>
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-file-alt"></i></span>
<span class="icon"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>

18
docs/documentation/elements/box.html
View File

@ -25,14 +25,20 @@ doc-subtab: box
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
<a class="level-item" aria-label="reply">
<span class="icon is-small">
<i class="fas fa-reply" aria-hidden="true"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
<a class="level-item" aria-label="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
<a class="level-item" aria-label="like">
<span class="icon is-small">
<i class="fas fa-heart" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>