89 lines
4.2 KiB
Vue
89 lines
4.2 KiB
Vue
<template>
|
|
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
|
<h3>Screen Reader</h3>
|
|
<p>
|
|
ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" 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. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
|
|
the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
|
|
</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>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>enter</i>
|
|
</td>
|
|
<td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>space</i>
|
|
</td>
|
|
<td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>escape</i>
|
|
</td>
|
|
<td>Closes the context menu.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>down arrow</i>
|
|
</td>
|
|
<td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>up arrow</i>
|
|
</td>
|
|
<td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>right arrow</i>
|
|
</td>
|
|
<td>Opens a submenu if there is one available and moves focus to the first item.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>left arrow</i>
|
|
</td>
|
|
<td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>home</i>
|
|
</td>
|
|
<td>Moves focus to the first menuitem within the submenu.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i>end</i>
|
|
</td>
|
|
<td>Moves focus to the last menuitem within the submenu.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i>any printable character</i></td>
|
|
<td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</DocSectionText>
|
|
</template>
|