Merged new Docs and Demos

This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions

View file

@ -0,0 +1,81 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
Menu component uses the <i>menu</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with <i>aria-label</i> referring to the
label of the item and <i>aria-disabled</i> defined if the item is disabled.
</p>
<p>In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.</p>
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
</tr>
<tr>
<td><i>shift</i> + <i>tab</i></td>
<td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
</tr>
<tr>
<td>
<i>escape</i>
</td>
<td>If menu is in overlay mode, popup gets closes and focus moves to target.</td>
</tr>
<tr>
<td>
<i>down arrow</i>
</td>
<td>Moves focus to the next menuitem.</td>
</tr>
<tr>
<td>
<i>up arrow</i>
</td>
<td>Moves focus to the previous menuitem.</td>
</tr>
<tr>
<td><i>alt</i> + <i>up arrow</i></td>
<td>If menu is in overlay mode, popup gets closes and focus moves to the target.</td>
</tr>
<tr>
<td>
<i>home</i>
</td>
<td>Moves focus to the first menuitem.</td>
</tr>
<tr>
<td>
<i>end</i>
</td>
<td>Moves focus to the last menuitem.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>