Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 11:24:29 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

33
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>
<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="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<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>