Implementatie:
Het openen en sluiten van de dropdown button moet worden ondersteund met muis-, touch- en toetsenbordbediening.
De scripting zal zelf geรฏmplementeerd moeten worden, waarbij het te programmeren gedrag op de diverse relevante toetsen gelijk moet zijn aan de native browser dropdown/select werkvorm:
event.code
ArrowUp
: omhoog, vorige โoptionโ, zelfde als tabevent.code
ArrowDown
: omlaag, volgende โoptionโ, zelfde als shift-tabevent.code
Escape
: sluit dropdown, geen keuze makenevent.code
Space
: maak keuze(inspiratie: Bootstrap dropdown)
Voorschriften/algemeen:
button
en dropdown-menu
staan in een div.dropdown
. Het dropdown-menu
wordt getoond wanneer div.dropdown
de class open
heeft.button
attribute aria-haspopup="true"
Dropdown-button ingeklapt:
div.dropdown
geen class open
button
attribute aria-expanded="false"
Markup:
<div class="dropdown">
<button type="button" aria-haspopup="true" aria-expanded="false" class="btn btn-link">
<div class="dropdown-menu">
</div>
Dropdown-button ingeklapt:
div.dropdown
heeft class open
button
attribute aria-expanded="true"
Markup:
<div class="dropdown open">
<button type="button" aria-haspopup="true" aria-expanded="true" class="btn btn-link">
<div class="dropdown-menu">
</div>
Note: de button
kan naar behoeve de classes btn-link
, btn-default
en btn-primary
hebben.
<!-- Dropdown Link -->
<div class="dropdown">
<button type="button" id="actie" aria-haspopup="true" aria-expanded="false" class="btn btn-link"><span>Actie</span></button>
</div>
<!-- Dropdown Link Open -->
<div class="dropdown open">
<button type="button" id="dropdown-link-open" aria-haspopup="true" aria-expanded="true" class="btn btn-link"><span>Actie</span></button>
<div class="dropdown-menu">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown-link-open">
<li>
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown-link-open">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown-link-open">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Link Open Selectable -->
<div class="dropdown open">
<button type="button" id="dropdown-link-open-selectable" aria-haspopup="true" aria-expanded="true" class="btn btn-link"><span>Actie</span></button>
<div class="dropdown-menu dso-checkable">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown-link-open-selectable">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown-link-open-selectable">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown-link-open-selectable">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Default Button -->
<div class="dropdown">
<button type="button" id="dropdown_default_button" aria-haspopup="true" aria-expanded="false" class="btn btn-default"><span>Actie</span></button>
</div>
<!-- Dropdown Default Button Open -->
<div class="dropdown open">
<button type="button" id="dropdown_default_button_open" aria-haspopup="true" aria-expanded="true" class="btn btn-default"><span>Actie</span></button>
<div class="dropdown-menu">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_default_button_open">
<li>
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_default_button_open">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_default_button_open">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Default Button Open Checkable -->
<div class="dropdown open">
<button type="button" id="dropdown_default_button_open_checkable" aria-haspopup="true" aria-expanded="true" class="btn btn-default"><span>Actie</span></button>
<div class="dropdown-menu dso-checkable">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Primary Button -->
<div class="dropdown">
<button type="button" id="dropdown_primary_button" aria-haspopup="true" aria-expanded="false" class="btn btn-primary"><span>Actie</span></button>
</div>
<!-- Dropdown Primary Button Open -->
<div class="dropdown open">
<button type="button" id="dropdown_primary_button_open" aria-haspopup="true" aria-expanded="true" class="btn btn-primary"><span>Actie</span></button>
<div class="dropdown-menu">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_primary_button_open">
<li>
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_primary_button_open">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_primary_button_open">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Primary Button Open Checkable -->
<div class="dropdown open">
<button type="button" id="dropdown_primary_button_open_checkable" aria-haspopup="true" aria-expanded="true" class="btn btn-primary"><span>Actie</span></button>
<div class="dropdown-menu dso-checkable">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Link Button Align Right -->
<div class="dropdown open dso-dropdown-right">
<button type="button" id="dropdown_link_button_align_right" aria-haspopup="true" aria-expanded="true" class="btn btn-link"><span>Actie</span></button>
<div class="dropdown-menu dso-checkable">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_link_button_align_right">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_link_button_align_right">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_link_button_align_right">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Default Button Align Right -->
<div class="dropdown open dso-dropdown-right">
<button type="button" id="dropdown_default_button_align_right" aria-haspopup="true" aria-expanded="true" class="btn btn-default"><span>Actie</span></button>
<div class="dropdown-menu dso-checkable">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_default_button_align_right">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_default_button_align_right">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_default_button_align_right">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<!-- Dropdown Primary Button Align Right -->
<div class="dropdown open dso-dropdown-right">
<button type="button" id="dropdown_primary_button_align_right" aria-haspopup="true" aria-expanded="true" class="btn btn-primary"><span>Actie</span></button>
<div class="dropdown-menu dso-checkable">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</div>
<div {{ className('dropdown', [open, 'open'], [align, 'dso-dropdown-' + align]) }}>
{% render '@button', {type: 'button', modifier: modifier, label: label, id: id, icon: icon, iconAfter: iconAfter, ariaHasPopup: ariaHasPopup, ariaExpanded: not not open} %}
{% if open %}
<div {{ className('dropdown-menu', modifiers) }}>
{% for group in groups %}
{% if group.label %}
<h2 class="dso-group-label">{{ group.label }}</h2>
{% endif %}
<ul aria-labelledby="{{ id }}">
{% for item in group.items %}
<li {{ className([item.checked, 'dso-checked']) }}>
<a href="#">{{ item.label }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
{% endif %}
</div>
/* Dropdown Link */
id: actie
modifier: link
ariaHasPopup: true
open: false
label: Actie
/* Dropdown Link Open */
id: dropdown-link-open
modifier: link
ariaHasPopup: true
open: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Link Open Selectable */
id: dropdown-link-open-selectable
modifier: link
ariaHasPopup: true
open: true
label: Actie
modifiers: dso-checkable
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Default Button */
id: dropdown_default_button
modifier: default
ariaHasPopup: true
open: false
label: Actie
/* Dropdown Default Button Open */
id: dropdown_default_button_open
modifier: default
ariaHasPopup: true
open: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Default Button Open Checkable */
id: dropdown_default_button_open_checkable
modifier: default
ariaHasPopup: true
open: true
label: Actie
modifiers: dso-checkable
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Primary Button */
id: dropdown_primary_button
modifier: primary
ariaHasPopup: true
open: false
label: Actie
/* Dropdown Primary Button Open */
id: dropdown_primary_button_open
modifier: primary
ariaHasPopup: true
open: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Primary Button Open Checkable */
id: dropdown_primary_button_open_checkable
modifier: primary
ariaHasPopup: true
open: true
label: Actie
modifiers: dso-checkable
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Link Button Align Right */
id: dropdown_link_button_align_right
modifier: link
ariaHasPopup: true
open: true
label: Actie
align: right
modifiers: dso-checkable
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Default Button Align Right */
id: dropdown_default_button_align_right
modifier: default
ariaHasPopup: true
open: true
label: Actie
align: right
modifiers: dso-checkable
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
/* Dropdown Primary Button Align Right */
id: dropdown_primary_button_align_right
modifier: primary
ariaHasPopup: true
open: true
label: Actie
align: right
modifiers: dso-checkable
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'