You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.3 KiB
47 lines
1.3 KiB
2 years ago
|
**This document is used as aria/a11y reference for future developers**
|
||
|
|
|
||
|
|
## ARIA Dropdown
|
||
|
|
|
||
|
|
There are different solutions:
|
||
|
|
* combobox + listbox + option
|
||
|
|
* menu + menuitem
|
||
|
|
|
||
|
|
At the moment, `menu + menuitem` seems to work better with Fomantic UI Dropdown, so we only use it now.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div>
|
||
|
|
<input role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="the-menu-listbox" aria-activedescendant="item-id-123456">
|
||
|
|
<ul id="the-menu-listbox" role="listbox">
|
||
|
|
<li role="option" id="item-id-123456" aria-selected="true">
|
||
|
|
<a tabindex="-1" href="....">....</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
## Fomantic UI Dropdown
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- read-only dropdown -->
|
||
|
|
<div class="ui dropdown"> <!-- focused here, then it's not perfect to use aria-activedescendant to point to the menu item -->
|
||
|
|
<input type="hidden" ...>
|
||
|
|
<div class="text">Default</div>
|
||
|
|
<div class="menu transition hidden" tabindex="-1">
|
||
|
|
<div class="item active selected">Default</div>
|
||
|
|
<div class="item">...</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- search input dropdown -->
|
||
|
|
<div class="ui dropdown">
|
||
|
|
<input type="hidden" ...>
|
||
|
|
<input class="search" autocomplete="off" tabindex="0"> <!-- focused here -->
|
||
|
|
<div class="text"></div>
|
||
|
|
<div class="menu transition visible" tabindex="-1">
|
||
|
|
<div class="item selected">...</div>
|
||
|
|
<div class="item">...</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|