library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

A11y: Enhance dropdown examples. (#908)

Browse Source 
- use button to can reach by keyboard and make a user with screen reader understand that's is a button.
- add aria-haspopup to make screen reader user understand this button have a drop-down.
- add aria-controls to make screen reader user understand this button control on items called x.
- should add aria-expanded by JS when user toggle button.

- add aria-hidden to icons.
- add href=# to links to make it a link we can interact with a keyboard.

- add role menu to menu drop-down to make sure this div is a menu.
- should add aria-hidden by JS and toggle it by button expanded.
This commit is contained in:
Muhannad Abdelrazek 2017-07-26 19:45:08 +02:00 committed by Jeremy Thomas
parent f0e2fbbbda
commit d7e49a4dc3
1 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
docs/documentation/components/dropdown.html
View File

@ -7,29 +7,29 @@ doc-subtab: dropdown
{% capture dropdown_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
<a class="button">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a class="dropdown-item is-active">
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
@ -40,14 +40,14 @@ doc-subtab: dropdown
{% capture dropdown_content_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
<a class="button is-info">
<button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu2">
<span>Content</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
@ -57,7 +57,7 @@ doc-subtab: dropdown
<p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
</div>
<hr class="dropdown-divider">
<a class="dropdown-item">
<a href="#" class="dropdown-item">
This is a link
</a>
</div>
@ -68,38 +68,38 @@ doc-subtab: dropdown
{% capture dropdown_click_example %}
<div class="dropdown">
<div class="dropdown-trigger">
<a class="button is-primary">
<button class="button is-primary" aria-haspopup="true" aria-controls="dropdown-menu3">
<span>Click me</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Overview
</a>
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Modifiers
</a>
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Grid
</a>
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Form
</a>
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Elements
</a>
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Components
</a>
<a class="dropdown-item">
<a href="#" class="dropdown-item">
Layout
</a>
<hr class="dropdown-divider">
<a class="dropdown-item">
<a href="#" class="dropdown-item">
More
</a>
</div>
@ -110,14 +110,14 @@ doc-subtab: dropdown
{% capture dropdown_info_example %}
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<a class="button is-info">
<button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
@ -130,14 +130,14 @@ doc-subtab: dropdown
{% capture dropdown_left_example %}
<div class="dropdown is-active">
<div class="dropdown-trigger">
<a class="button is-info">
<button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu5">
<span>Left aligned</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-menu" id="dropdown-menu5" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>The dropdown is <strong>left-aligned</strong> by default.</p>
@ -150,14 +150,14 @@ doc-subtab: dropdown
{% capture dropdown_right_example %}
<div class="dropdown is-right is-active">
<div class="dropdown-trigger">
<a class="button is-info">
<button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu6">
<span>Right aligned</span>
<span class="icon is-small">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-menu" id="dropdown-menu6" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>